jQuery EasyUI致力于幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。jQuery EasyUI提供了基于當(dāng)下流行的jQuery core和HTML5的控件，助您打造適合當(dāng)今網(wǎng)絡(luò)的應(yīng)用程序。

jQuery EasyUI v1.9.8正式版下載

easyui的每個組件都具有屬性，方法和事件。用戶可以輕松擴(kuò)展它們。

屬性

這些屬性在jQuery.fn。{plugin} .defaults中定義。例如，對話框的屬性在jQuery.fn.dialog.defaults中定義。

事件

事件（回調(diào)函數(shù)）在jQuery.fn。{plugin} .defaults中定義。

方法

調(diào)用方法的語法：$（'selector'）。plugin（'method'，parameter）;

位置：

• selector是jQuery對象選擇器。
• plugin是插件名稱。
• method是插件對應(yīng)的現(xiàn)有方法。
• parameter是參數(shù)對象，可以是對象，字符串，...

這些方法在jQuery.fn。{plugin} .methods中定義。每種方法都有兩個參數(shù)：jq和param。第一個參數(shù)'jq'是必需的，它引用該jQuery對象。第二個參數(shù)“ param”是指通過方法的真正參數(shù)。例如，為對話框組件擴(kuò)展名為“ mymove”的方法，代碼如下所示：

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
        return jq.each(function(){
            $(this).dialog('move', newposition);
        });
    }
});

現(xiàn)在，您可以調(diào)用“ mymove”方法將對話框移至指定位置：

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

jQuery EasyUI入門

下載該庫，并在頁面上包含EasyUI CSS和JavaScript文件。

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

包含EasyUI必需的文件后，您可以通過標(biāo)記或使用JavaScript定義EasyUI組件。例如，要定義具有可折疊功能的面板，可以編寫如下的HTML代碼：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
        title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

從標(biāo)記創(chuàng)建組件時，從1.3版開始，“data-options”屬性可用于支持HTML5兼容屬性名稱。因此，您可以將上面的代碼重寫為：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
        title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

下面的代碼顯示了如何創(chuàng)建綁定“ onSelect”事件的組合框。

<input class="easyui-combobox" name="language"
        data-options="
            url:'combobox_data.json',
            valueField:'id',
            textField:'text',
            panelHeight:'auto',
            onSelect:function(record){
                alert(record.text)
            }">

現(xiàn)慧都隆重推出“軟件國產(chǎn)化服務(wù)季”，擁有當(dāng)下最流行，最全面的UI開發(fā)組件，折扣力度大到你尖叫！點擊查看詳情>>

好了，這就是今天的主要內(nèi)容了，你學(xué)會了嗎？點擊查看更多文章教程歡迎在評論區(qū)留下你的意見和建議！