jQueryEasyUI(編程工具)

JQueryEasyUI是一款能夠幫助用戶獲取更為輕松的編程方式，軟件擁有超簡(jiǎn)潔美觀的UI界面，在這里你只需要懂基礎(chǔ)的html標(biāo)簽就能夠進(jìn)行編程，有需要用到這款軟件的朋友就趕快來(lái)綠色資源網(wǎng)下載使用吧！

jQueryEasyUI官方介紹

jQuery EasyUI是一組基于jQuery的UI插件集合體，而jQuery EasyUI的目標(biāo)就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開發(fā)者不需要編寫復(fù)雜的javascript，也不需要對(duì)css樣式有深入的了解，開發(fā)者需要了解的只有一些簡(jiǎn)單的html標(biāo)簽。

jQueryEasyUI軟件特色

1、基于jquery用戶界面插件的集合

2、為一些當(dāng)前用于交互的js應(yīng)用提供必要的功能

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

4、支持HTML5（通過(guò)data-options屬性）

5、開發(fā)產(chǎn)品時(shí)可節(jié)省時(shí)間和資源

6、簡(jiǎn)單，但很強(qiáng)大

7、支持?jǐn)U展，可根據(jù)自己的需求擴(kuò)展控件

8、目前各項(xiàng)不足正以版本遞增的方式不斷完善

文檔

EasyUI每個(gè)組件的屬性，方法和事件。用戶可以很容易地?cái)U(kuò)展他們。

屬性

所有的屬性都定義在jQuery.fn.{plugin}.defaults里面。例如，對(duì)話框?qū)傩远x在jQuery.fn.dialog.defaults里面。

事件

所有的事件（回調(diào)函數(shù)）也都定義在jQuery.fn.{plugin}.defaults里面。

方法

調(diào)用方法的語(yǔ)法：$('selector').plugin('method', parameter);

解釋

selector是jQery對(duì)象選擇器。

plugin 是插件的名稱。

method 是相應(yīng)插件現(xiàn)有的方法。

parameter 是參數(shù)對(duì)象，可以是一個(gè)對(duì)象、字符串等。

所有方法都定義在jQuery.fn.{plugin}.methods。每個(gè)方法都有2個(gè)參數(shù)：jq和param。第一個(gè)參數(shù)'jq'是必須的，這是指的jQuery對(duì)象。第二個(gè)參數(shù)'param'是指?jìng)魅敕椒ǖ膶?shí)際參數(shù)。例如，為dialog組件擴(kuò)展一個(gè)方法名為'mymove'，代碼如下：

$.extend($.fn.dialog.methods,{

mymove:function(jq,newposition){

returnjq.each(function(){

$(this).dialog('move',newposition);

});

}

});

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

現(xiàn)在你可以調(diào)用'mymove'方法將對(duì)話框移動(dòng)到指定位置：

$('#dd').dialog('mymove',{

left:200,

top:100

});

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

jQuery EasyUI 入門指南

下載程序庫(kù)并導(dǎo)入EasyUI的CSS和Javascript文件到您的頁(yè)面。

<linkrel="stylesheet"type="text/css"href="easyui/themes/default/easyui.css">

<linkrel="stylesheet"type="text/css"href="easyui/themes/icon.css">

<scripttype="text/javascript"src="easyui/jquery-1.7.2.min.js"></script>

<scripttype="text/javascript"src="easyui/jquery.easyui.min.js"></script>

<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-1.7.2.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

一旦你導(dǎo)入了EasyUI必須的文件，你就可以通過(guò)標(biāo)記或Javascript定義一個(gè)EasyUI組件。例如：定義一個(gè)帶可折疊功能的面板，你需要寫的HTML代碼如下：

<divid="p"class="easyui-panel"style="width:500px;height:200px;padding:10px;"

title="MyPanel"iconCls="icon-save"collaPSible="true">

Thepanelcontent

</div>

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

當(dāng)通過(guò)標(biāo)記創(chuàng)建一個(gè)組件的時(shí)候從1.3版開始'data-options'屬性可以用來(lái)支持HTML5兼容屬性名稱。所以你可以改寫上面的代碼為：

<divid="p"class="easyui-panel"style="width:500px;height:200px;padding:10px;"

title="MyPanel"data-options="iconCls:'icon-save',collapsible:true">

Thepanelcontent

</div>

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

下面的代碼演示了如何創(chuàng)建一個(gè)組合框，并綁定onSelect事件。

<inpuTCLass="easyui-combobox"name="language"

data-options="

url:'combobox_data.json',

valueField:'id',

textField:'text',

panelHeight:'auto',

onSelect:function(record){

alert(record.text)