jqeui是专为后台网站开发的丰富易用前端框架。
适用网站类型:PC端后台网站。特别适合地产、金融等需要大数据量产示又想要时尚界面的网站。及需要表格列展开/折叠/新增需求的PC项目者。
适合人群:网站开发、设计人员。
一、名词解释
UI元素:给原生DOM元素添加指定的class,自动实现不同的效果。如:复选框;
UI插件:通过$.eui()进行调用的UI效果。如:表格。
二、调用方式:
1、所有的UI元素只添加指定效果的class即可。有的元素如选项卡除了添加class,还可以通过UI插件的方式调用以实现高级功能;
2、所有的UI插件通过$.eui()或$(ele).plug()方式调用。如提示信息:$('.tiptop').euiTip({content: "tip info"});
二、文件结构
../Demo/ DEMO效果文件夹
../External/ 外部引用插件文件夹(非必要)
../Images/ EUI所用图片文件夹
../eui.css EUI CSS
../jqeury.eui.demo.data.js EUI DEMO示例所引用的JSON数据文件夹
../jquery.cookie.js jQuery Coolkie文件(于EUI非必要,但通常保留)
../jquery.eui.config.js EUI配置文件
../jquery.eui.js EUI主JS文件
../jquery-1.11.3.min.js jQuery文件
三、属性、事件、方法定义
属性
属性是定义在 jQuery.fn.{plugin}.defaults。比如,tableEUI 的属性是定义在 jQuery.fn.tableEUI.titles。
事件
事件(回调函数)也是定义在 jQuery.fn.{plugin}.tableEUI.fn。比如,tableEUI 的属性是定义在 jQuery.fn.tableEUI.clickrowfn。
方法
将调用语句赋予变量,通过这个变更进行调用。比如,调用表格中已选择项ID:_table.selectedTrId();
示例:
var _table = new $('#table').tableEUI({
titles: _title2,//属性
data: _data2,//属性
gafterfn: function (data) {
//事件
}
});
_table.selectedTrId();//方法
四、UI元素美化
在页面加载后会自动美化。当有自定义jQuery DOM元素,需要格式化时,可使用以下方法:
$.euiformatui(jQele,type);
参数:
1、jQele:jQuery元素。如:$.euiformatui($("body"));表示对body元素进行全要素美化;
2、type:要美化的类型。如:$.euiformatui($("body"),"radio");表示对body元素下的所有radio类型进行美化;