欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  jQuery EasyUI插件的简单使用详细介绍说明(上)

JQuery 网络 1275 0评论

EasyUI是什么


EasyUI是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的WEB[后台前端]JavaScript现成的组件库。

官方地址:http://www.jeasyui.net/ 


EasyUI使用(基本步骤)


1.下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">   

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>   

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 


2.一旦你导入了EasyUI必须的文件,你就可以通过标记或Javascript定义一个EasyUI组件。例如:定义一个带可折叠和放大功能的面板,你需要写的HTML代码如下:

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="My Panel" data-options="iconCls:'icon-save',collapsible:true,maximizable:true">   

    The panel content    

</div>  


3.效果如下

1001990-20170510155407707-196208633.png

可以看到,EasyUI非常方便易用,使用中要注意:①想要使用什么样的组件,就要在div中用【 class="easyui-xxx" 】声明出来,例如 :要实现面板样式,需要添加 class="easyui-panel" ②组件内的效果可用 【 data-options=“属性名:属性值,···,属性名:属性值” 】属性来实现,例如:要显示保存图标且实现面板折叠功能,可在div中添加 data-options="iconCls:'icon-save',collapsible:true"


总结如下:

第一:写一个普通div标签

第二:提倡为div标签取一个id属性,将来用jquery好定位

第三:为普通div标签添加easyui组件的样式

所有的easyui组件的样式均按如下格式设置:

easyui-组件名

第四:如果要用easyui组件自身的属性时,必须在普通标签上书写data-options属性名,内容为,key:value,key:value,如果value是string类型加引号,外面双引号,则里面单引号

注意:要在普通标签中书写data-options属性的前提是:在普通标签上加class="easyui-组件名" 

属性值大小写均可


EasyUI组件(plugins)


重中之重,其实EasyUI页面效果的实现就是由它众多的组件来完成,对于这些组件个人感觉时间不够的话没有必要每个组件的属性全部了解,当然他们的用法需要熟练。使用时遇到需要的功能可以直接查手册。

1001990-20170510161342707-1931711833.png

调用方法的语法$('selector').plugin('method', parameter);

解释:

---selector 是jQuery对象选择器。

---plugin 是插件的名称。

---method 是相应插件现有的方法。

---parameter 是参数对象,可以是一个对象、字符串等。


加载UI 组件的方式:

加载UI 组件有两种方式:

1.使用class 方式加载

//使用class 加载,格式为:easyui-组件名

<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">

内容部分

</div>

PS:使用了规定的格式就可以生成一个UI 组件,这是由于jQuery EasyUI 的一个解析器(Parser)的起到了作用。解析之后,从Firebug 里面可以看到UI 组件变化后的HTML。

//使用JS 调用加载

$('#box').dialog();

PS:一般推荐使用第二种JS 调用加载,因为一个UI 组件有很多属性和方法,如果使用class 的用法将极大的不方便。并且根据JS 和HTML 分离的原则,第二种提高了代码的可读性。

2.使用easyload.js 智能加载

//删除jQuery EasyUI 的JS 核心文件及CSS,引入easyloader.js 文件

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/easyloader.js"></script>

//JS 代码

easyloader.load('dialog', function () {

$('#box').dialog();

});

PS:使用easyloader 智能加载,是根据你使用的UI 组件按需加载。我们可以通过Firebug 查看HTML,发现加载了非常多的js 文件,这些js 都是dialog 组件的必须条件。

所以,使用easyloader 加载会减少不必要的内容加载。但问题是,使用智能加载,你编码的难度和成本都提高了,效率降低,并且智能加载的js 文件数量还是非常多的,并不会提高太大的速度,反而因为js 文件较多,被搜索引擎要求合并优化。


1. EasyUI常用组件的基本用法


1.1 layout布局

1001990-20170510163943082-2053937085.png

<!-- 布局面板  大小自适应父容器 -->

<div data-options="fit:true" id="cc" class="easyui-layout" style="width:600px;height:400px;">   
   <!-- 区域面板 -->
   <div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div>   
   <div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div>   
   <div data-options="region:'east',title:'东',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>   
   <div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>   
   <div data-options="region:'center',title:'中',iconCls:'icon-reload',collapsible:false" style="padding:5px;background:#eee;"></div>   
</div>

Js实现页面小功能

<script type="text/javascript">
        //浏览器加载web页面时触发
        $(function() {
            //将北边面板折叠,字符串双引单引均可
            $('#cc').layout('collapse', 'north');
            //休息3秒
            window.setTimeout(function() {
                //将南边面板折叠,字符串双引单引均可
                $('#cc').layout('collapse', 'south');
            }, "3000");
        });
</script>

实现页面嵌套

<body class="easyui-layout">
    <!-- 北 -->
    <div data-options="region:'north'" style="height:150px"></div>
    <!-- 中 -->
    <div data-options="region:'center'">
        <!-- 将中拆分边西和中二部份 -->
        <!-- center里增加新的嵌套时,需要将新的嵌套内容包含在新的div里
            声明class为easyui-layout     fit为true
            <div class="easyui-layout" data-options="fit:true">
            </div>
         -->
        <div class="easyui-layout" data-options="fit:true">
            <!-- 西 -->
            <div data-options="region:'west'" style="width:200px">西部</div>
            <!-- 中 -->
            <div data-options="region:'center'">
                <div class="easyui-layout" data-options="fit:true">
                    <!-- center里的div要求必须有一个设置宽或高,否则显示不出 -->
                    <div data-options="region:'north'" style="height:200px">中北部</div>
                    <div data-options="region:'center'"></div>
                </div>
            </div>
        </div>
</body>


1.2 accordion 分类 

1001990-20170510165724629-397110613.png

<!-- 容器 -->
<div data-options="border:true,animate:true,multiple:false,selected:-1"
   id="aa" class="easyui-accordion" style="width:300px;height:500px;">
   <!-- 面板 -->
   <div title="Title1" data-options="iconCls:'icon-save'"
  style="overflow:auto;padding:10px;">内容1</div>
   <div title="Title2" data-options="iconCls:'icon-reload'"
  style="padding:10px;">内容2</div>
   <div title="Title3"
  data-options="iconCls:'icon-reload',collapsible:true">内容3</div>
</div>

几点属性:

1001990-20170510171012472-874263719.png

增加一个4号面板并。。。。。

<script type="text/javascript">
   $(function() {
       //增加一个面板
       $("#aa").accordion("add", {
           "title" : "Title4",
           "content" : "内容4",
           "selected" : false,
           "iconCls" : "icon-search"
       });
       //休息3秒
       window.setTimeout(function() {
         //删除4号面板
        $("#aa").accordion("remove", 3);
         //取消选择1号面板
        $("#aa").accordion("unselect", 0);
       }, "3000");
   });
</script>


1.3 linkbutton 按钮 

1001990-20170510171556066-1388616292.png

<a id="btn-add" class="easyui-linkbutton"
        data-options="iconCls:'icon-add'"> 增加 </a>
<a id="btn-find" class="easyui-linkbutton"
        data-options="iconCls:'icon-search'"> 查询 </a>
<a id="btn-update" class="easyui-linkbutton"
        data-options="iconCls:'icon-edit'"> 修改 </a>
<a id="btn-delete" class="easyui-linkbutton"
        data-options="iconCls:'icon-remove'"> 删除 </a>
<script type="text/javascript">
   /*
   $("#btn-add").click(function(){
  //将该按失效
  $("#btn-add").linkbutton("disable");
   });
   $("#btn-add").dblclick(function(){
  //将该按失效
  $("#btn-add").linkbutton("disable");
   });
    */
  //参数一:字符串类型的事件,多个事件之间通过空格分隔,事件名称符合jquery事件名写法
  //参数二:处理函数
   $("#btn-add").bind("click dblclick", function() {
  //将该按失效
  $("#btn-add").linkbutton("disable");
   });
</script>


1.4 tabs 选项卡

1001990-20170510172502332-479915114.png

<!-- 容器面板 -->
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"
   data-options="plain:false,border:true,tools:[{
          iconCls:'icon-add',
          handler:function(){
             alert('添加')
                    }
          },{
             iconCls:'icon-remove',
             handler:function(){
             alert('删除')
          }
         }],selected:-1">
   <!-- 选项卡面板 -->
   <div title="Tab1" data-options="closable:true" style="padding:20px">tab1</div>
   <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">tab2</div>
   <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">tab3</div>
</div>

页面加载时增加一个tab4(属性用 Json 格式)

<script type="text/javascript">
     $(document).ready(function(){
       $("#tt").tabs("add",{
            "title":"Tab4",
            "content":"tab4",
            "selected":false,
            "closable":true
        });
     });
</script>


1.5 pagination(分页)

1001990-20170510173019082-1891086429.png

<!-- 
   total:记录总数100
   pageSize:每页显示多少条记录5
   pageNumber:当前页号1
   pageList:[5,10,15]表示可供选择中每页显示多少条记录,
      注意:pageSize的值必须是pageList数组值之一
-->    
<div id="pp" class="easyui-pagination" data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'页'" 
style="background:#efefef;border:1px solid #ccc;width:400px">
</div>

1001990-20170510173210644-1584987377.png

该功能实现

<script type="text/javascript">
   $("#pp").pagination({
       //pageNumber当前页号,例如1 
       //pageSize获取多少条记录,例如:5
       //以上二个参数,需要谁,就接收谁,不一定二个都同时出现,参数名可以任意
       "onSelectPage":function(pageNumber,pageSize){
           alert(pageNumber + ":" + pageSize);
       }
   });
</script>

实现中文显示可通过引入 easyui-lang-zh_CN.js 文件

1001990-20170510173731676-1542238805.png


原文地址:https://www.cnblogs.com/zjfjava/p/6836912.html

转载请注明: ITTXX.CN--分享互联网 » jQuery EasyUI插件的简单使用详细介绍说明(上)

最后更新:2018-10-23 11:58:33

赞 (13) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽