jQueryEasyUI(編程工具（jù）)

JQueryEasyUI是（shì）一款能（néng）夠幫助（zhù）用戶獲取更為輕鬆的編程方式，軟件擁有超（chāo）簡潔美觀的UI界麵，在這裏你（nǐ）隻（zhī）需要懂基礎的html標（biāo）簽（qiān）就能夠進行編程，有需要用到這款軟件的（de）朋友（yǒu）就趕快來綠色資（zī）源網下（xià）載使用吧！

jQueryEasyUI官方介紹

jQuery EasyUI是一組基於jQuery的UI插件集合體（tǐ），而jQuery EasyUI的目標就是幫助web開發者（zhě）更輕鬆的打造出功能豐富並且美觀的（de）UI界麵。開發者不需要編寫複雜（zá）的javascript，也不（bú）需要對css樣式有深入的了解，開發者需要了（le）解（jiě）的隻有一些簡單的（de）html標簽。

jQueryEasyUI軟件特色

1、基於jquery用戶界麵插件的集（jí）合（hé）

2、為一些當前用於交互的js應用提供必（bì）要的功能

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

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

5、開發產品時可節省時間和資源（yuán）

6、簡單，但很強大

7、支持（chí）擴展，可根據自己（jǐ）的需求擴展控件

8、目前（qián）各項不（bú）足正以版本遞增的（de）方式不斷完善

文檔

EasyUI每個（gè）組件的屬性，方法和事（shì）件。用戶（hù）可以（yǐ）很容易地擴展他們。

屬性

所有的屬性（xìng）都定義在jQuery.fn.{plugin}.defaults裏麵。例如，對話（huà）框屬性定義在jQuery.fn.dialog.defaults裏麵。

事件

所有的事件（回調函數）也都定義在jQuery.fn.{plugin}.defaults裏（lǐ）麵。

方法

調用方法（fǎ）的語法：$('selector').plugin('method', parameter);

解釋

selector是jQery對象選擇器。

plugin 是插件的名稱。

method 是（shì）相應插件現有的方法。

parameter 是參數對（duì）象（xiàng），可以是一個對象、字符串等。

所有方法都定義在jQuery.fn.{plugin}.methods。每個方法都有2個參數：jq和（hé）param。第一個參數'jq'是必須的，這是指的jQuery對象（xiàng）。第二個參數'param'是指傳入方法的實際參數。例如，為dialog組件擴展一個方法名為'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);     });   } });

現在你可以調（diào）用'mymove'方法（fǎ）將（jiāng）對話框移動到指（zhǐ）定位置：

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

left:200,

top:100

});

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

jQuery EasyUI 入門指南

下載程序庫並導入EasyUI的CSS和Javascript文件到您（nín）的頁麵。

<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>

一旦你導入了EasyUI必須的文件，你就可以通過標記或Javascript定義（yì）一個EasyUI組件。例如：定義（yì）一個帶可折疊功能的麵板，你需要寫的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>

當通過標記創建一個組件的時候從1.3版開（kāi）始'data-options'屬性可（kě）以用來支持（chí）HTML5兼容（róng）屬性名稱。所以你可以改寫上麵的（de）代（dài）碼為：

<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>

下（xià）麵的代碼演示了如何創建一個組合框，並綁定onSelect事件。

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

data-options="

url:'combobox_data.json',

valueField:'id',

textField:'text',

panelHeight:'auto',

onSelect:function(record){

alert(record.text)