jQuery---EasyUI小案列

時間 2019-11-06

標籤 jquery easyui 欄目 JQuery 简体版

原文原文鏈接

jQuery EasyUI爲提供了大多數UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基於JQuery的一個前臺ui界面的插件，功能相對沒extjs強大，但頁面也是至關好看的，同時頁面支持各類themes以知足使用者對於頁面不一樣風格的喜愛。一些功能也足夠開發者使用，相對於extjs更輕量。

jQuery EasyUI有如下特色：

一、基於jquery用戶界面插件的集合

二、爲一些當前用於交互的js應用提供必要的功能

三、EasyUI支持兩種渲染方式分別爲javascript方式（如：$('#p').panel({...})）和html標記方式（如：class="easyui-panel"）

四、支持HTML5（經過data-options屬性）

五、開發產品時可節省時間和資源

六、簡單，但很強大

七、支持擴展，可根據本身的需求擴展控件

八、目前各項不足正以版本遞增的方式不斷完善

以上來源百度百科

下面介紹下比較經常使用的插件：

分頁[pagination]

實例：javascript

<html>
<head>
    <meta charset="GBK">
    <title>客戶端分頁demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>客戶端分頁dem</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div></div>
    </div>
    <div style="margin:10px 0;"></div>
 
    <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:10">
        <thead>
            <tr>
                <th field="inv" width="80">Inv No</th>
                <th field="date" width="100">Date</th>
                <th field="name" width="80">Name</th>
                <th field="amount" width="80" align="right">Amount</th>
                <th field="price" width="80" align="right">Price</th>
                <th field="cost" width="100" align="right">Cost</th>
                <th field="note" width="110">Note</th>
            </tr>
        </thead>
    </table>
    <script>
 
        function getData(){//模擬數據
            var rows = [];
            for(var i=1; i<=80000; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            //console.log(JSON.stringify(rows));
            return rows;
 
        }
 
        function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判斷數據是不是數組
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }
 
        $(function(){//加載數據
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
        });
    </script>
</body>
</html>

效果圖：

進度條[progressbar]

<html>
<head>
    <meta charset="GBK">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

	<script>
		function test(){
			var value = $('#p').progressbar('getValue');
			if (value < 100){
				value += Math.floor(Math.random() * 10);
				$('#p').progressbar('setValue', value);
				setTimeout(arguments.callee, 200);
			}
		}
	</script>
</head>
<body>
	進度條
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Click below button to show progress information.</div>
	</div>
	
	<div style="margin: 10px 0">
		<a href="#" class="easyui-linkbutton" onclick="test()">Test</a>
	</div>
	
	<div id="p" class="easyui-progressbar" style="width:400px;"></div>
</body>
</html>

樹形菜單[tree]

<html>
<head>
    <meta charset="GBK">
    <title>客戶端分頁demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
        .menuLink {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
         
$(function () {
    //動態菜單數據
    var treeData = [{
            text : "菜單",
            children : [{
                    text : "一級菜單1",
                    attributes : {
                        url : ""
                    }
                }, {
                    text : "一級菜單2",
                    attributes : {
                        url : ""
                    }
                }, {
                    text : "一級菜單3",
                    state : "closed",
                    children : [{
                            text : "二級菜單1",
                            attributes : {
                                url : ""
                            }
                        }, {
                            text : "二級菜單2",
                            attributes : {
                                url : ""
                            }
                        }, {
                            text : "二級菜單3",
                            attributes : {
                                url : ""
                            }
                        }
                    ]
                }
            ]
        }
    ];
    
    //實例化樹形菜單
    $("#tree").tree({
        data : treeData,
        lines : true,
        onClick : function (node) {
            if (node.attributes) {
                Open(node.text, node.attributes.url);
            }
        }
    });
    //在右邊center區域打開菜單，新增tab
    function Open(text, url) {
        if ($("#tabs").tabs('exists', text)) {
            $('#tabs').tabs('select', text);
        } else {
            $('#tabs').tabs('add', {
                title : text,
                closable : true,
                content : text
            });
        }
    }
    
    //綁定tabs的右鍵菜單
    $("#tabs").tabs({
        onContextMenu : function (e, title) {
            e.preventDefault();
            $('#tabsMenu').menu('show', {
                left : e.pageX,
                top : e.pageY
            }).data("tabTitle", title);
        }
    });
    
    //實例化menu的onClick事件
    $("#tabsMenu").menu({
        onClick : function (item) {
            CloseTab(this, item.name);
        }
    });
    
    //幾個關閉事件的實現
    function CloseTab(menu, type) {
        var curTabTitle = $(menu).data("tabTitle");
        var tabs = $("#tabs");
        
        if (type === "close") {
            tabs.tabs("close", curTabTitle);
            return;
        }
        
        var allTabs = tabs.tabs("tabs");
        var closeTabsTitle = [];
        
        $.each(allTabs, function () {
            var opt = $(this).panel("options");
            if (opt.closable && opt.title != curTabTitle && type === "Other") {
                closeTabsTitle.push(opt.title);
            } else if (opt.closable && type === "All") {
                closeTabsTitle.push(opt.title);
            }
        });
        
        for (var i = 0; i < closeTabsTitle.length; i++) {
            tabs.tabs("close", closeTabsTitle[i]);
        }
    }
});
</script>
</head>
<body class="easyui-layout">
   <style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .west{
    width:200px;
    padding:10px;
  }
  .north{
    height:100px;
  }
</style>
</head>
<body class="easyui-layout">
  <div region="north" class="north" title="">
    <h1>最簡單的左右結構實現，及tab的右鍵菜單實現，右鍵查看源碼</h1>
  </div>
  <div region="center" title="center">
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
      <div title="首頁"></div>
    </div>
  </div>
  <div region="west" class="west" title="menu">
    <ul id="tree"></ul>
  </div>
  
  <div id="tabsMenu" class="easyui-menu" style="width:120px;">  
    <div name="close">關閉</div>  
    <div name="Other">關閉其餘</div>  
    <div name="All">關閉全部</div>
  </div>  
</body>
</html>

　　效果圖css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。