easyUI基础

Posted 大数据的未来

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyUI基础相关的知识,希望对你有一定的参考价值。

                                                          easyUI基础

学会查阅文档,使用jQuery-EasyUI,构建自已的Web页面

学习地址!!!!!!http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid24.html

  (1)网址:www.jeasyui.com,下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册

 

   (2)什么是jQuery-EasyUI

        参见<<什么是EasyUI.JPG>>

        是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的

WEB[后台前端]javascript现成的组件库

        注意:今天的EasyUI组件库的版本较高,需要高版本浏览器支持,

中低版本浏览器会有不能正常执行的情况

 

  (3)JavaScript,AJAX,JSON,jQuery,EasyUI分别能解决什么问题

            JS:基于浏览器对web页面中的节点进行操作,比较麻烦

            jQuery:基于浏览器简化对web页面中的节点进行操作,做到了write less do more

            AJAX:基于浏览器与服务端进行局部刷新的异步通讯编程模式

            JSON:简化自定义对象的创建与AJAX数据交换轻量级文本

            EasyUI:快速基于现成的组件创建自已的web页面

组件:是指已经由第三方开源组织写好的,直接可以使用的功能界面,例如:form,layout,tree...

     注意:我们学的都是零散的组件,项目中需要将其装配起来,方可构建完整的web页面,

EasyUI只是众多前端WEB组件之一

 

   (4)jQuery-EasyUI快速入门----可折叠功能的面板

        第一步:创建一个js-day05这么一个web工程

        第二步:在WebRoot目录下创建00-base.html

        第三步:在WebRoot目录下创建js和themes目录,导入官方文件

参见<< jquery-easyui-1.3.6文件夹>>

        第四步:在00-base.html 文件的<head>标签中引入如下文件

    <!-- 引入外部CSS文件 -->

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

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

 

    <!-- 引入外部JS文件 -->

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

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

 

        第五步:在00-base.html 文件的<body>标签中创建如下<div>标签

    <div

       id="p"

       class="easyui-panel"

       style="width:500px;height:200px;padding:10px;"  

        title="我的面板"

        iconCls="icon-save"

        collapsible="true">  

        内容<br/>

        内容<br/>

        内容<br/>

        内容<br/>

    </div>

 

   (5)EasyUI组件

 

(01)  layout布局

     <!--布局面板 -->

     <divdata-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',href:'/js-day05/06_image.html',collapsible:false"style="padding:5px;background:#eee;"></div>  

     </div>

            

<scripttype="text/javascript">

       //浏览器加载web页面时触发

       $(function()

          

           //将北边面板折叠,字符串双引单引均可

           $('#cc').layout('collapse','north');

          

           //休息3

           window.setTimeout(function()

 

              //将南边面板折叠,字符串双引单引均可

              $('#cc').layout('collapse','south');

          

           ,"3000");

 

       );

    </script>

             

  <bodyclass="easyui-layout">

       <!-- -->

       <divdata-options="region:'north'"style="height:150px"></div>

        <!-- -->

        <div data-options="region:'center'">

           <!-- 将中拆分边西和中二部份 -->

            <div class="easyui-layout"data-options="fit:true">

               <!-- -->

               <div data-options="region:'west'"style="width:200px"></div>

               <!-- -->

               <div data-options="region:'center'"></div>

            </div>

        </div>

  </body>

 

       (02)accordion分类

       <!--容器 -->

       <divdata-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>

            

<scripttype="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>

(3)linkbutton按钮

       <aid="btn-add"class="easyui-linkbutton"data-options="iconCls:'icon-add'">

           增加

       </a>

       <aid="btn-find"class="easyui-linkbutton"data-options="iconCls:'icon-search'">

           查询

       </a>

       <aid="btn-update"class="easyui-linkbutton"data-options="iconCls:'icon-edit'">

           修改

       </a>

       <aid="btn-delete"class="easyui-linkbutton"data-options="iconCls:'icon-remove'">

           删除

       </a>

     

       <scripttype="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>

 

       (04)tabs选项卡

<!-- 容器面板 -->

       <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>

            

<scripttype="text/javascript">

           $(document).ready(function()

              $("#tt").tabs("add",

                  "title":"Tab4",

                  "content":"tab4",

                  "selected":false,

                  "closable":true

              );

           );

       </script>

            

<scripttype="text/javascript">

     

        //定位四个按钮,同时添加单击事件

        $("a").click(function()

           //获取按钮的文本

           var tip = $(this).text();

           //去空格

           tip = $.trim(tip);

           //如果是"增加部门"

          if("增加部门" ==tip)

               //是否已有相同的tabs选项卡打开

              var flag= $("#tt").tabs("exists",tip);

               //如果不存在相同的tabs选项卡打开

             if(!flag)

                  //创建一个tabs选项卡

                $("#tt").tabs("add",

                    "title":tip,

                     "href":"$pageContext.request.contextPath/addGroup.jsp",

                    "selected":true,

                    "closable":true

                 );

              

          

        );

     

     </script>

 

       (05)pagination分页框

    <!--

       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>

            

    <scripttype="text/javascript">

       $("#pp").pagination(

           //pageNumber当前页号,例如1

           //pageSize获取多少条记录,例如:5

           //以上二个参数,需要谁,就接收谁,不一定二个都同时出现,参数名可以任意

           "onSelectPage":function(pageNumber,pageSize)

              alert(pageNumber +":"+ pageSize);

          

       );

    </script>

 重要学习地址:http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid24.html

 

 

 

 

 


       

 

 

 

 

   


以上是关于easyUI基础的主要内容,如果未能解决你的问题,请参考以下文章

获取 `UIRefreshControl` 到 `UITableViewController` 内容上方的北边,而不是在标题下?

easyUI基础

easyUI的基础布局easyui-accordion

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

easyUI表单基础知识

easyui---基础组件:panel