初试jQuery_EasyUI_使用介绍.docVIP

初试jQuery EasyUI 使用介绍 jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。 OK，下面就开始我们的初探之旅。 jQuery EasyUI---Accordion 手风琴效果，大家应该很熟悉。 基本代码： 复制代码 代码如下: lt;html xmlns=“/1999/xhtml”gt; lt;headgt; lt;titlegt;Accordionlt;/titlegt; lt;script src=“../jquery-1.4.2.min.js” type=“text/javascript”gt;lt;/scriptgt; lt;script src=“../jquery.easyui.min.js” type=“text/javascript”gt;lt;/scriptgt; lt;link href=“../themes/default/easyui.css” rel=“stylesheet” type=“text/css” /gt; lt;link href=“../themes/icon.css” rel=“stylesheet” type=“text/css” /gt; lt;script type=“text/javascript”gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div style=“overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;”gt; lt;div id=“aa” class=“easyui-accordion” fit=“true” style=“width:300px;height:200px;”gt; lt;div title=“Title1” style=“overflow:auto;padding:10px;”gt; lt;h3gt;Accordion1lt;/h3gt; lt;/divgt; lt;div title=“Title2” style=“padding:10px;”gt; lt;h3gt;Accordion2lt;/h3gt; lt;/divgt; lt;div title=“Title3”gt; lt;h3gt;Accordion3lt;/h3gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; 代码非常简单，只需要简单的html就可以实现。这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。 效果： 由于只是简单的html，所以我们可以通过js轻松的对Accordion进行操控，控制大小，位置等等。 jQuery EasyUI---DataGrid 从名字就可以知道这是个数据的绑定和显示控件。 基本代码： 复制代码 代码如下: lt;html xmlns=“/1999/xhtml”gt; lt;headgt; lt;titlegt;DataGridlt;/titlegt; lt;meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”gt; lt;script src=“../jquery-1.4.2.min.js” type=“text/javascript”gt;lt;/scriptgt; lt;script src=“../jquery.easyui.min.js” type=“text/javascript”gt;lt;/scriptgt; lt;link href=“../themes/default/easyui.css” rel=“stylesheet” type=“text/css” /gt; lt;link href=“../themes/icon.css” rel=“stylesheet” type=“text/css” /gt; lt;script type=“text/javascript”gt; $