jQuery EasyUI 指南

为什么80%的码农都做不了架构师？>>>   

下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

1. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
2. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
3. <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>  
4. <script type="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代码如下：

1. <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"  

1.         title="My Panel" iconCls="icon-save" collapsible="true">  
2.     The panel content   

1. </div>  

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

当通过标记创建一个组件的时候从1.3版开始'data-options'属性可以用来支持HTML5兼容属性名称。所以你可以改写上面的代码为：

1. <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"  

1.         title="My Panel" data-options="iconCls:'icon-save',collapsible:true">  
2.     The panel content   

1. </div>  

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

下面的代码演示了如何创建一个组合框，并绑定onSelect事件。 

1. <input class="easyui-combobox" name="language"  

1.         data-options="   
2.             url:'combobox_data.json',   
3.             valueField:'id',   
4.             textField:'text',   
5.             panelHeight:'auto',   
6.             onSelect:function(record){   
7.                 alert(record.text)   
8.             }" />  

转载于:https://my.oschina.net/zz006/blog/841670