首页 > 代码库 > jQuery EasyUI的使用入门

jQuery EasyUI的使用入门

jQuery EasyUI不是什么太高级的东西,就是用jQuery写了很多方法、定义了很多属性,通过调用这些方法、属性,可以达到一些特定的效果,然后我们再根据具体需求微调就好了。至少需要导入两个样式表和两个js文件:

<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css" /><link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/icon.css" /><script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

上面是把jquery-easyui-1.5.1解压缩后的文件夹直接复制到webapp中而形成的路径,最终的路径可能根据开发时的资源配置情况而调整,但是文件是固定的,就是那几个文件,必须要导入,而且导入js文件时,必须先导入jquery文件,因为jquery.easyui.min.js文件使用jQuery的方法写的。

如果涉及到语言问题,可能还需要导入一个国际化的js文件,在jquery-easyui-1.5.1/locale中,如果想用中文,就是easyui-lang-zh_CN.js文件,想用英文,就是easyui-lang-en.js文件。

通过视频,学习了基础部分的draggable(拖动)、pagination(分页),布局部分的panel(面板)、tabs(选项卡)、layout(布局),菜单和按钮部分的linkbutton(按钮)、表单部分的form(表单)、窗口部分的window(窗口)、dialog(对话框窗口)、messager(消息窗口),表格和树部分的datagrid(数据表格)、tree(树)。当然,实际开发中也可能用到其他的组件。

jQuery EasyUI用法非常简单,当用某个组件时,只需把class设为相对应的以easyui开头的值,然后通过data-options来设置属性,或者通过一些可选的方法来操作即可。看着API文档开发是最快的,不用记具体属性和方法名,记住规律就行,因为具体属性名和方法名实在是太多了。

jQuery EasyUI的使用入门