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

1.1 layout布局

　　　　　　　　　　

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

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

　　　　　　　　　 

<!-- 容器 -->

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

几点属性：

增加一个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 按钮 

    <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 选项卡

    <!-- 容器面板 -->

    <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（分页）

<!--

        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>

该功能实现

<script type="text/javascript">

        $("#pp").pagination({

            //pageNumber当前页号，例如1

            //pageSize获取多少条记录，例如：5

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

            "onSelectPage":function(pageNumber,pageSize){

                alert(pageNumber + ":" + pageSize);

            }

        });

    </script>

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

（二）EasyUI 使用——常用组件的更多相关文章

  1. JQuery EasyUI的常用组件

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...

  2. EasyUI常用组件（基础）

    ---------------------------------------------------------------------------------------------------- ...

  3. Android常用组件

    UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...

  4. Android常用组件【转】

    UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...

  5. 第18讲- UI常用组件之EditText

    第18讲UI常用组件之EditText 三.文本输入框EditText EditTex类继承自TextView.EditText是接受用户输入信息的最重要控件.在html当中,相当于<input ...

  6. 第17讲- UI常用组件之ImageView图片浏览

    第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...

  7. SWT入门-常用组件的使用(转)

    转自:http://www.cnblogs.com/kentyshang/archive/2007/08/16/858367.html swt的常用组件button ,text ,combo,list ...

  8. Ionic 常用组件解析

    Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...

  9. Atitit easyui翻页组件与vue的集成解决方案attilax总结

    Atitit easyui翻页组件与vue的集成解决方案attilax总结 ===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\U ...

随机推荐

  1. codeforces 869C The Intriguing Obsession【组合数学+dp+第二类斯特林公式】

    C. The Intriguing Obsession time limit per test 1 second memory limit per test 256 megabytes input s ...

  2. Linux命令之groupadd

    groupadd [选项] 组 创建一个新的组.Groupadd命令使用命令行中指定的值加上系统默认值创建新的组账户.新组将根据需要输入系统. (1).选项 -f,--force 如果指定的组已经存在 ...

  3. [xsy2962]作业

    题意:$f_0=1-\dfrac1e,f_n=1-nf_{n-1}$,求$f_n(n\leq10000)$,保留四位小数 这题代码只有⑨行但是题解很神... 因为递推式中有乘法,所以直接按题目来推肯定 ...

  4. 【函数式权值分块】【分块】bzoj1901 Zju2112 Dynamic Rankings

    论某O(n*sqrt(n))的带修改区间k大值算法. 首先对序列分块,分成sqrt(n)块. 然后对权值分块,共维护sqrt(n)个权值分块,对于权值分块T[i],存储了序列分块的前i块的权值情况. ...

  5. Spring Boot企业微信点餐系统-第一章-课程介绍

    一.项目简介——技术要点 前端和后端: 后端主要技术: 微信接口技术 微信支付 微信扫码登录 微信模板消息推送 开发环境 但实际上我用的环境和这上面还是有点不一样,我服务器用的是win,到时候我会详细 ...

  6. Redis Exception: Exceeded timeout of 00:00:03

    Redis Exception: Exceeded timeout of 00:00:03 居然是 重启了网管, 把网络禁用重启就好了. 服 最终更新: 原来是架构湿      设置为每分钟只能读取6 ...

  7. 【记录一下】phpMyAdmin 4.5.0-beta1 发布，要求 PHP 5.5

    详情点击: [开源中国]http://www.oschina.net/news/65696/phpmyadmin-4-5-0-beta1 [phpMyAdmin]https://www.phpmyad ...

  8. 网络采集软件核心技术剖析系列（7）---如何使用C#语言搭建程序框架(经典Winform界面，顶部菜单栏，工具栏，左边树形列表，右边多Tab界面）

    一 本系列随笔概览及产生的背景 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅读爱好者的喜爱.同时也不乏一些技术爱好者咨询我,这个软件里面各种实用的功能是如何实现的. 该软件 ...

  9. 《VC++就业培训宝典之MFC视频教程》学习笔记

    开发环境:Win7 64位 + VS2013 第三章第二节视频 在Win32工程中学习MFC开发,编译问题: Building MFC application with /MD[d] (CRT dll ...

  10. ios View之间的切换 屏幕旋转

    6.3  View之间的切换 在上面的练习中我们通过移动组件的位置和调整组件的大小来处理横向与纵向的界面布局.但是在界面中有很多组件的时候,对每个组件都进行这样的操作确实是一个麻烦的事情.下面我们看看 ...