jquery easyui 下稱(ui)適合一個網站后臺的快速搭建,給我們開發人員節約了很多的時間,下面,對于操作,下面進行詳細的介紹下:

首先下載ui包,下載地址http://www.jeasyui.com/download/index.php選擇一個版本下載,當然不同版本存在差異,建議使用最新版本

然后可以開始我們的項目開發了

我們新建一個html頁面,將ui包解壓到本地硬盤,打開目錄,找到demo文件夾

找到demo下面的layout文件夾

打開full.html

這個是一個簡單的網頁布局,我們可以使用這個布局來對項目進行開發

將body的標簽替換成full.html內的body內容,然后引入項目jqury.js和jquery.easyui.min.js和locale/easyui-lang-zh_CN.js這些js文件

引入樣式,拷貝整個theme文件夾放入到網站項目目錄下面這時候,瀏覽網頁,就可以看到你所需要的效果了.

接著我們把logo圖片替換到north 區域

然后west區域我們用一個菜單樣式替換,找到demo文件夾下面的accordion/tools.html文件,查看其源代碼

<div class="easyui-accordion" style="width:500px;height:300px;"><div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"><h3 style="color:#0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;"><p>The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> </div><div title="DataGrid" style="padding:10px" data-options="selected:true,tools:[{iconCls:'icon-reload',handler:function(){$('#dg').datagrid('reload');}}]"><table id="dg" class="easyui-datagrid" data-options="url:'../accordion/datagrid_data1.json',fit:true,fitColumns:true,singleSelect:true"><thead><tr><th data-options="field:'itemid',width:80">Item ID</th><th data-options="field:'productid',width:100">Product ID</th><th data-options="field:'listprice',width:80,align:'right'">List Price</th><th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th><th data-options="field:'attr1',width:150">Attribute</th><th data-options="field:'status',width:50,align:'center'">Status</th></tr></thead></table></div></div>

這個是起類似的代碼,我們在里面添加菜單選項:

將其替換成這些代碼,當然我沒有實現樣式,需要的話可以自己實現

<div data-options="region:'west',split:true,title:'菜單導航'"style="width: 150px;"><div class="easyui-accordion" data-options="border:false" style="width: 150px;"><div title="系統設置" data-options="iconCls:'icon-ok'"style="overflow: auto;" ><ul><li><a href="#" class="meunlink" url="userinfo.jsp">用戶管理</a></li><li><a href="#" class="meunlink" url="temp.jsp">菜單管理</a></li><li><a href="#" class="meunlink" url="temp.jsp">權限管理</a></li></ul></div><div title="系統設置" data-options="iconCls:'icon-ok'"style="overflow: auto;" ><ul><li><a href="#" class="meunlink" url="temp.jsp">用戶管理</a></li><li><a href="#" class="meunlink" url="temp.jsp">菜單管理</a></li><li><a href="#" class="meunlink" url="temp.jsp">權限管理</a></li></ul></div></div></div>

主區域我們實現的是一個類似tab標簽的效果

在demo文件夾上我們找到/tabs/tabposition.html

復制其代碼

View Code

然后除了div id=tt這個div標簽,刪除全部標簽,在js內初始化

$("#tt").tabs({ border:false});

接著我們在要實現的是點擊菜單選項彈出一個tab標簽到主區域:

這個時候我們查看api文檔,具體的api文檔純英文的,看不懂,推薦

http://www.cnblogs.com/Philoo/archive/2011/09/28/jeasyui_api_documentation.html

這邊就很詳細了.

這樣我就直接貼上我的代碼,如果看不懂,可以回帖,我會回復的

實現點擊內彈出tab的代碼

function bindMeunClick(){$(".meunlink").click(function(){var title=$(this).text();var isExist=$("#tt").tabs('exists',title);var href=$(this).attr("url");if(isExist){$("#tt").tabs('select',title);}else{$('#tt').tabs('add',{ title:title, content:getContentUrl(href), closable:true});}return false; });}function getContentUrl(url){return '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';}

這樣一個簡單demo就實現了

轉載于:https://www.cnblogs.com/huangyaxu/archive/2013/01/30/2882868.html

總結

以上是生活随笔為你收集整理的jquery easyUi简单介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。