jquery easyui 下稱(ui)適合一個(gè)網(wǎng)站后臺(tái)的快速搭建,給我們開(kāi)發(fā)人員節(jié)約了很多的時(shí)間,下面,對(duì)于操作,下面進(jìn)行詳細(xì)的介紹下:

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

然后可以開(kāi)始我們的項(xiàng)目開(kāi)發(fā)了

我們新建一個(gè)html頁(yè)面,將ui包解壓到本地硬盤,打開(kāi)目錄,找到demo文件夾

找到demo下面的layout文件夾

打開(kāi)full.html

這個(gè)是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)布局,我們可以使用這個(gè)布局來(lái)對(duì)項(xiàng)目進(jìn)行開(kāi)發(fā)

將body的標(biāo)簽替換成full.html內(nèi)的body內(nèi)容,然后引入項(xiàng)目jqury.js和jquery.easyui.min.js和locale/easyui-lang-zh_CN.js這些js文件

引入樣式,拷貝整個(gè)theme文件夾放入到網(wǎng)站項(xiàng)目目錄下面這時(shí)候,瀏覽網(wǎng)頁(yè),就可以看到你所需要的效果了.

接著我們把logo圖片替換到north 區(qū)域

然后west區(qū)域我們用一個(gè)菜單樣式替換,找到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>

這個(gè)是起類似的代碼,我們?cè)诶锩嫣砑硬藛芜x項(xiàng):

將其替換成這些代碼,當(dāng)然我沒(méi)有實(shí)現(xiàn)樣式,需要的話可以自己實(shí)現(xiàn)

<div data-options="region:'west',split:true,title:'菜單導(dǎo)航'"style="width: 150px;"><div class="easyui-accordion" data-options="border:false" style="width: 150px;"><div title="系統(tǒng)設(shè)置" 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">權(quán)限管理</a></li></ul></div><div title="系統(tǒng)設(shè)置" 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">權(quán)限管理</a></li></ul></div></div></div>

主區(qū)域我們實(shí)現(xiàn)的是一個(gè)類似tab標(biāo)簽的效果

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

復(fù)制其代碼

View Code

然后除了div id=tt這個(gè)div標(biāo)簽,刪除全部標(biāo)簽,在js內(nèi)初始化

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

接著我們?cè)谝獙?shí)現(xiàn)的是點(diǎn)擊菜單選項(xiàng)彈出一個(gè)tab標(biāo)簽到主區(qū)域:

這個(gè)時(shí)候我們查看api文檔,具體的api文檔純英文的,看不懂,推薦

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

這邊就很詳細(xì)了.

這樣我就直接貼上我的代碼,如果看不懂,可以回帖,我會(huì)回復(fù)的

實(shí)現(xiàn)點(diǎn)擊內(nèi)彈出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>';}

這樣一個(gè)簡(jiǎn)單demo就實(shí)現(xiàn)了

轉(zhuǎn)載于:https://www.cnblogs.com/huangyaxu/archive/2013/01/30/2882868.html

總結(jié)

以上是生活随笔為你收集整理的jquery easyUi简单介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。