EasyUI 入门教材1：如何引入EasyUI

EasyUI 入门教材1：如何引入EasyUI

1.1:开始使用jQuery EasyUI

下载easyui库，并在页面上包含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.min.js"></script>
4. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

在页面的head部分引入文件。

一旦您包含了EasyUI必需的文件，您就可以从标记或使用JavaScript定义EasyUI组件。例如，要定义一个具有可折叠功能的面板，

您可以像这样编写HTML代码:

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

当创建一个组件从标记,数据选项的属性可以用来支持HTML5自1.3版本兼容的属性名称。所以你可以把上面的代码重写为:

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

用data-options标记来书写相关属性。可以更好的书写大量属性。有时候属性可能需要写几十行......

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

1. <input class="easyui-combobox" name="language"
2. data-options="
3. url:'combobox_data.json',
4. valueField:'id',
5. textField:'text',
6. panelHeight:'auto',
7. onSelect:function(record){
8. alert(record.text)
9. }">