jQueryEasyUI(編程工具)

JQueryEasyUI是一款能夠幫助用戶獲取更為輕松的編程方式，軟件擁有超簡潔美觀的UI界面，在這里你只需要懂基礎的html標簽就能夠進行編程，有需要用到這款軟件的朋友就趕快來綠色資源網下載使用吧！

jQueryEasyUI官方介紹

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

jQueryEasyUI軟件特色

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

2、為一些當前用于交互的js應用提供必要的功能

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

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

5、開發產品時可節省時間和資源

6、簡單，但很強大

7、支持擴展，可根據自己的需求擴展控件

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

文檔

EasyUI每個組件的屬性，方法和事件。用戶可以很容易地擴展他們。

屬性

所有的屬性都定義在jQuery.fn.{plugin}.defaults里面。例如，對話框屬性定義在jQuery.fn.dialog.defaults里面。

事件

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

方法

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

解釋

selector是jQery對象選擇器。

plugin 是插件的名稱。

method 是相應插件現有的方法。

parameter 是參數對象，可以是一個對象、字符串等。

所有方法都定義在jQuery.fn.{plugin}.methods。每個方法都有2個參數：jq和param。第一個參數'jq'是必須的，這是指的jQuery對象。第二個參數'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);     });   } });

現在你可以調用'mymove'方法將對話框移動到指定位置：

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

left:200,

top:100

});

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

jQuery EasyUI 入門指南

下載程序庫并導入EasyUI的CSS和Javascript文件到您的頁面。

<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定義一個EasyUI組件。例如：定義一個帶可折疊功能的面板，你需要寫的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版開始'data-options'屬性可以用來支持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>

下面的代碼演示了如何創建一個組合框，并綁定onSelect事件。

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

data-options="

url:'combobox_data.json',

valueField:'id',

textField:'text',

panelHeight:'auto',

onSelect:function(record){

alert(record.text)