JQueryjquery极简教程前端开发宝典

EasyUI(1) -- 简介 & UI组件(layou

2017-06-27  本文已影响131人  奋斗的老王

EasyUI简介

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

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

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

    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
  
    <!-- 引入外部JS文件 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <div 
        id="p" 
        class="easyui-panel" 
        style="width:500px;height:200px;padding:10px;"   
        title="我的面板" 
        iconCls="icon-save" 
        collapsible="true">   
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
    </div>

EasyUI组件:

一)Layout布局
  1. 代码:
     <!-- 布局面板 -->
     <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',href:'/js-day05/06_image.html',collapsible:false" style="padding:5px;background:#eee;"></div>   
     </div>
  <body class="easyui-layout">
        <!-- 北 -->
        <div data-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>
  1. js调用:
<script type="text/javascript">
        //浏览器加载web页面时触发
        $(function(){
            //将北边面板折叠,字符串双引单引均可
            $('#cc').layout('collapse','north');
            //休息3秒
            window.setTimeout(function(){
                //将南边面板折叠,字符串双引单引均可
                $('#cc').layout('collapse','south');
            },"3000");
        });
    </script>
二)Accordion分类
  1. 代码:
        <!-- 容器 -->
        <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>
  1. js调用:
<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>
三)LinkButton链接按钮
  1. 代码:
        <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>
  1. js调用:
        <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>
四)Tabs选项卡
  1. 代码:
<!-- 容器面板 -->
        <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>
  1. js调用:
<script type="text/javascript">
            $(document).ready(function(){
                $("#tt").tabs("add",{
                    "title":"Tab4",
                    "content":"tab4",
                    "selected":false,
                    "closable":true
                });
            });
        </script>
<script type="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>
五)Pagination分页框
  1. 代码:
    <!-- 
        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>
  1. js调用:
    <script type="text/javascript">
        $("#pp").pagination({
            //pageNumber当前页号,例如1 
            //pageSize获取多少条记录,例如:5
            //以上二个参数,需要谁,就接收谁,不一定二个都同时出现,参数名可以任意
            "onSelectPage":function(pageNumber,pageSize){
                alert(pageNumber + ":" + pageSize);
            }
        });
    </script>
上一篇下一篇

猜你喜欢

热点阅读