界面设计
详见：http://www.w3school.com.cnjavascript
1、html && xhtml && html5php
html:css
一、html格式：<p>段落</p>html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX </title>
</head>
<body>
</body>
</html>
二、被重定向到新的地址(5 秒内):<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />前端
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />html5
三、<br/> 标签订义换行java
四、<ins>：下划线（定义被插入文本）；若是文本不是超连接，就不要<u>对其使用下划线</u>。node
五、边框上显示信息python
<fieldset>
<legend>边框信息</legend>
</fieldset>jquery
六、显示度量值：<meter value="3" min="0" max="10"></meter>
七、导航条：
<nav>
<a href="/html/index.asp">Home</a>
<a href="/html/html_elements.asp">Next</a>
</nav>
八、框架：
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器没法处理框架！</body> </noframes> </frameset>
九、<noscript>定义针对不支持客户端脚本的用户的替代内容。</noscript>
十、<object> 定义内嵌对象。
十一、<ol> 标签订义有序列表
<ol start="50"> <li>50</li> <li>51</li> <li>52</li> </ol>
十二、经过 <optgroup> 标签把相关的选项组合在一块儿：
<select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select>
1三、执行计算而后在 <output> 元素中显示结果：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> <p><b>注释：</b>Internet Explorer 不支持 <output> 标签。</p>
1四、使用函数来加载 XML 文档
<html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("books.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html>
1五、进度：<progress value="22" max="100"></progress>
1六、<q>浏览器在引用的周围插入了引号</q>
1七、<sub> 定义下标文本。<sup> 标签可定义上标文本
1八、为 <details> 元素定义可见的标题。
<details> <summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5. </details>
1九、HTML5 视频：<video src="/i/movie.ogg" controls="controls"></video>
20、hour时提示详细信息。标记一个缩写：<abbr title="People's Republic of China">PRC</abbr>。标记一个首字母缩写：<acronym title="World Wide Web">WWW</acronym>
2一、规定了一个相对地址<base href="http://www.w3school.com.cn/i/" /> 下：<img src="eg_smile.gif" />
2二、从右向左输出 (rtl)：<bdo dir="rtl"> text</bdo>
2三、换行并增长外边距：blockquote
2四、<canvas> 标签只是图形容器，您必须使用脚原本绘制图形。
2五、<embed src="/i/helloworld.swf" />
2六、"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
2七、<a href="mailto:someone@example.com">someone@example.com</a>
2八、简单的三框架页面：cols垂直框架、rows水平框架,边框是没法移动noresize ;指定到指定节 <frame src="/example/html/link.html#C10">
iframe 元素会建立包含另一个文档的内联框架（即行内框架）。
<frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset>
2九、删除文本和下划线文本： <del>二十</del> <ins>十二</ins> 、map、mark、加双引号：<q>quotation</q>，<u> 标签为文本添加下划线、strong加粗、<strike> 标签可定义加删除线文本定义
xhtml: XHTML不是HTML 5 的升级版本，是做为一种 XML 应用被从新定义的 HTML，是一个 W3C 标准。
一、DOCTYPE 没有关闭标签
二、在 XHTML 文档中doctype、html、head、body 以及 title元素是强制性的
三、lang 属性的正确用法：<div lang="en" xml:lang="en">Hello World!</div>
四、XHTML 元素必须被正确地嵌套，XHTML 元素必须被关闭，标签名必须用小写字母，XHTML 文档必须拥有根元素。
html5:
一、HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
二、Canvas 和 SVG 都容许您在浏览器中建立图形，可是它们在根本上是不一样的
Canvas SVG
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
弱的文本渲染能力 最适合带有大型渲染区域的应用程序（好比谷歌地图）
可以以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过分使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用
三、localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。
四、视频video及音频audio：control 属性供添加播放、暂停和音量控件。包含宽度和高度属性也是不错的主意。<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的
五、拖放：把 draggable 属性设置为 true；
ondragstart 属性调用函数：drag(event)，其内dataTransfer.setData() 方法设置被拖数据的数据类型和值；ondragover 事件规定在何处放置被拖动的数据，默认地，没法将数据/元素放置到其余元素中，若是须要设置容许放置，咱们必须阻止对元素的默认处理方式。这要经过调用 ondragover 事件的 event.preventDefault() 方法：当放置被拖数据时，会发生 drop 事件。
六、使用 HTML5，经过建立 cache manifest 文件，能够轻松地建立 web 应用的离线版本。<html manifest="demo.appcache">manifest 文件的建议的文件扩展名是：".appcache"。
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减小服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
请注意，manifest 文件须要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存，是必需的；当 manifest 文件加载后，浏览器会从网站的根目录下载其下列出的文件
NETWORK - 在此标题下列出的文件须要与服务器的链接，且不会被缓存；永远不会被缓存，且离线时是不可用的；可使用星号来指示全部其余资源/文件都须要因特网链接
FALLBACK - 在此标题下列出的文件规定当页面没法访问时的回退页面（好比 404 页面）；小节规定若是没法创建因特网链接，则用 "offline.html" 替代 /html5/ 目录中的全部文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /offline.html
一旦文件被缓存，则浏览器会继续展现已缓存的版本，即便您修改了服务器上的文件。为了确保浏览器更新缓存，您须要更新 manifest 文件。
七、web worker 是运行在后台的 JavaScript，不会影响页面的性能。typeof(Worker)!=="undefined"判断浏览器是否支持。postMessage() 方法 - 它用于向 HTML 页面传回一段消息； 向 web worker 添加一个 "onmessage" 事件监听器：w.onmessage=function(event){};如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法.
八、HTML5 服务器发送事件（server-sent event）容许网页得到来自服务器的更新:EventSource 对象用于接收服务器发送事件通知\onopen当通往服务器的链接被打开\onmessage当接收到消息
建立一个新的 EventSource 对象，而后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
每接收到一次更新，就会发生 onmessage 事件
服务器端事件流的语法是很是简单的。把 "Content-Type" 报头设置为 "text/event-stream"。如今，您能够开始发送事件流了。
输出发送数据（始终以 "data: " 开头）具体以下：
//PHP 代码 (demo_sse.php)： <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> //具体实现代码： <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; } </script>
九、HTML5 拥有多个新的表单输入类型：email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color；datalist、keygen、output
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能;novalidate 属性规定在提交表单时不该该验证 form 或 input 域;formaction - 重写表单的 action 属性\formnovalidate - 重写表单的 novalidate 属性\formenctype - 重写表单的 enctype 属性\formmethod - 重写表单的 method 属性\formtarget - 重写表单的 target 属性;placeholder 属性提供一种提示（hint），描述输入域所期待的值。pattern 属性规定用于验证 input 域的模式（pattern）,模式（pattern） 是正则表达式。required \multiple
注释：autocomplete 适用于 <form> 标签，以及如下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
十、HTML5 以前的 HTML 版本是HTML 4.01；在 HTML5 中，哪一个元素用于组合标题元素<hgroup>；HTML5 中再也不支持<font>元素；在 HTML5 中再也不支持 <script> 元素的type属性；由 SVG 定义的图形是XML格式； HTML5 内建的getContext对象用于在画布上绘制；HTML5的<meter> 元素用于显示已知范围内的标量测量
十一、引入网页<iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
2、CSS（详细：http://www.w3school.com.cn）
一、margin:上 右 下 左
二、overflow 属性规定当内容溢出元素框时发生的事情。包括自动换行、滚动栏等
三、position:relative;overflow:hidden; display:none；
* 四、多个div按百分比（%）并列于一行：display:inlineblack与float:left|right并用才能够到达无缝效果。具体以下：
<div>
<div style = "width:20%;float:left; display:inline-block; background:red;border:1px dotted preparent">1</div>
<div style="width:60%;display:inline-block;background:blue;border:0px" align = "center">
<div>44</div>
<div>44</div>
<div>44</div>
</div>
<div style = "width:20%;display:inline-block;float:right;border:0px;background:green">66</div>
</div>
五、内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于如下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
六、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 以后，才是有效的；在 CSS 定义中，a:active 必须被置于 a:hover 以后，才是有效的。
七、 :first-child 伪类来选择元素的第一个子元素。li.first-child{text-transform:uppercase;}注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。选择器匹配全部 <p> 元素中的第一个 <i> 元素：p > i:first-child {font-weight:bold;} ;选择器匹配全部做为元素的第一个子元素的 <p> 元素中的全部 <i> 元素：p:first-child i {color:blue;};:lang 伪类使你有能力为不一样的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：q:lang(no){quotes: "~" "~"} \ <q lang="no">段落中的引用的文字</q>;:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。:hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的连接添加样式。
:visited 向已被访问的连接添加样式。 :first-child 向元素的第一个子元素添加样式。 :lang 向带有指定 lang 属性的元素添加样式。
"first-line" 伪元素用于向文本的首行设置特殊样式 (p:first-line {color: #ff0000;font-variant: small-caps})
"first-letter" 伪元素用于向文本的首字母设置特殊样式：p:first-letter{color:#ff0000;font-size:xx-large;}
":before" 伪元素能够在元素的内容前面插入新内容:h1:before {content:url(/i/logo.gif)}
":after" 伪元素能够在元素的内容以后插入新内容:h1:after{content:url(logo.gif);}
八、派生选择器：li strong {}
id 选择器：以 "#" 来定义：#red {color:red;} <p id="red">红色。</p> #sidebar p {}
类选择器以一个点号显示：.center {text-align: center} .fancy td {} <td class="fancy">
HTML 元素设置样式：[title]{color:red;} [title=name]{border:5px solid blue;} input[type="button"]{}
空格分隔的属性值:[title~=hello]{color:red;} //好比：title值如："hey hello boy"
连字符分隔的属性值：[lang|=en] { color:red; } //好比：<p lang="en-us">Hi!</p>
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每一个元素。
[attribute$=value] 匹配属性值以指定值结尾的每一个元素。
[attribute*=value] 匹配属性值中包含指定值的每一个元素。
九、<link rel="stylesheet" type="text/css" href="mystyle.css" />
body {background-image: url("images/back40.gif");}
一、背景：
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center; //100% 100%;
background-attachment:fixed
background-repeat 属性设置是否及如何重复背景图像。值：repeat、repeat-x、repeat-y、no-repeat、inherit,默认repeat：背景图像在水
平和垂直方向上重复。
全部背景属性在一个声明之中：background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
二、文本
缩进：text-indent: 1cm; //5%
对齐：text-align: justify //两端对齐 及 center
字母间距：letter-spacing: 5px //默认值 normal
单词间距：word-spacing：5px //默认值 normal
字符转换：text-transform：none //默认值 none 对文本不作任何改动，将使用源文档中的原有大小写。uppercase 和 lowercase 将文
本转换为全大写和全小写字符;capitalize 只对每一个单词的首字母大写。
文本修饰：text-decoration: none //值：none、underline、overline、line-through，blinktext-decoration 值会替换而不是累积起来
处理空白符：white-space: normal; //会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。normal：合并全部的空白符，并忽
略换行符;pre：空白符、换行不会被忽略;nowrap：防止元素中的文本换行；pre-wrap ：浏览器不只会保留空白符并保留换行符，还容许自动换行
； pre-line：浏览器会保留换行符，并容许自动换行，可是会合并空白符。
文本方向：direction //属性有两个值：ltr 和 rtl;对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用
direction 属性。
三、字体：font-family系列;font-size:大小;font-weight:加粗;font-style :风格（如斜体）;font-variant:变形（如小型大写字母）。
四、连接：a:link - 普通的、未被访问的连接；a:visited - 用户已访问的连接；a:hover - 鼠标指针位于连接的上方；a:active - 连接被点击的
时刻。
五、列表
列表类型：list-style-type //circle、square，upper-roman、lower-alpha
列表图像：list-style-image : url(xxx.gif)
列表标志位置：list-style-position
简写列表样式：list-style : url(example.gif) square inside
六、表格
border-collapse 设置是否把表格边框合并为单一的边框。值：separate、collapse
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。
注：必须有：<!DOCTYPE>
七、轮廓
outline 在一个声明中设置全部的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
八、元素框：增长内边距、边框和外边距不会影响内容区域的尺寸，可是会增长元素框的总尺寸；元素的背景是内容、内边距和边框区的背景
padding ：接受长度值或百分比值，但不容许使用负值。padding-top、padding-right、padding-bottom、padding-left。
border ：边框样式border-style: none、dotted、dashed、solid、double、groove、ridge、outset、inset、inherit。
border-width:能够指定长度值或thin 、medium（默认值） 和 thick。
border-color: blue rgb(25%,35%,45%) #909090 red;transparent 使用边框就像是额外的内边距同样；此外在须要的时候使其
可见；元素的背景会延伸到边框区域。
margin ：设置外边距会在元素外建立额外的“空白”，接受任何长度单位、百分数值甚至负值。
外边距合并：当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出如今另外一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并；
当一个元素包含在另外一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并；
假设有一个空元素，它有外边距，可是没有边框或填充。在这种状况下，上外边距与下外边距就碰到了一块儿，它们会发生合并；
若是这个外边距遇到另外一个元素的外边距，它还会发生合并。
九、定位和浮动
块和行：div、h1 或 p 元素经常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素
称为“行内元素”，这是由于它们的内容显示在行中，即“行内框”。
经过将 display 属性设置为 block，可让行内元素（好比 <a> 元素）表现得像块级元素同样。还能够经过把 display 设置为
none，让生成的元素根本没有框。这样的话，该框及其全部内容就再也不显示，不占用文档中的空间。
把一些文本添加到一个块级元素（好比 div）的开头。即便没有把这些文本定义为段落，它也会被看成段落对待。
定位机制：普通流、浮动和绝对定位。除非专门指定，不然全部框都在普通流中定位。行内框在一行中水平布置。可使用水平内边距、
边框和外边距调整它们的间距。可是，垂直内边距、边框和外边距不影响行内框的高度。由一行造成的水平框称为行框（Line Box），行框的高度
老是足以容纳它包含的全部行内框。不过，设置行高能够增长这个框的高度。
position 属性值的含义：
static：元素框正常生成。块级元素生成一个矩形框，做为文档流的一部分，行内元素则会建立一个或多个行框，置于其父元素
中。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它本来所占的空间仍保留。
absolute:元素框从文档流彻底删除，并相对于其包含块定位。包含块多是文档中的另外一个元素或者是初始包含块。元素原先在
正常文档流中所占的空间会关闭，就好像元素原来不存在同样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed:元素框的表现相似于将 position 设置为 absolute，不过其包含块是视窗自己。
提示：相对定位实际上被看做普通流定位模型的一部分，由于元素的位置相对于它在普通流中的位置。
十、溢出:overflow: 自动地处理溢出auto、scroll、hidden
十一、剪切图片 img {position:absolute;clip:rect(0px 50px 200px 0px)}
十二、垂直显示：vertical-align:
1三、优先级：-index可被用于将在一个元素放置于另外一元素以后。Z-index: -1 拥有更低的优先级;默认的 z-index 是 0；值若为1优先级更高。
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，而后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
1四、定位
relative：相对定位，设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它本来所占的空间仍保留。
注意，在使用相对定位时，不管是否进行移动，元素仍然占据原来的空间。所以，移动元素会致使它覆盖其它框。
absolute：绝对定位，设置为绝对定位的元素框从文档流彻底删除，并相对于其包含块定位，包含块多是文档中的另外一个元素或者是初
始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在同样。元素定位后生成一个块级框，而不论原来它在正常流中生
成何种类型的框。
提示：由于绝对定位的框与文档流无关，因此它们能够覆盖页面上的其它元素。能够经过设置 z-index 属性来控制这些框的堆放次序。
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，若是不存在已定位的祖先元素，那么
“相对于”最初的包含块。
float:浮动,浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，所
以文档的普通流中的块框表现得就像浮动框不存在同样。
行框和清理：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。所以，建立浮动框可使文本围绕图像。要想阻止行
框围绕浮动框，须要对该框应用 clear 属性。clear 属性规定元素的哪一侧不容许其余浮动元素。
clear 属性的值能够是 left、right、both 或
none，它表示框的哪些边不该该挨着浮动框。
1五、选择器
元素选择器：一般将是某个 HTML 元素，好比 p、h一、em、a，甚至能够是 html 自己；
分组：经过分组，创做者能够将某些类型的样式“压缩”在一块儿，这样就能够获得更简洁的样式表。h1, h2, h3, h4, h5, h6
{color:blue;}
通配选择器（universal selector）：显示为一个星号（*），如：* {color:red;}。
类选择器：容许以一种独立于文档元素的方式来指定样式。.class_style {color:red;}
多类选择器:一个 class 值中可能包含一个词列表，各个词之间用空格分隔.如：<p class="important warning"></p>
ID 选择器:容许以一种独立于文档元素的方式来指定样式。ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。只能在文档中使用一次;
不能使用 ID 词列表;
属性选择器:能够根据元素的属性及属性值来选择元素。好比：a[href][title] {color:red;}；
指向 Web 服务器上某个指定文档的超连接变成红色：a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
若是须要根据属性值中的词列表的某个词进行选择，则须要使用波浪号（~）：p[class~="important"] {color: red;}
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。
简单属性选择、根据具体属性值选择、属性与属性值必须彻底匹配、根据部分属性值选择、子串匹配属性选择器、特定属性选择
类型、
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每一个元素。
[attribute$=value] 匹配属性值以指定值结尾的每一个元素。
[attribute*=value] 匹配属性值中包含指定值的每一个元素。
后代选择器（descendant selector）又称为包含选择器。后代选择器能够选择做为某元素后代的元素。根据上下文选择元素：h1 em {}
属性选择器：能够根据元素的属性及属性值来选择元素
子元素选择器（Child selectors）：只能选择做为某元素子元素的元素。
相邻兄弟选择器（Adjacent sibling selector）：可选择紧接在另外一元素后的元素，且两者有相同父元素。若是要增长紧接在 h1 元素后
出现的段落的上边距，能够这样写：h1 + p {margin-top:50px;}
结合其余选择器：相邻兄弟结合符还能够结合其余结合符：html > body table + ul {margin-top:20px;}
伪类：用于向某些选择器添加特殊的效果。a:link、a:visited 、a:hover 、a:active ；
<a class="one" href="/index.html" target="_blank"> 对应 a.one:link {}；
focus 伪类:input:focus{background-color:yellow;}
first-child伪类:来选择元素的第一个子元素。li:first-child {text-transform:uppercase;}
lang伪类:使你有能力为不一样的语言定义特殊的规则。q:lang(no){quotes: "~" "~"} <q lang="no">test</q>
active伪类:向被激活的元素添加样式。
伪元素：用于向某些选择器设置特殊效果。
1六、尺寸属性
height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。
width 设置元素的宽度。
1七、分类
clear 设置一个元素的侧面是否容许其余的浮动元素。
cursor 规定当指向某元素之上时显示的指针类型。
display 设置是否及如何显示元素。
float 定义元素在哪一个方向浮动。
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility 设置元素是否可见或不可见。
1八、背景图片：background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
div透明度：opacity 属性可以设置的值从 0.0 到 1.0或更早filter:alpha(opacity=60);
1九、@media 规则使你有能力在相同的样式表中，使用不一样的样式规则来针对不一样的媒介。
<style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} } @media print { p.test {font-family:times,serif; font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style>
| all | 用于全部的媒介设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展现，好比幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒介，好比电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
20、background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
CSS 文件中插入注释：/* this is a comment */；显示没有下划线的超连接：a {text-decoration:none}；文本以大写字母开头：text-transform:capitalize
2一、div旋转角度
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
CSS3：
一、圆角边框：border-radius:25px;
向矩形添加阴影：box-shadow: 10px 10px 5px #888888;
使用图片来绘制边框 ：border-image:url(/i/border.png) 30 30 round; //stretch
二、background-size 属性规定背景图片的尺寸：background-size:40% 100%;
background-origin 属性规定背景图片的定位区域。背景图片能够放置于 content-box、padding-box 或 border-box 区域。
多个背景图片：background-image:url(bg_flower.gif),url(bg_flower_2.gif);
background-clip 规定背景的绘制区域。
三、字体：水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
hanging-punctuation 规定标点字符是否位于线框以外。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-wrap 容许对长的不可分割的单词进行分割并换行到下一行。
punctuation-trim 规定是否对标点字符进行修剪。
text-align-last 设置如何对齐最后一行或紧挨着强制换行符以前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
word-break 规定非中日韩文本的换行规则。
四、CSS3 @font-face 规则中定义显示字体
@font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; }
五、经过 CSS3 转换，咱们可以对元素进行移动、缩放、转动、拉长或拉伸。
2D转换：translate()：元素从其当前位置移动；
rotate()：元素顺时针旋转给定的角度rotate(30deg)；
scale()：元素的尺寸会增长或减小，根据给定的宽度（X 轴）和高度（Y 轴）参数
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix()：方法把全部 2D 转换方法组合在一块儿。方法须要六个参数，包含数学函数，容许您：旋转、缩放、移动以及倾斜元素。
3D 转换： rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 容许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
六、CSS3能够在不使用 Flash 动画或 JavaScript 的状况下，当元素从一种样式变换为另外一种样式时为元素添加效果
宽度属性的过渡效果，时长为 2 秒：transition: width 2s;
<style> div { width:100px; height:100px; background:yellow; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style>
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果什么时候开始。默认是 0。
<style> div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } div:hover { width:200px; } </style>
过渡效果会在开始以前等待两秒：transition-property:width 1s linear 2s;
七、 CSS3可以建立动画，这能够在许多网页中取代动画图片、Flash 动画以及 JavaScript。
@keyframes 规则： 规则用于建立动画。在 @keyframes 中规定某项 CSS 样式，就能建立由当前样式逐渐改成新样式的动画效果。您在 @keyframes 中建立动画时，请把它捆绑到某个选择器，不然不会产生动画效果。
动画是使元素从一种样式逐渐变化为另外一种样式的效果。您能够改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
animation: myfirst 5s linear 2s infinite alternate;
@keyframes 规定动画。
animation 全部动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画什么时候开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间以外的状态。
<style> div { width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:5s; -o-animation-timing-function:linear; -o-animation-delay:2s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body>
八、div多行多格
column-count 属性规定元素应该被分隔的列数;column-gap 属性规定列之间的间隔;column-rule 属性设置列之间的宽度、样式和颜色规则。
column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置全部 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置 column-width 和 column-count 的简写属性。
九、新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
resize 属性规定是否可由用户调整元素尺寸；box-sizing 属性容许您以确切的方式定义适应某个区域的具体内容；outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
appearance 容许您将元素设置为标准用户界面元素的外观
box-sizing 容许您以确切的方式定义适应某个区域的具体内容。
icon 为创做者提供使用图标化等价物来设置元素样式的能力。
nav-down 规定在使用 arrow-down 导航键时向何处导航。
nav-index 设置元素的 tab 键控制次序。
nav-left 规定在使用 arrow-left 导航键时向何处导航。
nav-right 规定在使用 arrow-right 导航键时向何处导航。
nav-up 规定在使用 arrow-up 导航键时向何处导航。
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize 规定是否可由用户对元素的尺寸进行调整。
3、javascript
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来讲，会在执行前对全部代码进行编译。JavaScript 对大小写是敏感的。JavaScript 可以改变页面中的全部 HTML 元素、 HTML 属性、CSS 样式，而且可以对页面中的全部事件作出反应。
一、格式：脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。在文本字符串中使用反斜杠对代码行进行换行。单行注释以 // 开头。
<script type="text/javascript"> var idx = 1; function addPanel(){ idx++; } </script>
注：如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：<script src="myScript.js"></script>
二、document：
您只能在 HTML 输出中使用 document.write。若是您在文档加载后使用该方法，会覆盖整个文档.document.write("<h1>This is a heading</h1>");
经过 id、标签名、 类名找到 HTML 元素。注：经过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
使用 JavaScript 来处理 HTML 内容是很是强大的功能:document.getElementById("id");x.innerHTML = "Hello JavaScript";
三、 isNaN(ix)：判断Ix是不是数字。
四、若是从新声明 JavaScript 变量，该变量的值不会丢失。如：var carname="Volvo";var carname;变量 carname 的值依然是 "Volvo"。
五、JavaScript 变量均为对象。当您声明一个变量时，就建立了一个新的对象。Undefined 这个值表示变量不含有值。能够经过将变量的值设置为 null 来清空变量。当您声明新变量时，可使用关键词 "new" 来声明其类型。
六、JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行之后被删除。全局变量会在页面关闭后被删除。若是您把值赋给还没有声明的变量，该变量将被自动做为全局变量声明。
七、数字与字符窜相加结果为字符串。
八、JavaScript验证
<html> <head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
九、事件：
onload 和 onunload 事件：在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。
onchange 事件：常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件：可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的全部部分。
onfocus:当输入字段得到焦点时。
十、Javascript建立html元素（段落）
var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node);
十一、javascript类：JavaScript 是面向对象的语言，但 JavaScript 不使用类。在 JavaScript 中，不会建立类，也不会经过类来建立对象（就像在其余面向对象的语言中那样）。JavaScript 基于 prototype，而不是基于类的。
1）在构造器函数内部定义对象的方法：
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; this.changeName=changeName; function changeName(name) { this.lastname=name; } }
2）JavaScript中 for...in 语句循环遍历对象的每一个属性。
十二、JavaScript数字：都为64位， 不定义不一样类型的数字。整数（不使用小数点或指数计数法）最多为 15 位。小数的最大位数是 17，可是浮点运算并不老是 100% 准确。
1三、javascript字符串：
1）match()方法：如何使用 match() 来查找字符串中特定的字符，而且若是找到的话，则返回这个字符。
1四、javascript时间：
1）Date() 方法得到当日的日期
2）getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
3）setFullYear() 设置具体的日期。注意：表示月份的参数介于 0 到 11 之间。也就是说，若是但愿把月设置为 8 月，则参数应该是 7。
4）getDay() 和数组来显示星期，而不只仅是数字。
5）toUTCString() 将当日的日期（根据 UTC）转换为字符串
1五、javascript数组：
1）concat() 方法来合并两个数组。
2）join() 方法将数组的全部元素组成一个字符串
3）数字排序
function sortNumber(a, b) { return a - b } //arr 数字数组 arr.sort(sortNumber)
1六、javascript数值
1）random() 来返回 0 到 1 之间的随机数。
2）round()对一个数进行四舍五入
1七、RegExp （正则表达式）：
1）test() 方法检索字符串中的指定值。返回值是 true 或 false。
2）exec() 方法检索字符串中的指定值。返回值是被找到的值。若是没有发现匹配，则返回 null。
3）compile() 方法用于改变 RegExp。 既能够改变检索模式，也能够添加或删除第二个参数。
1八、Window
1）location：
location.hostname 返回 web 主机的域名；
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL。
location.assign() 方法加载新的文档。
2）navigator 对象在编写时可不使用 window 这个前缀。注意：来自 navigator 对象的信息具备误导性，不该该被用于检测浏览器版本。
1九、消息
1)prompt:提示框常常用于提示用户在进入页面前输入某个值。
2)confirm:确认框用于使用户能够验证或者接受某些信息。
3)alert:警告框常常用于确保用户能够获得某些信息。
20、计时事件：经过使用 JavaScript设定时间间隔，时间间隔以后来执行代码，而不是在函数被调用后当即执行。
var t=setTimeout("javascript语句",毫秒);
clearTimeout(t);
2一、JavaScript无类型
1）函数：定义函数时，无返回类型，实现中直接返回值
2）catch:其参数无类型，直接捕获错误
2二、onerror函数：将自定义（参数可变）的函数赋值给onerror,则发生错误时，直接调用该函数(onerror=handleErrFunc--自定义函数名)
2三、额外知识：
1）外部脚本不必定必须包含 <script> 标签
2）在 JavaScript 中，有两种不一样类型的循环，for 循环和 while 循环。
3）在浏览器的状态栏放入一条消息：window.status = "put your message here"
4、JqueryEasyUi
必须引用的css和js（最后放在head标签内）：
<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>
jQuery 函数是 $() 函数。若是您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。jQuery 返回 jQuery 对象，与已传递的 DOM 对象不一样。jQuery 对象拥有的属性和方法，与 DOM 对象的不一样。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。$();里面执行，就是onLoad就执行
加载事件为例：
//javascript function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery"; } onload=myFunction; //jquery function myFunction() { $("#h01").html("Hello jQuery"); } $(document).ready(myFunction);
注：$("#h01").attr("style","color:red").html("Hello jQuery");
一、easyui-tree格式必须以下： 同7
<ul class="easyui-tree"> <li> <span>Foods</span> <ul> <li> <span>Fruits</span> <ul> <li>apple</li> <li>orange</li> </ul> </li> </ul> </li> </ul>
注：给span添加样式，样式结果无效。
二、easyui-accordion格式以下：
<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;">Accordion</h3> <p>Accordion </p> </div> </div>
注：若不引用easyui-accordion,则直接使用data-options = "iconCls:'icon-ok'"失效。
对使用easyui-accordion类的div进行操做：$(#divid).accordion(select|getSelected|getPannelIndex|remove|add)
三、easyui-linkbutton格式以下：
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="JsFunc()">Title</a> <script type="text/javascript"> function JsFunc(){ } </script>
注：1）plain:当True时显示一个普通效果（背景透明）。默认false。
2）设置按钮图标位置：
<div style="margin:10px 0 20px 0"> <span>Select Icon Align: </span> <select onchange="$('#button-bar a').linkbutton({iconAlign:this.value})"> <option value="left">Left</option> <option value="right">Right</option> <option value="top">Top</option> <option value="bottom">Bottom</option> </select> </div> <div id="button-bar"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a> </div>
3）设置属性
按钮不可用：disabled:true;
设置按钮大小：style="width:80px";
图钉状态：toggle:true;
对齐：iconAlign:'top';
按钮背景透明：在引用easyui-plain类的div下,添加plain:true
设置按钮所属组别：group:'g1'
四、easyui-window格式以下:
<div id="w" class="easyui-window" title="Custom Window Tools" data-options="iconCls:'icon-save',minimizable:false,tools:'#tt'" style="width:500px;height:200px;padding:10px;"> The window content. </div> <div id="tt"> <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a> //icon-edit、icon-cut、icon-help </div>
1）调用：onclick="$('#w').window('close')";//open
2）添加工具：data-options="tools:'#divId'"
3）设置为内置窗体：data-options="inline:true"
4）设置为模式窗体：data-options="modal:true,closed:true"
五、easyui-panel格式以下：所属div自带边框
<div class="easyui-panel" style="position:relative;width:500px;height:300px;overflow:auto;"> </div>
0-1）设置默认属性：data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"
0-2）经过按钮操做panel:<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>//panel('close')、panel('expand',true)、panel('collapse',true)
1）fit:当True时设置该面板尺寸适合于它的父容器。默认false。
2）doSize:若是设置为True，该面板将重绘大小，并重建布局。默认true
3）tools:自定义工具栏，每一个工具都包含两个属性:iconCls、handler。
4）href:一个url，加载远程数据并显示在面板中。
5）loadingMessage:当加载远程数据时，在面板中显示一个消息。默认Loading…
6）open:当forceOpen参数设置为true时，面板打开时绕过onBeforeOpen回调函数。
7）close:当forceClose参数设置为true时，该面板关闭时绕过onBeforeClose回调函数。
8）destroy:当forceDestroy参数设置为true时该面板销毁时绕过onBeforeDestroy回调函数。
9）refresh:当href属性设置后刷新该面板以加载远程数据。
10）内嵌panel(nestedpanel)格式：子div设置为easyui-layout类。
<div class="easyui-panel" title="Nested Panel" style="width:700px;height:200px;padding:10px;"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',split:true" style="width:100px;padding:10px"> Left Content </div> <div data-options="region:'east'" style="width:100px;padding:10px"> Right Content </div> <div data-options="region:'center'" style="padding:10px"> Right Content </div> </div> </div>
11）加载工具按钮及实现加载内容：
data-options=" tools:[{ iconCls:'icon-reload', handler:function(){ $('#p').panel('refresh', '_content.html'); } }] "
12）经过标签加载工具：
<div class="easyui-panel" data-options="iconCls:'icon-save',closable:true,tools:'#tt'"> </div> <div id="tt"> <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a> </div>
六、easyui-layout： （子div:data-options="region:'north',split:true"）
1）fit:设置为true设置layout的大小适应父容器大小
2）region：定义 layout panel 位置, 这个值是下面其中的一个: north, south, east, west, center
3）split：True 显示分割条,经过此属性用户能够改变panel的大小.注：为region:center设置split不起做用。
4）panel、collapse、expand、remove参数都是region,而add参数是options{}
5）设置div为layout:$('#divId').layout();
给div添加内容（在region为center的div中）：$('#divId').layout('panel','center').append('<p>More Panel Content.</p>');
删除div内部内容（最后一个<p>段落）：$('#cc').layout('panel','center').find('p:last').remove();
自动设置母div的size：
function setHeight(){ var c = $('#cc'); var p = c.layout('panel','center'); // get the center panel var oldHeight = p.panel('panel').outerHeight(); p.panel('resize', {height:'auto'}); var newHeight = p.panel('panel').outerHeight(); c.height(c.height() + newHeight - oldHeight); c.layout('resize'); }
6）给其内的div加上title则，该div具备折叠功能：<div data-options="region:'south',split:true" style="height:50px;"></div> 加上title="south" ,但 region:'center'除外
7）布局整个页面：将body标签设置为easyui-layout类便可。
<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> </body>
8）div不可折叠：collapsible:false
9）嵌套布局：在布局内部的再布局。即<div class = class="easyui-layout">外布局<div class = class="easyui-layout">嵌套布局</div></div>
七、easyui-tree：
1）引用:<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
其中dnd:true：启用拖拽（drag）和放置（drop）操做。
2）使用 <span> 来组合行内元素，以便经过样式来格式化它们。
3）对树的经常使用操做：collapseAll、 expandAll、getSelected、getChecked; 'find'、'expandTo'、'select'
$('#treeId').tree('collapseAll'); // expandAll、getSelected var node = $('# treeId').tree('find',113); $('#treeId').tree('expandTo',node.target).tree('select',node.target);
4）设置树的复选框（层级、只显示子叶）：cascadeCheck、onlyLeafCheck
$('#tt').tree({cascadeCheck:$(this).is(':checked')}) $('#tt').tree({onlyLeafCheck:$(this).is(':checked')})
5）编辑树
<ul id="tt" class="easyui-tree" data-options=" url: 'tree_data1.json', method: 'get', animate: true, onClick: function(node){ $(this).tree('beginEdit',node.target); } "></ul>
6）给树添加图标
方法1:在要加载的json数据文件中添加（"iconCls":"icon-save"）
[{ "id":1, "text":"My Documents", "children":[{ "id":16, "text":"Actions", "children":[{ "text":"Add", "iconCls":"icon-add" },{ "text":"Remove", "iconCls":"icon-remove" },{ "text":"Save", "iconCls":"icon-save" },{ "text":"Search", "iconCls":"icon-search" }] }] }]
7）经过右击按钮操做树（onContextMenu: function(e,node){}；及对应的操做$('#tt').tree('remove', node.target); // collapse、expand、appand{parent,data}）
<div class="easyui-panel" style="padding:5px"> <ul id="tt" class="easyui-tree" data-options=" url: 'tree_data1.json', method: 'get', animate: true, onContextMenu: function(e,node){ e.preventDefault(); $(this).tree('select',node.target); $('#mm').menu('show',{ left: e.pageX, top: e.pageY }); } "></ul> </div> <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> </div> <script type="text/javascript"> function append(){ var node = $('#tt').tree('getSelected'); $('#tt').tree('append', { parent: (node?node.target:null), data: [{ text: 'new item1' },{ text: 'new item2' }] }); //其余操做： //$('#tt').tree('remove', node.target); // collapse、expand } </script>
8）修改树的显示格式（在data-options=“formatter:function(node){//修改格式return 格式;}”）：
data-options=" url:'tree_data1.json', method:'get', animate:true, formatter:function(node){ var s = node.text; if (node.children){ s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>'; } return s; } "
9）加载过滤（loadFilter:myLoadFilter{(data, parent)}）
<div class="easyui-panel" style="padding:5px"> <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',loadFilter:myLoadFilter"></ul> </div> <script> function myLoadFilter(data, parent){ var state = $.data(this, 'tree'); function setData(){ var serno = 1; var todo = []; for(var i=0; i<data.length; i++){ todo.push(data[i]); } while(todo.length){ var node = todo.shift(); if (node.id == undefined){ node.id = '_node_' + (serno++); } if (node.children){ node.state = 'closed'; node.children1 = node.children; node.children = undefined; todo = todo.concat(node.children1); } } state.tdata = data; } function find(id){ var data = state.tdata; var cc = [data]; while(cc.length){ var c = cc.shift(); for(var i=0; i<c.length; i++){ var node = c[i]; if (node.id == id){ return node; } else if (node.children1){ cc.push(node.children1); } } } return null; } setData(); var t = $(this); var opts = t.tree('options'); opts.onBeforeExpand = function(node){ var n = find(node.id); if (n.children && n.children.length){return} if (n.children1){ var filter = opts.loadFilter; opts.loadFilter = function(data){return data;}; t.tree('append',{ parent:node.target, data:n.children1 }); opts.loadFilter = filter; n.children = n.children1; } }; return data; } </script>
10）animate:true 动画显示；lines:true 添加网格；checkbox:true 添加复选按钮；dnd:true 拖动和下拉
八、easyui-panel ：
九、easyui-datagrid：
1）引用*.json：<th data-options="field:'fieldName'" width="80">fieldText</th>
<table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true"> <thead> <tr> <th data-options="field:'itemid'" width="80">Item ID</th> </tr> </thead> </table>
2）显示行号：rownumbers:true
十、easyui-tabs格式：
<div class="easyui-tabs" data-options="fit:true,border:false,plain:true"> <div title="About" </div> <div title="DataGrid" ></div> </div>
1）经过标签加载tools,并实现添加、删除tab的操做：
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"> </div> <div id="tab-tools"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a> </div> <script type="text/javascript"> var index = 0; function addPanel(){ index++; $('#tt').tabs('add',{ title: 'Tab'+index, content: '<div style="padding:10px">Content'+index+'</div>', closable: true }); } function removePanel(){ var tab = $('#tt').tabs('getSelected'); if (tab){ var index = $('#tt').tabs('getTabIndex', tab); $('#tt').tabs('close', index); } } </script>
2）从下拉列表中选择值设置Tab项的位置：
<select onchange="$('#tt').tabs({tabPosition:this.value})"> <option value="top">Top</option> </select>
3）给tab项设置图标和文本，并限定图标和文本的范围
<div title="<span><img src='images/modem.png'/><br>Modem</span>" style="padding:10px"></div> <style scoped="scoped"> .tt-inner{ display:inline-block; line-height:12px; padding-top:5px; } .tt-inner img{ border:0; } </style>
4）给tab项及子tab添加工具：data-options="tools:'#p-tools'"
注：一个div不能被重复加载。所以要在tab项及子tab同时添加工具，需创建两个div
5）tab页加载文档：data-options="href:'_content.html',closable:true"
6）给tab页也用页面：在div中添加<iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
7）自动调整高度：height:auto
8）在tab主界面上设置data-options="tabWidth:112"，则全部tab默认宽度大小是112；在具体子tab上设置时，以子tab上的设置为准。
9）在tab项上click||hover，弹出下拉菜单
<div id="tt" style="width:700px;height:250px"> <div title="About" style="padding:10px"> <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p> <ul> <li>easyui is a collection of user-interface plugin based on jQuery.</li> <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li> <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li> <li>complete framework for HTML5 web page.</li> <li>easyui save your time and scales while developing your products.</li> <li>easyui is very easy but powerful.</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" style="padding:10px"> This is the help content. </div> </div> <div id="mm"> <div>Welcome</div> <div>Help Contents</div> <div data-options="iconCls:'icon-search'">Search</div> <div>Dynamic Help</div> </div> <script> $(function () { var p = $('#tt').tabs().tabs('tabs')[2]; var mb = p.panel('options').tab.find('a.tabs-inner'); mb.menubutton({ menu: '#mm', iconCls: 'icon-help' }).click(function () { $('#tt').tabs('select', 2); }); }); </script>
将div（含子div）转换为tab，则子div就是tab项：$('#divId').tabs().tabs('tabs')[2]; //将div转化为tab，获取全部tab项中的第3项。
将tab项转换为下拉菜单：
<script> $(function () { var p = $('#tt').tabs().tabs('tabs')[2]; var mb = p.panel('options').tab.find('a.tabs-inner'); mb.menubutton({ menu: '#mm', iconCls: 'icon-help' }).click(function () { $('#tt').tabs('select', 2); }); }); </script>
10）在tab项上hover时，选中该tab项：
<script type="text/javascript"> $(function(){ var tabs = $('#tt').tabs().tabs('tabs'); for(var i=0; i<tabs.length; i++){ tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){ $('#tt').tabs('select', e.data.index); }); } }); </script>
十一、easyui-propertygrid格式：
<table id="tt" class="easyui-propertygrid" data-options=" url: 'propertygrid_data1.json', method: 'get', showGroup: true, fit: true, border: false "> </table>
十二、动态生成combo组件：
<select id="cc" style="width:150px"></select> <div id="sp"> <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div> <div style="padding:10px"> <input type="radio" name="lang" value="01"><span>Java</span><br/> <input type="radio" name="lang" value="02"><span>C#</span><br/> <input type="radio" name="lang" value="03"><span>Ruby</span><br/> <input type="radio" name="lang" value="04"><span>Basic</span><br/> <input type="radio" name="lang" value="05"><span>Fortran</span> </div> </div> <script type="text/javascript"> $(function(){ $('#cc').combo({ required:true, editable:false }); $('#sp').appendTo($('#cc').combo('panel')); $('#sp input').click(function(){ var v = $(this).val(); var s = $(this).next('span').text(); $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel'); }); }); </script>
1三、拖动和调整div的大小：class="easyui-draggable easyui-resizable"
<div id="dd" class="easyui-draggable easyui-resizable" data-options="handle:'#mytitle',minWidth:50,minHeight:50" style="width:200px;height:150px;border:1px solid #ccc"> <div id="mytitle" style="background:#ddd;padding:5px;">Title</div> </div>
1四、easyloader加载日历、对话框、提示消息、网格数据：<script type="text/javascript" src="../../easyloader.js"></script>。必须使用 using('控件如：calendar', function () ){}格式
<script type="text/javascript" src="../../easyloader.js"></script> <script type="text/javascript"> function load1() { //alert("dd"); using('calendar', function () { $('#cc').calendar({ width: 180, height: 180 }); }); } function load2(){ using(['dialog','messager'], function(){ $('#dd').dialog({ title:'Dialog', width:300, height:200 }); $.messager.show({ title:'info', msg:'dialog created' }); }); } function load3(){ using('datagrid', function(){ $('#tt').datagrid({ title:'DataGrid', width:300, height:200, fitColumns:true, columns:[[ {field:'productid',title:'Product ID',width:100}, {field:'productname',title:'Product Name',width:200} ]], data: [ {"productid":"FL-DLH-02","productname":"Persian"}, {"productid":"AV-CB-01","productname":"Amazon Parrot"} ] }); }); } </script>
1五、easyui-menu
1)页面右击绑定指定的菜单
<div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div data-options="iconCls:'icon-save'">Save</div> <div data-options="iconCls:'icon-print',disabled:true">Print</div> <div class="menu-sep"></div> <div>Exit</div> </div> <script> $(function(){ $(document).bind('contextmenu',function(e){ e.preventDefault(); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }); }); </script>
2）自定义菜单子项：
<div class="menu-content" style="text-align:left;padding:10px"> <div style="font-weight:bold;font-size:16px">Select your Language:</div> <ul style="margin:0;padding:0 0 0 40px"> <li><a href="javascript:void(0)">Java</a></li> <li> <span>Other</span> <input> </li> </ul> <div style="padding:10px 0 0 30px"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a> </div> </div>
3）实现按钮点击事件
<div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;"> <div data-options="name:'new'">New</div> </div> <div id="log" class="easyui-panel" title="Event Log" style="height:250px;padding:10px"> function menuHandler(item){ $('#log').prepend('<p>Click Item: '+item.name+'</p>'); }
1六、easyui-calendar
1）经过ID获取对象，在作操做：$('#calendarId').calendar({firstDay:value})
2）设置是否可用：在data-options中设置validator:function(date){//处理：可用返回true;不然，返回false}
<div class="easyui-calendar" style="width:250px;height:250px;" data-options=" validator: function(date){ if (date.getDay() == 1){ return true; } else { return false; } } "></div>
3）修改格式：在data-options中设置formatter:formatDay(date){return 新格式day}
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div> <script> var d1 = Math.floor((Math.random()*30)+1); var d2 = Math.floor((Math.random()*30)+1); function formatDay(date){ var m = date.getMonth()+1; var d = date.getDate(); var opts = $(this).calendar('options'); if (opts.month == m && d == d1){ return '<div class="icon-ok md">' + d + '</div>'; } else if (opts.month == m && d == d2){ return '<div class="icon-search md">' + d + '</div>'; } return d; } </script> <style scoped="scoped"> .md{ height:16px; line-height:16px; background-position:2px center; text-align:right; font-weight:bold; padding:0 2px; color:red; } </style>
1七、easyui-combobox格式以下：
<select class="easyui-combobox" name="state" style="width:200px;"> <option value="AL">Alabama</option> </select>
1）经常使用操做：$('#cmbbId').combobox('disable'); //disable\enable\getValue、setValue{value}
function setvalue(){ $.messager.prompt('SetValue','Please input the value(CO,NV,UT,etc):',function(v){ if (v){ $('#state').combobox('setValue',v); } }); }
2）修改项的显示格式：经过设置data-options的formatter: formatItem{(row){return 文本及格式}}实现
<input class="easyui-combobox" name="language" data-options=" url: 'combobox_data1.json', method: 'get', valueField: 'id', //值 textField: 'text', //显示 panelWidth: 350, panelHeight: 'auto', formatter: formatItem "> <script type="text/javascript"> function formatItem(row){ var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' + '<span style="color:#888">' + row.desc + '</span>'; return s; } </script>
3）经过加载json中的数据来初始化值，必须设定valueField: 'id', //值 和 textField: 'text', //显示
$('#cmbbId').combobox('reload', 'combobox_data1.json') //加载数据 data-options="valueField:'id',textField:'text'" //制定valueField和textField
4）下拉列框中设置组别：经过设置data-options的groupField:'group'实现。其中group为json文件中的一字段
5）选择多项：multiple:true；高度自定义：panelHeight:'auto；selectOnNavigation：用于设置使用键盘导航选项时是否选中当前项，默认为true ($('#cmbbId').combobox({selectOnNavigation:true|false}))
6）使用JSONP从远程站点检索数据：data-options="loader: ldFunc,mode: 'remote',valueField: 'id',textField: 'name'"
var ldFunc = function(param,success,error){ var q = param.q || ''; if (q.length <= 1){return false} $.ajax({ url: 'http://ws.geonames.org/searchJSON', dataType: 'jsonp', data: { featureClass: "P", style: "full", maxRows: 20, name_startsWith: q }, success: function(data){ var items = $.map(data.geonames, function(item){ return { id: item.geonameId, name: item.name + (item.adminName1 ? ', ' + item.adminName1 : '') + ', ' + item.countryName }; }); success(items); }, error: function(){ error.apply(this, arguments); } }); }
注：引用文件（html）用：href；引用网址（php）用：src；引用数据文件（json）用url。
$.ajax({url: 'http://ws.geonames.org/searchJSON');
1八、easyui-combogrid（加载并设置其显示格式）:
<select class="easyui-combogrid" style="width:250px" data-options=" panelWidth: 500, idField: 'itemid', textField: 'productname', url: 'datagrid_data1.json', method: 'get', columns: [[ {field:'itemid',title:'Item ID',width:80}, {field:'productname',title:'Product',width:120}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:200}, {field:'status',title:'Status',width:60,align:'center'} ]], fitColumns: true "> </select>
1） 初始化值：法1：在select标签中设置value="fieldIdValue";
法2:$('#cmbgId').combogrid('setValue', 'fieldidValue');
2）经常使用操做：$('#cmbgId').combogrid('getValue'); //disable\enable;
3）在data-options中的设置：multiple: true;//多选（最左侧出现复选框）
4）经过复选框设置点击键盘上下时，是否选中当前项<input type="checkbox" checked onchange="$('#cmbgId').combogrid({selectOnNavigation:$(this).is(':checked')})">
1九、easyui-combotree:
1）初始化 法1:value="idValue";法2:$('#cmbtId').combotree('setValue', 'idValue');
2）设置data-options的项：required:true//必须输入值
3）添加复选框：在<select>标签中 加入 multiple 便可；
4）经过复选框设置是否可迭代。
<input type="checkbox" checked onclick="$('#cmbtId').combotree({cascadeCheck:$(this).is(':checked')})">
5）经常使用操做：$('#cmbtId').combotree('getValue'); //disable\enable;
20、easyui-datebox
1）必须输入值及对输入的值进行验证：
<input class="easyui-datebox" required data-options="validType:'md[\'10/11/2012\']'"></input> <script> $.extend($.fn.validatebox.defaults.rules, { md: { validator: function(value, param){ var d1 = $.fn.datebox.defaults.parser(param[0]); var d2 = $.fn.datebox.defaults.parser(value); return d2<=d1; }, message: 'The date must be less than or equals to {0}.' } }) </script>
2）多个datebox组件共享日历：将 data-options中设置"sharedCalendar:'#calendarId'"
3）添加onSelect事件：data-options="onSelect:onSelectFunc" 具体：function onSelectFunc(date){...}
4）格式转换及将dateBox内容转化为日期：formatter:myformatter,parser:myparser
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input> <script type="text/javascript"> function myformatter(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d); } function myparser(s){ if (!s) return new Date(); var ss = (s.split('-')); var y = parseInt(ss[0],10); var m = parseInt(ss[1],10); var d = parseInt(ss[2],10); if (!isNaN(y) && !isNaN(m) && !isNaN(d)){ return new Date(y,m-1,d); } else { return new Date(); } } </script>
5）在日期下面添加按钮：
<input class="easyui-datebox" data-options="buttons:buttons"></input> <script> var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: 'MyBtn', handler: function(target){ alert('click MyBtn'); } }); </script>
2一、easyui-datetimebox：
1）是否显示秒：showSeconds 初始化值：value
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})"> <input id="dt" class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width:200px">
2二、easyui-draggable
1）onDrag事件：data-options="onDrag:onDragFunc"
每次移动指定距离：
<div class="easyui-panel" style="position:relative;overflow:hidden;width:500px;height:300px"> <div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;"> </div> </div> <script> function onDrag(e){ var d = e.data; d.left = repair(d.left); d.top = repair(d.top); function repair(v){ var r = parseInt(v/20)*20; if (Math.abs(v % 20) > 10){ r += v > 0 ? 20 : -20; } return r; } } </script>
限制可拖动范围：
function onDrag(e){ var d = e.data; if (d.left < 0){d.left = 0} if (d.top < 0){d.top = 0} if (d.left + $(d.target).outerWidth() > $(d.parent).width()){ d.left = $(d.parent).width() - $(d.target).outerWidth(); } if (d.top + $(d.target).outerHeight() > $(d.parent).height()){ d.top = $(d.parent).height() - $(d.target).outerHeight(); } }
仅移动到标题可拖动：
<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px"> <div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div> </div>
2三、easyui-droppable
1）div能够拖动，并显示拖动信息：
<div class="dragitem">Apple</div> $(function(){ $('.dragitem').draggable({ revert:true, deltaX:10, deltaY:10, proxy:function(source){ var n = $('<div class="proxy"></div>'); n.html($(source).html()).appendTo('body'); return n; } }); });
2）在data-options中设置接受的div及相关事件
data-options=" accept: '.dragitem', onDragEnter:function(e,source){ $(this).html('enter'); }, onDragLeave: function(e,source){ $(this).html('leave'); }, onDrop: function(e,source){ $(this).html($(source).html() + ' dropped'); } ">
3）代码实现div可移动并实现进入、离开等相关事件及添加删除样式
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;"> drag me! <div id="d1" class="drag">Drag 1</div> <div id="d2" class="drag">Drag 2</div> <div id="d3" class="drag">Drag 3</div> </div> <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;"> drop here! </div> <div style="clear:both"></div> <style type="text/css"> .drag{ width:100px; height:50px; padding:10px; margin:5px; border:1px solid #ccc; background:#AACCFF; } .dp{ opacity:0.5; filter:alpha(opacity=50); } .over{ background:#FBEC88; } </style> <script> $(function(){ $('.drag').draggable({ proxy:'clone', revert:true, cursor:'auto', onStartDrag:function(){ $(this).draggable('options').cursor='not-allowed'; $(this).draggable('proxy').addClass('dp'); }, onStopDrag:function(){ $(this).draggable('options').cursor='auto'; } }); $('#target').droppable({ accept:'#d1,#d3', onDragEnter:function(e,source){ $(source).draggable('options').cursor='auto'; $(source).draggable('proxy').css('border','1px solid red'); $(this).addClass('over'); }, onDragLeave:function(e,source){ $(source).draggable('options').cursor='not-allowed'; $(source).draggable('proxy').css('border','1px solid #ccc'); $(this).removeClass('over'); }, onDrop:function(e,source){ $(this).append(source) $(this).removeClass('over'); } }); }); </script>
4）添加指示器并日后移动
$(function(){ var indicator = $('<div class="indicator">>></div>').appendTo('body'); $('.drag-item').draggable({ revert:true, deltaX:0, deltaY:0 }).droppable({ onDragOver:function(e,source){ indicator.css({ display:'block', left:$(this).offset().left-10, top:$(this).offset().top+$(this).outerHeight()-5 }); }, onDragLeave:function(e,source){ indicator.hide(); }, onDrop:function(e,source){ $(source).insertAfter(this); indicator.hide(); } }); });
2四、easyui-validatebox：validType有'email'、'url'、'length[min,max]'
<input class="easyui-validatebox textbox" data-options="prompt:'Enter User Name.',required:true,validType:'length[3,10]'"> $(function(){ $('input.easyui-validatebox').validatebox({ tipOptions: { // the options to create tooltip showEvent: 'mouseenter', hideEvent: 'mouseleave', showDelay: 0, hideDelay: 0, zIndex: '', onShow: function(){ if (!$(this).hasClass('validatebox-invalid')){ if ($(this).tooltip('options').prompt){ $(this).tooltip('update', $(this).tooltip('options').prompt); } else { $(this).tooltip('tip').hide(); } } else { $(this).tooltip('tip').css({ color: '#000', borderColor: '#CC9933', backgroundColor: '#FFFFCC' }); } }, onHide: function(){ if (!$(this).tooltip('options').prompt){ $(this).tooltip('destroy'); } } } }).tooltip({ position: 'right', content: function(){ var opts = $(this).validatebox('options'); return opts.prompt; }, onShow: function(){ $(this).tooltip('tip').css({ color: '#000', borderColor: '#CC9933', backgroundColor: '#FFFFCC' }); } }); });
2五、easyui-timespinner时间微调器和easyui-numberspinner数字微调器：
1）经常使用操做：$('#tpID').timespinner('setValue', '09:45');//getValue\disable\enable
2）设置上下限：在data-options中设置"min:'08:30',max:'18:00'"
3）在data-options中处理onchange事件：onChange: function(value){$('#vv').text(value);}
4）easyui-numberspinner数字微调器初始化值：value="100"；在data-options中设置自动递增阶：increment:100
2六、easyui-searchbox：
1）在data-options中设置提示消息、菜单和对应的搜索操做：
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px"></input> <div id="mm"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div> <script> function doSearch(value,name){ alert('You input: ' + value+'('+name+')'); } </script>
2七、easyui-splitbutton 和 easyui-menubutton 二者前者仅将鼠标移动到下拉按钮时弹出下拉菜单。
1）分隔符:<div class="menu-sep"></div>
2）$('#splitbtnID').splitbutton('disable')
3）对齐：<a href="#" class="easyui-menubutton" >Edit</a>
$('a.easyui-menubutton').menubutton({menuAlign: left})
2八、easyui-progressbar：显示进度框
<div id="pgb" class="easyui-progressbar" style="width:400px;"></div> <script> $(function start(){ var value = $('#pgb').progressbar('getValue'); if (value < 100){ value += Math.floor(Math.random() * 10); $('#pgb').progressbar('setValue', value); setTimeout(arguments.callee, 200); } }); </script>
2九、easyui-numberbox：precision="2"表示精度为2，prefix:'$'前缀，suffix:'€'后缀，groupSeparator:','组分隔符,decimalSeparator:'.'小数分隔符（$1,234,567.89），min:10最小值,max:90最大值,required:true必须输入值
30、Message：
1）经常使用显示消息：$.messager.show({title:'Title',msg:'Message.',timeout:0,showType:'fade'});//show、slide
2）进度消息：
function progress(){ var win = $.messager.progress({ title:'Please waiting', msg:'Loading data...' }); setTimeout(function(){ $.messager.progress('close'); },5000) }
3）$.messager.alert('Title',' message!');//能够加第三参数：'error'、'info'、'question'、'warning'
4）交互消息：$.messager.confirm('','',func(val){});\$.messager.prompt('','',func(val){});
5）设置显示位置：
//默认右下角 $.messager.show({ title:'My Title', msg:'The message content', showType:'show' }); //{}中添加style以下： //上左显示 style:{ right:'', left:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } //上中显示 style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } //上右显示 style:{ left:'', right:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } //中左显示 style:{ left:0, right:'', bottom:'' } //中中显示 style:{ right:'', bottom:'' } //中右显示 style:{ left:'', right:0, bottom:'' } //下左显示 style:{ left:0, right:'', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop } //下中显示 style:{ right: '', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop }
3一、easyui-slider：showTip:true添加提示；rule: [0,'|',25,'|',50,'|',75,'|']添加刻度；mode: 'v'垂直显示，默认水平；reversed: true逆向；
1）改变提示信息：在data-options中设置tipFormatter: function(value){return value+'px';}便可。
2）若改变值触发onChange事件：onChange: function(value){$('#ff').css('font-size', value);}">
3）转换converter：在data-options中设置
converter:{ toPosition:function(value,size){ var opts = $(this).slider('options'); return Math.asin(value/opts.max)/(Math.PI)*2*size; }, toValue:function(pos,size){ var opts = $(this).slider('options'); return Math.sin(pos/size*Math.PI/2)*opts.max; } }, onChange:function(v){ var opts = $(this).slider('options'); var pos = opts.converter.toPosition.call(this, v, opts.width); var p = $('<div class=point></div>').appendTo('#cc'); p.css('top', v); p.css(opts.reversed?'right':'left', pos); }
3二、easyui-tooltip：
1）文本提示：<a href="#" title="tooltip message." class="easyui-tooltip">Hover me</a>
2）提示对话框（页面）：
<div style="padding:10px 200px"> <p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog. </div> <script> $(function(){ $('#dd').tooltip({ content: $('<div></div>'), showEvent: 'click', onUpdate: function(content){ content.panel({ width: 200, border: false, title: 'Login', href: '_dialog.html' }); }, onShow: function(){ var t = $(this); t.tooltip('tip').unbind().bind('mouseenter', function(){ t.tooltip('show'); }).bind('mouseleave', function(){ t.tooltip('hide'); }); } }); }); </script>
3）提示工具栏：
<a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options=" hideEvent: 'none', content: function(){ return $('#toolbar'); }, onShow: function(){ var t = $(this); t.tooltip('tip').focus().unbind().bind('blur',function(){ t.tooltip('hide'); }); } ">Hover me</a>
4）改变提示消息弹出位置：function changePosition(pos){$('#ttId').tooltip({position: pos});}
5）标记页数提示：$('#divId').pagination();
<div class="easyui-panel"> <div id="pg" data-options="total:114"></div> </div> <script> $(function(){ $('#pg').pagination().find('a.l-btn').tooltip({ content: function(){ var cc = $(this).find('span.l-btn-icon').attr('class').split(' '); var icon = cc[1].split('-')[1]; return icon + ' page'; } }); }); </script>
6）自定义提示信息：
$('#pp2').tooltip({ position: 'bottom', content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#fff000', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' }); }, onPosition: function(){ $(this).tooltip('tip').css('left', $(this).offset().left); $(this).tooltip('arrow').css('left', 20); } });
7）经过AJAX来显示工具提示内容
<a href="#" class="easyui-tooltip" data-options=" content: $('<div></div>'), onShow: function(){ $(this).tooltip('arrow').css('left', 20); $(this).tooltip('tip').css('left', $(this).offset().left); }, onUpdate: function(cc){ cc.panel({ width: 500, height: 'auto', border: false, href: '_content.html' }); } ">Hove me</a>
3三、easyui-pagination格式以下：
1）<div class="easyui-pagination" data-options="total: 114,showPageList: false,showRefresh: false,displayMsg: '',layout:['list','sep','first','prev','links','next','last','sep','refresh'],,buttons:$('#buttons')"></div>
2）设置buttons的另外一方法：经过脚本
<div class="easyui-panel"> <div class="easyui-pagination" data-options="total:114,buttons:buttons"></div> </div> <script> var buttons = [{ iconCls:'icon-add', handler:function(){ alert('add'); } },{ iconCls:'icon-cut', handler:function(){ alert('cut'); } },{ iconCls:'icon-save', handler:function(){ alert('save'); } }]; </script>
3）动态设定显示页码的格式：
<div class="easyui-panel"> <div id="pp" class="easyui-pagination" data-options=" total:114, layout:['first','prev','next','last'] "></div> </div> <div style="margin-top:10px"> <select onchange="setLayout(this.value)"> <option value="1">Previous Next</option> <option value="2">Manual Page Input</option> <option value="3">Numeric Links</option> <option value="4">Previous Links Next</option> <option value="5">Go To Page</option> </select> </div> <script> function setLayout(type){ var p = $('#pp'); switch(parseInt(type)){ case 1: p.pagination({layout:['first','prev','next','last']}); break; case 2: p.pagination({ layout:['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh'], beforePageText:'Page', afterPageText:'of {pages}' }); break; case 3: p.pagination({layout:['links']}); break; case 4: p.pagination({layout:['first','prev','links','next','last']}); break; case 5: p.pagination({ layout:['first','prev','next','last','sep','links','sep','manual'], beforePageText:'Go Page', afterPageText:'' }); break; } } </script>
3四、form:
1）、经常使用操做：$('#formId').form('submit');//clear
$('#formId').form('load', 'form_data1.json');
$('#ff').form('load'{name:'myname',email:'mymail@gmail.com',
subject:'subject',message:'message',language:'en'});
3五、easyui-dialog：title、$('#dlgId').dialog('open');//close
1）添加工具和按钮：在data-options中设置toolbar: '#dlg-toolbar',buttons: '#dlg-buttons'
或直接设置工具和按钮 toolbar:[{text:' ',iconCls:' ',handle:function(){}}]
toolbar: [{ text:'Add', iconCls:'icon-add', handler:function(){ alert('add') } },'-',{ text:'Save', iconCls:'icon-save', handler:function(){ alert('save') } }], buttons: [{ text:'Ok', iconCls:'icon-ok', handler:function(){ alert('ok'); } },{ text:'Cancel', handler:function(){ alert('cancel');; } }]
3六、easyui-propertygrid：data-options="url:'pg.json',method:'get',showGroup:true,scrollbarSize:0">
1）经常使用操做：$('#pg').propertygrid({showGroup:true});//showHeader:true
2）获取属性改变的值：$('#pg').propertygrid('getChanges');
function getChanges(){ var s = ''; var rows = $('#pg').propertygrid('getChanges'); for(var i=0; i<rows.length; i++){ s += rows[i].name + ':' + rows[i].value + ','; } alert(s) }
3）设置组的样式：在data-options中设置groupFormatter: groupFormatter
function groupFormatter(fvalue, rows){ return fvalue + ' - <span style="color:red">' + rows.length + ' rows</span>'; }
4）自定义字段：在data-options中设置columns: mycolumns
var mycolumns = [[ {field:'name',title:'MyName',width:100,sortable:true}, {field:'value',title:'MyValue',width:100,resizable:false} ]];
3七、easyui-treegrid格式：showFooter:true 显示表尾；
<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px" data-options=" url: 'treegrid_data1.json', method: 'get', rownumbers: true, idField: 'id', treeField: 'name' "> <thead> <tr> <th data-options="field:'name'" width="220">Name</th> <th data-options="field:'size'" width="100" align="right">Size</th> <th data-options="field:'date'" width="150">Modified Date</th> </tr> </thead> </table>
1）依据脚本加载Json数据文件实现树：
<table id="tg"></table> <script type="text/javascript"> $(function(){ $('#tg').treegrid({ title:'TreeGrid with Footer', iconCls:'icon-ok', width:700, height:250, rownumbers: true, animate:true, collapsible:true, fitColumns:true, url:'treegrid_data2.json', method: 'get', idField:'id', treeField:'name', showFooter:true, columns:[[ {title:'Task Name',field:'name',width:180}, {field:'persons',title:'Persons',width:60,align:'right'}, {field:'begin',title:'Begin Date',width:80}, {field:'end',title:'End Date',width:80}, {field:'progress',title:'Progress',width:120, formatter:function(value){ if (value){ var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>' '</div>'; return s; } else { return ''; } } } ]] }); }) </script>
2）可编辑项及脚本代码设置列显示格式：在字段的data-options中设置editor:'text'//numberbox\datebox
$('#tg').treegrid('getSelected');//getChildren\getFooterRows、collapseAll、expandAll
$('#tg').treegrid('select', editingId);//beginEdit\endEdit\cancelEdit\remove\collapse\expand、expandTo
$('#tg').treegrid('append',{parent: node.id,data: [{id: idIndex}]})
$('#tg').treegrid('expandTo',21).treegrid('select',21);
<table id="tg" class="easyui-treegrid" title="Editable TreeGrid" style="width:700px;height:250px" data-options=" iconCls: 'icon-ok', rownumbers: true, animate: true, collapsible: true, fitColumns: true, url: 'treegrid_data2.json', method: 'get', idField: 'id', treeField: 'name', showFooter: true "> <thead> <tr> <th data-options="field:'name',width:180,editor:'text'">Task Name</th> <th data-options="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th> <th data-options="field:'begin',width:80,editor:'datebox'">Begin Date</th> <th data-options="field:'end',width:80,editor:'datebox'">End Date</th> <th data-options="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">Progress</th> </tr> </thead> </table> <script type="text/javascript"> function formatProgress(value){ if (value){ var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>' '</div>'; return s; } else { return ''; } } var editingId; function edit(){ if (editingId != undefined) { alert(editingId); $('#tg').treegrid('select', editingId); return; } var row = $('#tg').treegrid('getSelected'); if (row){ editingId = row.id $('#tg').treegrid('beginEdit', editingId); } } function save(){ if (editingId != undefined){ var t = $('#tg'); t.treegrid('endEdit', editingId); editingId = undefined; var persons = 0; var rows = t.treegrid('getChildren'); for(var i=0; i<rows.length; i++){ var p = parseInt(rows[i].persons); if (!isNaN(p)){ persons += p; } } var frow = t.treegrid('getFooterRows')[0]; frow.persons = persons; t.treegrid('reloadFooter'); } } function cancel(){ if (editingId != undefined){ $('#tg').treegrid('cancelEdit', editingId); editingId = undefined; } } </script>
3）使用TreeGrid显示复杂的报告：
<table title="Reports using TreeGrid" class="easyui-treegrid" style="width:700px;height:250px" data-options=" url: 'treegrid_data3.json', method: 'get', rownumbers: true, showFooter: true, idField: 'id', treeField: 'region' "> <thead frozen="true"> <tr> <th field="region" width="200">Region</th> </tr> </thead> <thead> <tr> <th colspan="4">2009</th> <th colspan="4">2010</th> </tr> <tr> <th field="f1" width="60" align="right">1st qrt.</th> <th field="f2" width="60" align="right">2st qrt.</th> <th field="f3" width="60" align="right">3st qrt.</th> <th field="f4" width="60" align="right">4st qrt.</th> <th field="f5" width="60" align="right">1st qrt.</th> <th field="f6" width="60" align="right">2st qrt.</th> <th field="f7" width="60" align="right">3st qrt.</th> <th field="f8" width="60" align="right">4st qrt.</th> </tr> </thead> </table>
4）右击树显示弹出菜单：在data-options中设置onContextMenu: onContextMenu{(e,row)}
function onContextMenu(e,row){ e.preventDefault(); $(this).treegrid('select', row.id); $('#mm').menu('show',{ left: e.pageX, top: e.pageY }); } var idIndex = 100; function append(){ idIndex++; var d1 = new Date(); var d2 = new Date(); d2.setMonth(d2.getMonth()+1); var node = $('#tg').treegrid('getSelected'); $('#tg').treegrid('append',{ parent: node.id, data: [{ id: idIndex, name: 'New Task'+idIndex, persons: parseInt(Math.random()*10), begin: $.fn.datebox.defaults.formatter(d1), end: $.fn.datebox.defaults.formatter(d2), progress: parseInt(Math.random()*100) }] }) }
5）标记页数：在data-options中设置loadFilter: pagerFilter,pagination: true,pageSize: 2,pageList: [2,5,10]
其中pagerFilter实现了分页：
function pagerFilter(data){ if ($.isArray(data)){ // is array data = { total: data.length, rows: data } } var dg = $(this); var state = dg.data('treegrid'); var opts = dg.treegrid('options'); var pager = dg.treegrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.treegrid('loadData',data); } }); if (!data.topRows){ data.topRows = []; data.childRows = []; for(var i=0; i<data.rows.length; i++){ var row = data.rows[i]; row._parentId ? data.childRows.push(row) : data.topRows.push(row); } data.total = (data.topRows.length); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows)); return data; }
注：$.fn.datebox.defaults.formatter(new Date())
3八、easyui-datagrid：
1）在data-options中的设置："singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'"
2）在<th>标签中设置align:'right',halign:'center'表示全部的行中的该列右对齐、表头居中。
3）编辑单元格：在data-options中的设置onClickCell: onClickCell{(index, field)}；在没个表头列中指定editor{text\{type:'numberbox',options:{precision:1}}\editor:{type:'checkbox',options:{on:'P',off:''}}};修改单元格的脚本代码：
<script type="text/javascript"> $.extend($.fn.datagrid.methods, { editCell: function(jq,param){ return jq.each(function(){ var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields')); for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field){ col.editor = null; } } $(this).datagrid('beginEdit', param.index); for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field){ if (endEditing()){ $('#dg').datagrid('selectRow', index) .datagrid('editCell', {index:index,field:field}); editIndex = index; } } </script>
4）将普通的表转换为datagrid：javascript:$('#dg').datagrid()
5）添加工具栏：在data-options中的设置toolbar:toolbar1或toolbar: '#tbdiv',便可。具体toolbar1以下：
var toolbar1 = [{text:'Add',iconCls:'icon-add',handler:function(){alert('add')}}];
7）设置多选并获取全部项：$('#dg').datagrid({singleSelect:false});//getSelections\getSelection、getPanel
function getSelections(){ var ss = []; var rows = $('#dg').datagrid('getSelections'); for(var i=0; i<rows.length; i++){ var row = rows[i]; ss.push('<span>'+row.itemid+":"+row.productid+":"+row.attr1+'</span>'); } $.messager.alert('Info', ss.join('<br/>')); }
8）设置修改数据网格的格式：在data-options中的设置rowStyler: function具体以下：
rowStyler: function(index,row){ if (row.listprice < 30){ return 'background-color:#6293BB;color:#fff;font-weight:bold;'; }
9）修改边框：主要是设置border-right、border-bottom是否透明（1px dotted transparent）。具体以下：
<script type="text/javascript"> function changeBorder(cls){ $('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls); } </script> <style type="text/css"> .lines-both .datagrid-body td{ } .lines-no .datagrid-body td{ border-right:1px dotted transparent; border-bottom:1px dotted transparent; } .lines-right .datagrid-body td{ border-bottom:1px dotted transparent; } .lines-bottom .datagrid-body td{ border-right:1px dotted transparent; } </style>
10）设置斑马纹striped:在data-options中的设置striped: true便可。
11）设置单元格的样式：在标题字段中设置styler:cellStyler{（value,row,index）}。好比：
<th data-options="field:'listprice',width:80,align:'right',styler:cellStyler">List Price</th> function cellStyler(value,row,index){ if (value < 30){ return 'background-color:#ffee00;color:red;'; } }
12）点击行时行状态变为编辑行：在data-options中的设置onClickRow: onClickRow{（index）}。好比：
<script type="text/javascript"> var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); var productname = $(ed.target).combobox('getText'); $('#dg').datagrid('getRows')[editIndex]['productname'] = productname; $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickRow(index){ if (editIndex != index){ if (endEditing()){ $('#dg').datagrid('selectRow', index) .datagrid('beginEdit', index); editIndex = index; } else { $('#dg').datagrid('selectRow', editIndex); } } } </script>
13）对行的经常使用操做：$('#dg').datagrid('selectRow', editIndex);//validateRow\beginEdit\endEdit\cancelEdit\deleteRow，appendRow，getRows、acceptChanges、rejectChanges、getChanges。。具体以下：
function append(){ if (endEditing()){ $('#dg').datagrid('appendRow',{status:'P'}); editIndex = $('#dg').datagrid('getRows').length-1; $('#dg').datagrid('selectRow', editIndex) .datagrid('beginEdit', editIndex); } } function removeit(){ if (editIndex == undefined){return} $('#dg').datagrid('cancelEdit', editIndex) .datagrid('deleteRow', editIndex); editIndex = undefined; } function accept(){ if (endEditing()){ $('#dg').datagrid('acceptChanges'); } } function reject(){ $('#dg').datagrid('rejectChanges'); editIndex = undefined; } function getChanges(){ var rows = $('#dg').datagrid('getChanges'); alert(rows.length+' rows are changed!'); }
14）设置单元格的格式化，并在编辑单元格式加载文本数据供选择：formatter：，editor:{}。
<th data-options="field:'productid',width:100, formatter:function(value,row){ return row.productname; }, editor:{ type:'combobox', options:{ valueField:'productid', textField:'productname', url:'products.json', required:true } }">Product</th>
15）合并单元格：在data-options中的设置onLoadSuccess: onLoadSuccess{（data）}。mergeCells具体以下：
<script type="text/javascript"> function onLoadSuccess(data){ var merges = [{ index: 2, rowspan: 2 },{ index: 5, rowspan: 2 },{ index: 7, rowspan: 2 }]; for(var i=0; i<merges.length; i++){ $(this).datagrid('mergeCells',{ index: merges[i].index, field: 'productid', rowspan: merges[i].rowspan }); } } </script>
16）冻结的列和行：
在表头中的data-options中设置frozen:true,而后将要冻结的列放进去。具体以下：
<thead data-options="frozen:true"> <tr> <th data-options="field:'itemid',width:100">Item ID</th> </tr> </thead> <thead> <tr> <th data-options="field:'listprice',width:90,align:'right'">List Price</th> </tr> </thead>
在表的data-options中设置onLoadSuccess: function(){
$(this).datagrid('freezeRow',0).datagrid('freezeRow',1);}
17）多字段排序：在表的data-options中设置remoteSort:false,multiSort:true；而且在要进行排序的标题头中的data-options中设置sortable:true便可。
注：remoteSort为false表示前端排序也就是页面排序，这种方式下EasyUI不请求服务器，并且将DataGrid中当前页的数据在页面上利用js脚原本对选定的字段进行排序。
18）表尾显示信息：在表的data-options中设置showFooter: true
19）表头中设置组：rowspan、colspan及<tr>的逻辑
<thead>
<tr>
<th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>
<th data-options="field:'productid',width:100" rowspan="2">Product</th>
<th colspan="4">Item Details</th>
</tr>
<tr>
<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:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
20）右击表头列弹出菜单选择是否显示该列：hideColumn、showColumn、getColumnFields、getColumnOption
<table id="dg"></table> <script type="text/javascript"> $(function(){ $('#dg').datagrid({ url: 'datagrid_data1.json', method: 'get', title: 'Context Menu on DataGrid', iconCls: 'icon-save', width: 700, height: 250, fitColumns: true, singleSelect: true, columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'productid',title:'Product ID',width:120}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:250}, {field:'status',title:'Status',width:60,align:'center'} ]], onHeaderContextMenu: function(e, field){ e.preventDefault(); if (!cmenu){ createColumnMenu(); } cmenu.menu('show', { left:e.pageX, top:e.pageY }); } }); }); var cmenu; function createColumnMenu(){ cmenu = $('<div/>').appendTo('body'); cmenu.menu({ onClick: function(item){ if (item.iconCls == 'icon-ok'){ $('#dg').datagrid('hideColumn', item.name); cmenu.menu('setIcon', { target: item.target, iconCls: 'icon-empty' }); } else { $('#dg').datagrid('showColumn', item.name); cmenu.menu('setIcon', { target: item.target, iconCls: 'icon-ok' }); } } }); var fields = $('#dg').datagrid('getColumnFields'); for(var i=0; i<fields.length; i++){ var field = fields[i]; var col = $('#dg').datagrid('getColumnOption', field); cmenu.menu('appendItem', { text: col.title, name: field, iconCls: 'icon-ok' }); } } </script>
22）数据网格左侧显示复选框：添加<th data-options="field:'ck',checkbox:true"></th>便可。若设置selectOnCheck：true,checkOnSelect:ture则选择行与复选框连动。
23）分页页码：在表的data-options中设置pagination: true便可实现。
在数据网格页中的页码框中添加按钮：
<script type="text/javascript"> $(function(){ var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid pager.pagination({ buttons:[{ iconCls:'icon-search', handler:function(){ alert('search'); } },{ iconCls:'icon-add', handler:function(){ alert('add'); } },{ iconCls:'icon-edit', handler:function(){ alert('edit'); } }] }); }) </script>
设置loadFilter:pagerFilter，pagerFilter的具体代码以下：
function getData(){ var rows = []; for(var i=1; i<=800; i++){ var amount = Math.floor(Math.random()*1000); var price = Math.floor(Math.random()*1000); rows.push({ inv: 'Inv No '+i, date: $.fn.datebox.defaults.formatter(new Date()), name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return rows; } function pagerFilter(data){ if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.datagrid('loadData',data); } }); if (!data.originalRows){ data.originalRows = (data.rows); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } $(function(){ $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData()); });
24）在数据网格页码添加复杂工具条：在表的data-options中设置toolbar:'#tb'便可实现。#tb具体以下：
<div id="tb" style="padding:5px;height:auto"> <div style="margin-bottom:5px"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a> </div> <div> Date From: <input class="easyui-datebox" style="width:80px"> To: <input class="easyui-datebox" style="width:80px"> Language: <select class="easyui-combobox" panelHeight="auto" style="width:100px"> <option value="java">Java</option> <option value="c">C</option> <option value="basic">Basic</option> <option value="perl">Perl</option> <option value="python">Python</option> </select> <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a> </div> </div>
5、Json
1）树(tree)格式：
格式1:
[{ "id":1, "text":"My Documents", "state":"closed", "attributes":{ "p1":"Custom Attribute1", "p2":"Custom Attribute2" } "children":[{ "id":11, "text":"Photos", "state":"closed" }] }]
格式2:
{"total":7,"rows":[
{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]}
2）网格（datagrid）格式：
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{...}
]}
带表尾的数据格式：
{"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}
],"footer":[
{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
]}
3）属性网格(propertygrid)格式:
{"total":7,"rows":[
{"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
"type":"validatebox",
"options":{
"validType":"email"
}
}},
{"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{
"type":"checkbox",
"options":{
"on":true,
"off":false
}
}}
]}
4）easyui-combobox格式：
[{ "id":1, "text":"Java", "desc":"Write once, run anywhere" "group":"编程语言" //分红若干组 }]
5）easyui-propertygrid格式：
{"total":7,"rows":[
{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
"type":"validatebox",
"options":{
"validType":"email"
}
}}
]}
6）from格式：
{ "name":"easyui", "email":"easyui@gmail.com", "subject":"Subject Title", "message":"Message Content", "language":"de" }
- 1. 界面设计
- 2. web界面设计
- 3. WebGis设计界面
- 4. XAML界面设计
- 5. UI 界面设计
- 6. GUI界面设计
- 7. Pyqt5 界面设计
- 8. C#界面设计
- 9. MOSS界面设计
- 10. 关于ATM的emwin界面设计 剩余界面设计
- 更多相关文章...
- • Web 创建设计 - 网站建设指南
- • 移动设备 统计 - 浏览器信息
- • IntelliJ IDEA代码格式化设置
- • 使用Rxjava计算圆周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 界面设计
- 2. web界面设计
- 3. WebGis设计界面
- 4. XAML界面设计
- 5. UI 界面设计
- 6. GUI界面设计
- 7. Pyqt5 界面设计
- 8. C#界面设计
- 9. MOSS界面设计
- 10. 关于ATM的emwin界面设计 剩余界面设计