基于jQury的UI框架 easyUI

基于jQury的UI框架 easyUI

[email protected]

2015年8月6日

2015年9月25日重构

2015年10月15日属性事件读写

1 目标:在页面构造类似桌面的控件,生成易于使用和布局的界面。

2 原理:使用jQuery和javascript、CSS、HTML构造不同标签的样式模仿桌面控件。

3 流程:加入easyUI的js库和css样式,构建控件。

3.1 加入css和js。

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

      <link href="easyUI/themes/icon.css"rel="stylesheet" />

      <link href="easyUI/themes/color.css" rel="stylesheet"/>

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

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

3.2 构建easyUI的容器:以easy-控件名为class的div。

示例:

      <divclass="easyui-layout" style="height:100%;width:100%">

           <div data-options="region:'north',title:'northtitle',split:true" style="height:20%">north</div>

           <div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

           <div data-options="region:'east',title:'easttitle',split:true" style="width:100px">east</div>

           <div data-options="region:'west',title:'westtitle',split:true" style="width:100px">west</div>

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

                 <div class="test">this iscenter</div>

           </div>

      </div>

3.3 设置属性:data-options兼容html5的属性(从V1.3开始)。

data-options中以JSON格式设置。

示例:

           <div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

4 方法:组织架构:jQuery标准插件格式。

参见:jQuery.docx插件部件。

所有控件由属性、方法和事件组成。

4.1 属性和事件作为控件的属性存在。事件以onEvent函数存在。两者的默认实现都在$.fn.plugin.defaults下定义。

参考:http://blog.csdn.net/baronyang/article/details/44706257

4.1.1属性读取:$(id).easyui-type(‘options’)[属性]

$('#showcharts').linkbutton('options')['selected']

4.1.2属性设置:$(id).easyui-type({属性:值})

                      $('#showcharts').linkbutton({

                            iconCls : 'icon-add',

                            text : '显示图表'

                      })

4.1.3事件设置:属性设置或bind(jquery模式)

4.1.3.1  属性设置(推荐):$(id).easyuiType({事件名:响应函数})

$('#pg').propertygrid({onLoadSuccess:function(e){}});

4.1.3.2  jQuery绑定:$(id).常用事件(响应函数)或者$(id).bind(通用事件,响应函数)

            $('#showcharts').click(showCharts);

            $('#showcharts').bind('click',showCharts);

示例:

console.debug($.fn.dialog.defaults)

示例:linkbutton属性读写、事件绑定

//easyUITest.html

<!DOCTYPE html">

<!--

@author: [email protected]

@date: 2015-10-14 15:03

 -->

<html>

<head>

<metacontent="text/html; charset=utf-8" />

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"href="css/home.css" />

 

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

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

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

<scripttype="text/javascript"src="js/highcharts-3d.js"></script>

<title>Insert titlehere</title>

</head>

<body>

      <a id="showcharts"class="easyui-linkbutton"

           style="width: 100px; float: right;"

           data-options="disabled:false,toggle:true,selected:false,iconCls:'icon-add'">显示图表</a>

      <script type="text/javascript">

           $(document).ready(function() {

                 //toggle pie

                 //              $('#showcharts').click(showCharts);

                 $('#showcharts').bind('click',showCharts);

           });

 

           function showCharts() {

                 if($('#showcharts').linkbutton('options')['selected']) {

                      $('#showcharts').linkbutton({

                            iconCls :'icon-add',

                            text : '显示图表'

                      });

                 } else {

                      $('#showcharts').linkbutton({

                            iconCls : 'icon-remove',

                            text : '隐藏图表'

                      });

                 }

           }

      </script>

</body>

</html>

4.2 所有的方法由$.fn.plugin.methods定义,可以扩展。格式为function(jq,args)。调用格式为$.pluginName(methodName,args)。

示例:

console.debug($.fn.dialog.methods)

参考:http://www.jeasyui.com/documentation/index.php

4.3 使用easy构建框架:href加载其它页面

加载的HTML页面只加载body中的内容;如果无HTML结构,则全部加载。因此推荐将加载页面去掉HTML结构。

加载JSP时,可以将JSP代码正常加入。

参考:

http://zhidao.baidu.com/link?url=TSl4cd-EofsVQKFqJvp7mGm3GO6mJaX6SnTjkTXeuLhkLHIfv3mutoF8qcgjk_RG29t8fGaETYx3u7u_vfphBK

4.4 图标iconCls:指定icon的class属性

所有的icon的class属性在themes\icon.css文件中指定。图标文件在themes\icons目录中。

参考:

http://zhidao.baidu.com/link?url=DMWiUGzMLbNkPDL33We0FzX27jpFdNqvb4dqYOafiV3rNDGQDP-A_ph-JKllkvDcgi2lC_g7x_PGRjXgKtIOuECAatWPXaJk13tzw44Ts7i

//icons目录

//icons.css

.icon-blank{

      background:url('icons/blank.gif') no-repeat center center;

}

.icon-add{

      background:url('icons/edit_add.png') no-repeat center center;

}

.icon-edit{

      background:url('icons/pencil.png') no-repeat center center;

}

.icon-clear{

      background:url('icons/clear.png') no-repeat center center;

}

.icon-remove{

      background:url('icons/edit_remove.png') no-repeat centercenter;

}

.icon-save{

      background:url('icons/filesave.png') no-repeat center center;

}

.icon-cut{

      background:url('icons/cut.png') no-repeat center center;

}

.icon-ok{

      background:url('icons/ok.png') no-repeat center center;

}

.icon-no{

      background:url('icons/no.png') no-repeat center center;

}

.icon-cancel{

      background:url('icons/cancel.png') no-repeat center center;

}

.icon-reload{

      background:url('icons/reload.png') no-repeat center center;

}

.icon-search{

      background:url('icons/search.png') no-repeat center center;

}

.icon-print{

      background:url('icons/print.png') no-repeat center center;

}

.icon-help{

      background:url('icons/help.png') no-repeat center center;

}

.icon-undo{

      background:url('icons/undo.png') no-repeat center center;

}

.icon-redo{

      background:url('icons/redo.png') no-repeat center center;

}

.icon-back{

      background:url('icons/back.png') no-repeat center center;

}

.icon-sum{

      background:url('icons/sum.png') no-repeat center center;

}

.icon-tip{

      background:url('icons/tip.png') no-repeat center center;

}

.icon-filter{

      background:url('icons/filter.png') no-repeat center center;

}

.icon-man{

      background:url('icons/man.png') no-repeat center center;

}

.icon-lock{

      background:url('icons/lock.png') no-repeat center center;

}

.icon-more{

      background:url('icons/more.png') no-repeat center center;

}

 

 

.icon-mini-add{

      background:url('icons/mini_add.png') no-repeat center center;

}

.icon-mini-edit{

      background:url('icons/mini_edit.png') no-repeat center center;

}

.icon-mini-refresh{

      background:url('icons/mini_refresh.png') no-repeat centercenter;

}

 

.icon-large-picture{

      background:url('icons/large_picture.png') no-repeat centercenter;

}

.icon-large-clipart{

      background:url('icons/large_clipart.png') no-repeat centercenter;

}

.icon-large-shapes{

      background:url('icons/large_shapes.png') no-repeat centercenter;

}

.icon-large-smartart{

      background:url('icons/large_smartart.png') no-repeat centercenter;

}

.icon-large-chart{

      background:url('icons/large_chart.png') no-repeat centercenter;

}

4.5 示例:动态加载jsp页面(包含高德地图js)。

//home.html

<!doctypehtml>

<html>

<head>

<metacontent="text/html; charset=utf-8" />

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

<linkrel="stylesheet" type="text/css"href="css/home.css" />

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

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

<scripttype="text/javascript" src="easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>

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

<title>thbd</title>

</head>

 <body>

       <divid="header">

      <div id="header-left">

           <img src="icons_thbd/thbd.png"alt="thbd">

      </div>

    <div id="header-center">

      <divid="cljk" class="menuBlock">

             <divid="cljk_png" class="menuPNG"style="'background-color:rgb(18,138,222)'">

                  <imgsrc="icons_thbd/topicon0.png" alt="thbd"><br>

                  <spanstyle="color:#FFF">车辆监控</span>

             </div>

      </div>

        

        <div id="yytj"class="menuBlock">

                  <divclass="menuPNG">

                  <imgsrc="icons_thbd/topicon1.png" alt="thbd"><br>

                  <spanstyle="color:#FFF">运营统计</span>

             </div>

            <div class="menuItem"style="display:none;">

              <divid="arrow"></div>

              <div>

                    <ul class="menuBack">

                    <li class="menu_li"><a href="">用户管理</a></li>

                        <liclass="menu_li"><a href="">行驶记录仪</a></li>

                        <liclass="menu_li"><a href="">轨迹回放</a></li>

                        <liclass="menu_li"><a href="">运营违规统计</a></li>

                        <liclass="menu_li"><a href="">行驶里程统计</a></li>

                        <liclass="menu_li"><a href="">车辆上线率统计</a></li>

                        <liclass="menu_li"><a href="">车辆上下线统计</a></li>

                        <liclass="menu_li"><a href="">车辆不在线统计</a></li>

                        <liclass="menu_li"><a href="">危险驾驶统计</a></li>

                        <liclass="menu_li"><a href="">油耗统计</a></li>

                        <liclass="menu_li"><a href="">设备状态查询</a></li>

                        <liclass="menu_li"><a href="">终端属性查询</a></li>

                       </ul>

                </div>

            </div>

        </div>

        

        <div id="yygl"class="menuBlock">

                  <divclass="menuPNG">

                  <imgsrc="icons_thbd/topicon2.png" alt="thbd"><br>

                  <spanstyle="color:#FFF">运营管理</span>

             </div>

            <div class="menuItem"style="display:none;">

              <divid="arrow"></div>

              <div>

                    <ul class="menuBack">

                    <li class="menu_li"><a href="">操作日志查询</a></li>

                        <liclass="menu_li"><a href="">调度信息查询</a></li>

                        <liclass="menu_li"><a href="">多媒体查询</a></li>

                        <liclass="menu_li"><a href="">车辆上下线查询</a></li>

                        <liclass="menu_li"><a href="">用户在线情况查询</a></li>

                        <liclass="menu_li"><a href="">车辆在线查询</a></li>

                        <liclass="menu_li"><a href="">电子运单查询</a></li>

                        <liclass="menu_li"><a href="">提问消息查询</a></li>

                        <liclass="menu_li"><a href="">信息点播</a></li>

                        <liclass="menu_li"><a href="">区域协查</a></li>

                        <liclass="menu_li"><a href="">数据透传</a></li>

                  </ul>

                </div>

            </div>

        </div>

           <div id="ywzc"class="menuBlock">

                  <divclass="menuPNG">

                  <imgsrc="icons_thbd/topicon3.png" alt="thbd"><br>

                  <spanstyle="color:#FFF">业务支撑</span>

             </div>

            <div class="menuItem"style="display:none;">

              <divid="arrow"></div>

              <div>

                    <ul class="menuBack">

                    <li class="menu_li"><a href="">快速开户</a></li>

                        <liclass="menu_li"><a href="">组织管理</a></li>

                        <liclass="menu_li"><a href="">车辆管理</a></li>

                        <liclass="menu_li"><a href="">终端管理</a></li>

                        <liclass="menu_li"><a href="">SIM卡管理</a></li>

                        <liclass="menu_li"><a href="">驾驶员管理</a></li>

                        <liclass="menu_li"><a href="">驾驶员IC卡管理</a></li>

                        <liclass="menu_li"><a href="">终端参数设置</a></li>

                        <liclass="menu_li"><a href="">用户管理</a></li>

                        <liclass="menu_li"><a href="">权限管理</a></li>

                        <liclass="menu_li"><a href="">线路&amp;围栏管理</a></li>

                        <liclass="menu_li"><a href="">触发拍照设置</a></li>

                        <liclass="menu_li"><a href="">电话本设置</a></li>

                        <liclass="menu_li"><a href="">事件设置</a></li>

                  </ul>

                </div>

            </div>

        </div>

        <div id="jgff"class="menuBlock">

                  <divclass="menuPNG">

                  <imgsrc="icons_thbd/topicon5.png" alt="thbd"><br>

                  <spanstyle="color:#FFF">监管服务</span>

             </div>

            <div class="menuItem"style="display:none;">

              <divid="arrow"></div>

              <div>

                    <ul class="menuBack">

                    <li class="menu_li"><a href="">链路管理</a></li>

                        <liclass="menu_li"><a href="">定位数据补传</a></li>

                        <liclass="menu_li"><a href="">定位信息交换</a></li>

                        <liclass="menu_li"><a href="">下级平台上报</a></li>

                        <liclass="menu_li"><a href="">上级请求-自动应答</a></li>

                        <liclass="menu_li"><a href="">上级请求-人工应答</a></li>

                        <liclass="menu_li"><a href="">上级请求-无需应答</a></li>

                  </ul>

                </div>

            </div>

     </div>

        <div id="xtgl"class="menuBlock">

                  <divclass="menuPNG">

                  <imgsrc="icons_thbd/topicon4.png" alt="thbd"><br>

                  <spanstyle="color:#FFF">系统管理</span>

             </div>

        </div>

    </div>

    <divid="header-right">    

      <labelid="time"></label>

    </div>

</div>

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

      <div id="west_area" data-options="region:'west',split:true,title:'West'"style="position:relative;"> </div>

      <div id="south_area"data-options="region:'south',border:false"style="height:100px;background:#A9FACD;padding:10px;">southregion</div>

      <divid="center_area" data-options="region:'center',title:'Center',href:'amap2.jsp'"></div>

</div>

</body>

</html>

//amap2.jsp

<%-- jsp --%>

<%@ pagecontentType="text/html;charset=GBK" language="java"errorPage="" %>

<%!

//add a member

public int count;

public String info(){

      return "this is background info.";

}

%>

<%-- html--%>

<styletype="text/css">

      #map { height:100%;width:100%; }

</style>

<div id="map"data-options="region:'center',title:'Center',href:'amap2.jsp'"></div>

<%-- javascript --%>

<scripttype="text/javascript">

$(document).ready(function(){

      //dynamic load baidu map js lib

      $.getScript("http://webapi.amap.com/maps?v=1.3&key=416a43c96936f23269f63b3148a84ab9",function(data, status, jqxhr) {

           mapInit();

      });

      //map function

      var mapObj;

      function mapInit()

      {

           //create map

           var opt = {

           level:13,//level

           center:new AMap.LngLat(116.397428,39.90923),//center point   

           doubleClickZoom:true,//zoom when double click

           scrollWheel:true//zoom when scroll wheel

           }

           mapObj = new AMap.Map("map",opt);

           //predefined plugin

           mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function(){

                 var t=new AMap.ToolBar(mapObj);

                 mapObj.addControl(t);

                 var o=new AMap.OverView({isOpen:false});//true:openoverview when init

                 mapObj.addControl(o);

                 var s=new AMap.Scale();

                 mapObj.addControl(s);

           });

           //add car marker

           var car=new AMap.Marker({

                 id:"test01",

                 position:new AMap.LngLat(116.397428,39.90923),

                 icon:"images/car.png",

                 map:mapObj

           });

           AMap.event.addListener(car,"click",carClick);

           var car2=new AMap.Marker({

                 id:"test02",

                 position:new AMap.LngLat(116.387428,39.90823),

                 icon:"images/car2.png",

                 map:mapObj

           });

           AMap.event.addListener(car2,"click",carClick);

           //add marker cluster

           var carArray=[car,car2];

           varcarClustererStyles=[{url:"images/m1.png",size:newAMap.Size(53,52),offset:newAMap.Pixel(0,-26)},{url:"images/m2.png",size:new AMap.Size(56,55)}];

           mapObj.plugin(["AMap.MarkerClusterer"],function(){

                 var carClusterer=newAMap.MarkerClusterer(mapObj,carArray,{styles:carClustererStyles,averageCenter:true});

           });

      }

      function carClick(e){

           //$.get(url,data,callback),use ajax to get background data

           console.debug("click="+e.lnglat+","+e.pixel+","+e.type+e.target);

           var info="<%=info()%>";

           var infoWin=createInfoWindow(info);

           infoWin.open(mapObj,e.lnglat);

      }

      function createInfoWindow(strInfo){

           var infoWin=new AMap.InfoWindow({

                 content:"<h1>this isinfoWindow</h1><p>"+strInfo+"</p>"

           });

           return infoWin;

      }

});

</script>

5 方法:控件

5.1 布局:整体布局eaayui-layout,面板eaysui-panel

5.1.1整体布局easyui-layout:页面切分,整个界面的划分。

5.1.1.1  目标:将整个页面划分为不同的区域,整体控制。

5.1.1.2  原理:整体div划分为不同的区域,每个区域指定大小。

5.1.1.3  流程:设置easyui-layout目标div,指定每个分区域div。

注意:必须设置HTML的DOCTPYE版本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

示例:分区域

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">

 

<html>

<head>

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

      <link href="easyUI/themes/icon.css"rel="stylesheet" />

      <link href="easyUI/themes/color.css"rel="stylesheet" />

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

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

      <title>easyUI Test</title>

</head>

 

<body>

      <divclass="easyui-layout" style="height:100%;width:100%">

           <divdata-options="region:'north',title:'north title',split:true"style="height:20%">north</div>

           <divdata-options="region:'south',title:'south title',split:true"style="height:200px">south</div>

           <divdata-options="region:'east',title:'east title',split:true"style="width:100px">east</div>

           <divdata-options="region:'west',title:'west title',split:true"style="width:100px">west</div>

           <divdata-options="region:'center',title:'center title'" >

                 <divclass="test">this is center</div>

           </div>

      </div>

      <script type="text/javascript">

      </script>

</body>

</html>

5.1.1.4  方法:使用easyui-layout设置目标区域,然后在其中设置分区域。

设置整体div:class="easyui-layout"

分区域region:north,south,west,east,center(必须):data-options="region:'north'"。

标题:title。

可以推拉分割split: data-options="split:true"。

指定页面href: data-options="href:'plugin.htm'"。

折叠按钮:collapsible。

折叠:collapse,注意,所有的方法都是仅对layout控件起作用,其分区域是panel。

更多属性和方法参见API。

5.1.1.5  示例:分区域,并在不同的区域中加载指定页面。

//easyUI.htm

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

 

<html>

<head>

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

      <link href="easyUI/themes/icon.css"rel="stylesheet" />

      <link href="easyUI/themes/color.css"rel="stylesheet" />

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

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

      <title>easyUI Test</title>

</head>

 

<body>

      <div class="easyui-layout"style="height:100%;width:100%">

           <div data-options="region:'north',title:'northtitle',split:true" style="height:20%">north</div>

           <div data-options="region:'south',title:'southtitle',split:true" style="height:200px">south</div>

           <div data-options="region:'east',title:'easttitle',split:true" style="width:100px">east</div>

           <div data-options="region:'west',title:'westtitle',split:true" style="width:100px">west</div>

           <divdata-options="region:'center',title:'center title',href:'plugin.htm'">

                 <div class="test">this iscenter</div>

           </div>

      </div>

      <script type="text/javascript">

      </script>

</body>

</html>

//plugin.htm

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

 

<html>

<head>

      <title>Untitled</title>

</head>

 

<body>

 

Hello World!

<h2>This is a pluginHTML.</h2>

 

</body>

</html>

5.1.2面板:easyui-panel,基本容器,模拟基本窗口。

<div id='panel'class='easyui-panel' title='mypanel' data-options="closable:true,   

               collapsible:true,minimizable:true,maximizable:true">

           this is panel.

           <p>panel content</p>

      </div>

 

 

5.1.2.1  使用面板居中显示:data-options="style:{margin:'0 auto'}"

参考:http://www.jeasyui.com/forum/index.php?topic=2054.0

http://stackoverflow.com/questions/2392563/what-is-the-difference-between-using-aligncenter-and-margin-0-auto-to-cent

 

      <div class="easyui-panel" data-options="style:{margin:'0 auto'}"style="width:600px;">

           <table id="pg"class="easyui-propertygrid" style="width:536px;"></table>

      </div>

5.1.3选项卡:easyui-tabs,带工具条的选项卡。

方法:定义div为easyui-tabs,子div为tab。

选项卡标题位置:tabPostion:’left’、’top’,’bottom’,’right’。

选项卡的大小:tabWidth,tabHeight。

工具条:设置工具条的内容,在tabs中指定tools为工具条的#id。

参考:http://www.jeasyui.net/demo/561.html

示例:工具条设置

      <divid='tabs' class='easyui-tabs' title='mypanel' style="width:100%" data-options="closable:true">

           <div title="Tab1">this is tab1</div>

           <div title="Tab2">this is tab2</div>

      </div>

      <div id="tab-tools">

           <a href="#"class="easyui-linkbutton" plain="true"iconCls="icon-add"></a>

           <a href="#"class="easyui-linkbutton" plain="true"iconCls="icon-save"></a>

      </div>

      <script type="text/javascript">

           $(document).ready(function(){

                 console.debug("debug");

                 $('#tabs').tabs({

                      tools:'#tab-tools'

                 });             

           });

      </script> 

 

示例:左侧tab

//easyUITest.html

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN"

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<link rel="stylesheet"type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <div class="easyui-tabs" style="width: 100%;height: 930px;" data-options="tabPosition:'left',tabHeight:100">

           <div title="参数设置"data-options="closable:false,href:'/thbd/pages/xtgl/cssz.html'"style="overflow:auto;text-align:center;">tab1</div>

           <div title="报警设置"data-options="closable:false,href:'/thbd/pages/xtgl/bjsz.html'"style="overflow:auto;">tab2</div>

           <div title="其它设置"data-options="closable:false,href:'/thbd/pages/xtgl/qtsz.html'"style="overflow:auto;">tab2</div>

      </div>

      <script type="text/javascript">

           $(document).ready(function() {

 

           });

      </script>

 

</body>

</html>

5.1.4分类卡:easyui-accordin,折叠选项卡。

      <div id='acc' class='easyui-accordion'title='myaccordion' style="width:100%"

      data-options="iconCls:'icon-save'">

           <div title="acc1">this is acc1</div>

           <div title="acc2">this is acc2</div>

      </div>

5.2 窗体和对话框:各种对话框,窗体等。

5.2.1窗体:easyui-window,模拟窗体,可移动等。

      <div id='win' class='easyui-window' title='my win'  style="width:300px;height:100px"

      data-options="iconCls:'icon-save'">

           all contents here.

      </div>

5.2.2对话框:easyui-dialog,带工具栏和按钮的对话框。

      <div id='dlg' class='easyui-dialog' title='my dialog'  style="width:300px;height:150px"

      data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:[{

                 text:'tb1',

                 iconCls:'icon-edit',

                 handler:function(){

                      console.debug('tb1=click.');

                 }

           },{

                 text:'tb2',

                 iconCls:'icon-help',

                 handler:function(){

                      console.debug('tb2=click.');

                 }

           }],

           buttons:[{

                 text:'btn1',

                 handler:function(){

                      console.debug('button1=click.');

                 }

           },{

                 text:'btn2',

                 handler:function(){

                       console.debug('button2=click.');

                 }

           }]

           ">

           all contents here.

      </div>

5.2.3消息对话框:$.messager,各种消息对话框,目标是与用户进行交互。

通知消息:$.messager.show。

警告:$.messager.alert。

确认:$.messager.conform。

信息输入:$.message.prompt。

进度:$.messager.progress。

示例:点击显示消息框,2秒后淡出。

      <input type='button' value='collapse' id='cp' />

      <script type="text/javascript">

           $(document).ready(function(){

                 console.debug("debug");

                 $('#cp').click(function(){

                      $.messager.show({

                            title:"my show",

                            msg:"this is show messager",

                            timeout:2000,

                            showType:"fade"

                      })

                 });

           });

      </script> 

5.2.4表单:$(‘’).form,ajax提交表单。

5.2.5打开文件:easyui-filebox。

5.3 常用控件:按钮、输入框、下拉框。

5.3.1按钮:easyui-linkbutton,按钮,包括普通按钮,超链接按钮,checkbox,radiobox。

5.3.1.1  按钮:使用超链接按钮easyui-linkbutton,能够使用图标或文字。

只能有一个按钮能够选中:group。

按下和弹起两种状态:toggle。

      <a class="easyui-linkbutton"href="plugin.htm">linkbutton</a>

      <a class="easyui-linkbutton"href="#">bun</a>    

      <aclass="easyui-linkbutton" href="#"data-options="toggle:true">check</a><!--checkbox-->

      <aclass="easyui-linkbutton" href="#" data-options="group:'r',toggle:true">r1</a><!--radiobox-->

      <aclass="easyui-linkbutton" href="#"data-options="group:'r',toggle:true">r2</a>

      <input type='button' value='collapse' id='cp' />

 

                 <a class="easyui-linkbutton"

                      style="width: 80%; height: 40px; margin-top:10px; margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">参数设置</a><br/>

                 <a class="easyui-linkbutton"

                      style="width: 80%; height: 40px;margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">报警设置</a><br/>

                 <a class="easyui-linkbutton"

                      style="width: 80%; height: 40px;margin-bottom: 10px;" data-options="toggle:true,group:'cssz'">其它设置</a><br/>

5.3.1.2  checkbox:easyui中无此控件,使用标准控件。

获取状态:$(“input:checkbox:[key=value]:状态。

参考:http://www.poluoluo.com/jzxy/201402/261608.html

示例:

//easyuiTest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<script type="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <inputtype="checkbox" name="ck" value="1" />a

      <inputtype="checkbox" name="ck" value="2" />b

      <inputtype="checkbox" name="ck2" value="3" />c

      <inputtype="checkbox" name="ck2" value="4" />d

      <script type="text/javascript">

           $(document).ready(function() {

                 console.debug("ready");

                 $("input:checkbox[name='ck']").click(function(e){

                      var ck = $("input:checkbox[name='ck']:checked").val();

                      console.debug(ck);

                 });

           })

      </script>

</body>

</html>

5.3.2用户输入框:文本框等用于输入的控件

5.3.2.1  验证框:easyui-validbox,验证用户输入。

 

5.3.2.2  文本框:easyui-textbox,用户输入框。

可以指定带有按钮。

<inputclass="easyui-textbox" data-options="iconCls:'icon-search'"style="width:100px"></input>

5.3.2.3  数值框:easyui-numberbox,用户输入数字。

5.3.2.4  日期框:easyui-datebox。

5.3.2.5  日期时间框:easyui-datetimebox。

使用input创建。

<inputclass="easyui-datetimebox" data-options=""style="width:150px;"/>

5.3.2.6  日历:easyui-calendar。

5.3.2.7  微调框:easyui-spinner。

5.3.2.8  日期时间微调框:easyui-datetimespinner。

5.3.2.9  时间微调框:easyui-timespinner。

5.3.2.10 数值微调框:easyui-numberspinner。

5.3.3下拉框

5.3.3.1  自定义下拉框:$(‘’).combo(),不能通过标签创建。

5.3.3.2  列表下拉框:easyui-combobox。

静态创建:select填充。

动态创建:input 指定JSON文件的URL。

JSON格式:数组,每个item包含id和text属性。id表示item编号,text为显示内容。

示例:

//html

<input class="easyui-combobox"

                                                  style="width:150px"

                                                   data-options="validFild:'id',textField:'text',url:'/thbd/pages/BusinessStatistics/datatype.json'"/>

//datetype.json

[

      {"id":1,"text":"事故疑点信息"},

      {"id":2,"text":"指定行驶速度"},

      {"id":3,"text":"累计行驶里程"},

      {"id":4,"text":"疲劳驾驶信息"},   

      {"id":5,"text":"车辆基本信息"},   

      {"id":6,"text":"驾驶员信息"},

      {"id":7,"text":"记录仪脉冲系数"},

      {"id":8,"text":"记录仪时间"}

]

5.3.3.3  树形下拉框:easyui-combotree。

5.3.3.4  数据表格下拉框:easyui-combogrid。

 

5.4 菜单、工具栏:各种格式的菜单和工具栏。

5.4.1菜单:easyui-menu,菜单,包括多级菜单。

菜单创建后是隐藏的,需要显示的调用显示函数使其显示出来。或者将菜单指定为按钮的菜单属性,从而在鼠标移动到按钮时显示菜单项,实现类似菜单的效果(推荐,参见菜单按钮:easyui-menubutoon,模拟菜单栏。)。

示例:自定义显示菜单

      <div id='mm' class='easyui-menu' style='width:300px;'>

           <div data-options="iconCls:'icon-save'">menu0</div>

           <divdata-options="href:'plugin.htm'">menu1

                 <div>

                      <div>menu1.0</div>

                      <div>menu1.1</div>

                 </div>

           </div>

      </div>

      <script type="text/javascript">

           $(document).ready(function(){

                 console.debug("debug");

                 $('#mm').menu('show',{

                      left:200,

                      top:100

                 });

                 $('#mm').click(

                      function(item){

                            console.debug(item.target.innerText);

                      }

                 );

           });

      </script>

5.4.2菜单按钮:easyui-menubutoon,模拟菜单栏。

鼠标移动到按钮的时显示菜单项。

      <a class="easyui-menubutton"href="javascript:void(0)" data-options="menu:'#mm'">menu</a>

      <div id='mm' class='easyui-menu' style='width:200px;'>

           <divdata-options="iconCls:'icon-save'">menu0</div>

           <divdata-options="href:'plugin.htm'">menu1

                 <div>

                      <div>menu1.0</div>

                      <div>menu1.1</div>

                 </div>

           </div>

      </div>

5.4.3菜单分区按钮:easyui-menubutoon,模拟菜单栏。

鼠标移动到按钮的下拉箭头时才显示菜单项,如果移动到文本上不显示菜单项(菜单分为不同的功能区域)。

      <a class="easyui-splitbutton"href="javascript:void(0)"data-options="menu:'#mm'">menu</a>

      <div id='mm' class='easyui-menu' style='width:200px;'>

           <div data-options="iconCls:'icon-save'">menu0</div>

           <divdata-options="href:'plugin.htm'">menu1

                 <div>

                      <div>menu1.0</div>

                      <div>menu1.1</div>

                 </div>

           </div>

      </div>

5.4.4分页导航栏:easyui-pagination,导航条,根据导航页数构建url并刷新显示。

使用div定义。

总数total:总数据量。

单页数量pageSize:每页的大小。

当前页面前后文本beforePageText,afterPageText:显示在当前页面文本框前后。

页面提示信息displayMsg:可以使用from,to,total变量。

示例:

      <div class="easyui-pagination"data-options="total:2000,pageSize:10,beforePageText:'before222xx',afterPageText:'afxxx1',displayMsg:'disp:x2x3:{from}-{to}={total}'"style=""></div>

 

5.4.5搜索框:easyui-searchbox,搜索框,根据用户输入的内容和查找的范围(menu菜单选择)调用查询函数searcher。

目标:根据不同的搜索级别,调用搜索函数搜索用户输入。

原理:设置input为搜索框,绑定一个div为搜索菜单,此菜单为div列表。

流程:设置搜索框,设置搜索菜单,绑定搜索菜单到搜索框。设置搜索函数。

方法:

设置搜索框:设置input的class为easyui-searchbox。

设置搜索菜单:一个div下的div列表。每个子div都需要设置name属性作为搜索范围。

绑定菜单:指定div的id为searchbox的menu属性。

设置搜索函数:设置searcher属性为一个funtion(value,name)。value是输入值,name是菜单的name属性。

示例:

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<link rel="stylesheet"type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <inputclass="easyui-searchbox"

           data-options="searcher:sc,prompt:'input name',menu:'#mm'"></input>

      <divid="mm">

           <div data-options="name:'all',iconCls:'icon-ok'">allnews</div>

           <divdata-options="name:'sports'">sp</div>

      </div>

      <script type="text/javascript">

           functionsc(value, name) {

                 console.debug(value);

                 console.debug(name);

           }

      </script>

</body>

</html>

5.4.6进度条:easyui-progressbar,进度条,根据进度值(百分数)显示进度。

5.4.7滑动条:easyui-slider。

5.5 树形列表:各种样式的树形列表及其数据操作。

5.5.1树形列表:easyui-tree。

目标:数据以树表列表展示,具有选中状态,折叠、拖拽、异步加载等功能。

原理:ul元素的扩展封装。

流程:创建tree控件,设置样式,设置数据。

方法:

创建tree控件:ul设置class为easyui-tree。

设置样式:整体样式使用ul的dataoptions,单项样式使用json的属性。

设置数据:使用json填充ul(推荐)或直接填充ul的标签。

示例:

//easyUITest.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<!-- easyUI library -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/default/easyui.css"/>

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/icon.css"/>

<!-- add defaulticons.@author:[email protected] @date:2015-9-23 14:19 -->

<linkrel="stylesheet" type="text/css"

      href="easyui/jquery-easyui-1.4.3/themes/color.css"/>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<scripttype="text/javascript"

      src="easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

<title>This is a testpage for easyUI</title>

</head>

<body>

      <ulid="tt" class="easyui-tree"data-options="checkbox:true,url:'/thbd/pages/BusinessStatistics/tree.json'">

      </ul>

</body>

</html>

//tree.json

[{

      "id":"tt",

      "text":"Root",

      "children":[{

           "text":"1.1"

      },{

           "text":"1.2",

           "state":"closed",

           "children":[{

                 "text":"1.2.1",

                 "checked":true

           },

           {

                 "text":"1.2.2"

           },

           {

                 "text":"1.2.3"

           }]

      }]

}]

5.5.2树形数据列表:easyui-treegrid

5.6 数据表格:各种样式的数据表格及样式、数据操作。

5.6.1数据表格:datagrid。

参见:easyUI-数据表格datagrid.docx

5.6.2属性表格:easyui-propertygrid,datagrid的派生类。

参见:easyUI-数据表格datagrid.docx属性表格部分

6 附件:API文档

API:

7 方法:基本功能

7.1 解析easyUI:$.parse.parse(【’#cc’】)。

7.2 设置easyUI路径:easyloader.base=目录。

7.3 加载easyUI模块:easyloader.loader(‘name’,callbackfun);

7.4 加载脚本:using(‘脚本路径’,callbackfun);

8 方法:基本控件

8.1 可拖动控件:easyui-draggable。

8.2 可放置区域:easyui-droppable。

8.3 可调整大小控件:easyui-resizable。

8.4 鼠标提示控件:easyui-tooltip。

9 方法:扩展功能

包括Ribbon,可编辑的树、表格等。

你可能感兴趣的:(JavaScript,js,jquery,UI,easyui)