jquery easyUi簡單介紹

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

復制其代碼

然后除了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就實現了