以下给出7个jquery easy ui 基本组件；

1 基本面板

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic Panel - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>Basic Panel</h2>

	<p>The panel is a container for other components or elements.</p>

	<div style="margin:20px 0 10px 0;">

		<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>

		<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>

	</div>

	<div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:200px;padding:10px;">

		<p style="font-size:14px">jQuery EasyUI framework 基本演示样例</p>

		<ul>

			<li>easyui 是一个基于jquery的用户界面插件集.</li>

			<li>提供易用功能来构造交互式的。javascript的应用.</li>

			<li>不须要写太多javascript代码，通经常使用html定义用户界面.</li>

			<li>支持HTML5.</li>

			<li>easyui 能节约时间.</li>

			<li>easyui 容易使用.</li>

		</ul>

	</div>

</body>

</html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

2 基本手风琴(折叠面板)

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic Accordion - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>Basic Accordion</h2>

	<p>单击面板头部显示内容.</p>

	<div style="margin:20px 0 10px 0;"></div>

	<div class="easyui-accordion" style="width:500px;height:300px;">

		<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">

			<h3 style="color:#0099FF;">手风琴</h3>

			<p>手风琴组件.</p>

		</div>

		<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">

			<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>

		</div>

		<div title="菜单" data-options="iconCls:'icon-search'" style="padding:10px;">

			<ul class="easyui-tree">

				<li>

					<span>食物</span>

					<ul>

						<li>

							<span>水果</span>

							<ul>

								<li>苹果</li>

								<li>橙子</li>

							</ul>

						</li>

						<li>

							<span>蔬菜</span>

							<ul>

								<li>西红柿</li>

								<li>胡萝卜</li>

								<li>洋白菜</li>

								<li>土豆</li>

								<li>莴苣</li>

							</ul>

						</li>

					</ul>

				</li>

			</ul>

		</div>

	</div>

</body>

</html>

3 基本选项卡

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic Tabs - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>基本选项卡</h2>

	<p>Click tab strip to swap tab panel content.</p>

	<div style="margin:20px 0 10px 0;"></div>

	<div class="easyui-tabs" style="width:700px;height:250px">

		<div title="宠物" style="padding:10px">

			<p style="font-size:14px">jQuery EasyUI framework 选项卡</p>

			<ul>

				<li>小兔子</li>

				<li>小狗狗</li>

				<li>小猫咪</li>

				<li>小萌宠</li>

				<li>XXXXXXXXXXXXX</li>

				<li>YYYYYYYYYYYYY</li>

			</ul>

		</div>

		<div title="My Documents" style="padding:10px">

			<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>

		</div>

		<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">

			This is the help content.

		</div>

	</div>

</body>

</html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

4 基本布局

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic Layout - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>基本布局</h2>

	<p>布局包含北，南，东，西，中间，部分</p>

	<div style="margin:20px 0;"></div>

	<div class="easyui-layout" style="width:700px;height:350px;">

		<div data-options="region:'north'" style="height:50px"></div>

		<div data-options="region:'south',split:true" style="height:50px;"></div>

		<div data-options="region:'east',split:true" title="东" style="width:100px;"></div>

		<div data-options="region:'west',split:true" title="西" style="width:100px;"></div>

		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

			<table class="easyui-datagrid"

					data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">

				<thead>

					<tr>

						<th data-options="field:'itemid'" width="80">Item ID</th>

						<th data-options="field:'productid'" width="100">Product ID</th>

						<th data-options="field:'listprice',align:'right'" width="80">List Price</th>

						<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>

						<th data-options="field:'attr1'" width="150">Attribute</th>

						<th data-options="field:'status',align:'center'" width="60">Status</th>

					</tr>

				</thead>

			</table>

		</div>

	</div>

</body>

</html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

5 基本数据表格

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic DataGrid - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>基本数据表格</h2>

	<p>由html标记创建。不须要javascript代码</p>

	<div style="margin:20px 0;"></div>

	<table class="easyui-datagrid" title="基本数据表格" style="width:700px;height:250px"

			data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">

		<thead>

			<tr>

				<th data-options="field:'itemid',width:80">Item ID</th>

				<th data-options="field:'productid',width:100">Product</th>

				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>

				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>

				<th data-options="field:'attr1',width:250">Attribute</th>

				<th data-options="field:'status',width:60,align:'center'">Status</th>

			</tr>

		</thead>

	</table>

</body>

</html>

6 基本对话框

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic Dialog - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>基本对话框</h2>

	<p>单击打开或关闭对话框</p>

	<div style="margin:20px 0;">

		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">打开</a>

		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>

	</div>

	<div id="dlg" class="easyui-dialog" title="基本 Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">

		有活就干，干完活吃饭。吃完饭睡觉.

	</div>

</body>

</html>

7 基本表单

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Basic Form - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

</head>

<body>

	<h2>基本表单</h2>

	<p>Fill the form and submit it.</p>

	<div style="margin:20px 0;"></div>

	<div class="easyui-panel" title="新主题" style="width:400px">

		<div style="padding:10px 60px 20px 60px">

	    <form id="ff" method="post">

	    	<table cellpadding="5">

	    		<tr>

	    			<td>姓名:</td>

	    			<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>

	    		</tr>

	    		<tr>

	    			<td>邮件:</td>

	    			<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>

	    		</tr>

	    		<tr>

	    			<td>主题:</td>

	    			<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>

	    		</tr>

	    		<tr>

	    			<td>消息:</td>

	    			<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:60px"></input></td>

	    		</tr>

	    		<tr>

	    			<td>语言:</td>

	    			<td>

	    				<select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>

	    			</td>

	    		</tr>

	    	</table>

	    </form>

	    <div style="text-align:center;padding:5px">

	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>

	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>

	    </div>

	    </div>

	</div>

	<script>

		function submitForm(){

			$('#ff').form('submit');

		}

		function clearForm(){

			$('#ff').form('clear');

		}

	</script>

</body>

</html>

下面是我所作7个基本组件的源代码。余下的能够自己发挥了；

在以下链接可下载；

http://pan.baidu.com/s/1o7OEMc6

包含jquery easy ui 1.4.5版本号和jquery easy ui demo



8 加载json文件错误

XMLHttpRequest cannot load file:///C:/jquery-easyui-1.4.5/basedemo10/datagrid_data1.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

參考

http://blog.csdn.net/rchm8519/article/details/42643257#t18

7个jquery easy ui 基本组件图解的更多相关文章

  1. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  2. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  3. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  4. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  5. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  6. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  7. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  8. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  9. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

随机推荐

  1. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  2. @JsonInclude(Include.NON_NULL)

    前端的同事要求说尽量不要有null,可有为空串“” 或者 0 或者 [], 但尽量不要null. 所以@JsonInclude(Include.NON_NULL) 这个注解放在类头上就可以解决. 实体 ...

  3. SpringSecurity3整合CAS实现单点登录

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. redis中文API

    1.学习文档地址:http://www.redisdoc.com/en/latest/index.html 2.redis中文API REDIS所有的命令 <<ABOUT LIST> ...

  5. zendframework配置篇

    1. 重写配置 httpd.conf配置修改 LoadModule rewrite_module modules/mod_rewrite.so <Directory "D:\PHPPr ...

  6. 用10张图来看机器学习Machine learning in 10 pictures

    I find myself coming back to the same few pictures when explaining basic machine learning concepts. ...

  7. Labeled Faces in the Wild 人脸识别数据集 部分训练数据

    development training set Note: images displayed are original (non-aligned/funneled) images. match pa ...

  8. 解析Java的JNI编程中的对象引用与内存泄漏问题

    JNI,Java Native Interface,是 native code 的编程接口.JNI 使 Java 代码程序可以与 native code 交互——在 Java 程序中调用 native ...

  9. 服务器主机上RAID Card的Write Caching Policy

    在Cisco Server的DRAC中, 创建virtual drive时, 会看到下面的选项.   那么Write back, write through, write back bad BBU之间 ...

  10. 恢复计算机崩溃数据的五款最佳Linux发行版

    嗨,Linux 新手们!你们在尝试运行命令时有没有搞坏过计算机系统?我相信你们有过这种经历.这一幕经常发生:你想尝试运行命令,或者安装测试更新版,结果下一次重启时计算机就崩溃了.我在本文将逐一介绍五款 ...