├── .gitattributes ├── .gitignore ├── .nojekyll ├── LICENSE.md ├── README.md ├── build.cmd ├── changelog └── index.html ├── debug.js ├── demos ├── animation │ └── index.html ├── dom │ └── index.html ├── event │ └── index.html ├── index.html ├── navigator │ └── index.html ├── request │ ├── data.txt │ ├── data.xml │ └── index.html └── storage │ ├── another_path │ └── index.html │ └── index.html ├── dev.js ├── docs ├── api.html ├── colors.html ├── events.html ├── index.html └── selectors.html ├── download └── index.html ├── guide └── index.html ├── images ├── close.png ├── comment.png ├── folder.png ├── github.png ├── link.gif ├── logger.png └── logo.png ├── index.html ├── intro └── index.html ├── jsdoc.cmd ├── log.txt ├── our.js ├── scripts ├── api.js ├── api_data.js ├── api_list.js ├── common.js ├── common_loader.js ├── prettify.js ├── publish.js ├── widget-demoarea.html ├── widget-demoarea.js ├── widget-demobutton.js ├── widget-logger.js ├── widgets.js └── widgets_loader.js ├── src ├── animation.js ├── browser.js ├── dom.js ├── integrated │ ├── json2.js │ └── sizzle.js ├── jseventmodule.js ├── lang.js ├── request.js └── widget.js ├── stylesheets ├── api.css ├── common.css ├── prettify.css ├── reset.css └── widgets.css ├── tests ├── Math.randomRange.html ├── Object.clone.html ├── Object.toQueryString.html ├── Overlay.html ├── String.prorotype.camelize.html ├── _beforeunload.html ├── _colors.html ├── _countdown.html ├── _firebug.html ├── _iFrameAutoResize-iframe.html ├── _iFrameAutoResize.html ├── _include-1.html ├── _include-2.html ├── _include.html ├── _include.js ├── _showHint.html ├── _smcp.html ├── _smcp.txt ├── createElement.css ├── createElement.html ├── createElement.js ├── document.addStyleRules.html ├── document.preloadImages.html ├── dom_features.html ├── dom_test.html ├── domready-frame-frame.html ├── domready-frame.html ├── domready.html ├── event_types.html ├── freezeInteractionArea.html ├── getClientRect.html ├── getEventAttributes.html ├── htmlunknownelement.html ├── ie6_memory_leak.html ├── ie6_png-iframe.html ├── ie6_png.html ├── ie6_png.png ├── jQuery.html ├── toInteger.html ├── typeOf.html └── viewport.html ├── utilities ├── DD_belatedPNG.js ├── adapter-highcharts.js ├── console.js └── swf.js └── widgets ├── autocue.js ├── autocue ├── index.html ├── message_queue │ ├── add.html │ └── add_more.html ├── multiple_messages │ ├── index.html │ └── messages.txt └── scrolling │ ├── down.html │ └── up.html ├── calendar.js ├── calendar ├── custom_styles │ └── index.html ├── first_day │ └── index.html ├── index.html └── month │ └── index.html ├── carousel.js ├── carousel ├── index.html └── scrolling │ ├── auto_view.html │ ├── bg.png │ ├── btn.png │ └── quick_view.html ├── datepicker.js ├── datepicker ├── date_range │ ├── automatically.html │ ├── datepicker.png │ ├── limit.html │ └── no_limit.html └── index.html ├── dialog.js ├── dialog ├── animation │ └── slide.html ├── grouping │ └── index.html ├── index.html ├── overlay │ ├── parent_is_body.html │ └── parent_is_not_body.html ├── positioning │ ├── offset_specified.html │ ├── pinned_target_is_body.html │ ├── pinned_target_is_not_body.html │ └── repositon.html └── upgrade │ ├── close.png │ ├── content.html │ ├── dialog-x.js │ ├── index.html │ └── title.png ├── index.html ├── paginator.js ├── paginator ├── dynamic │ ├── index.html │ └── remote_data.txt ├── index.html ├── links │ └── index.html └── static │ └── index.html ├── photowall.js ├── photowall ├── index.html └── scrolling │ ├── active_photo.html │ ├── auto_loop.html │ └── static.html ├── scrollbox.js ├── scrollbox ├── content_size │ └── index.html ├── index.html ├── scrollbar_min_height │ ├── index.html │ ├── scrollbar.png │ └── track.png └── update │ └── index.html ├── slideshow.js ├── slideshow ├── animation │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── pointer.png │ ├── slide.html │ ├── thumbnail_1.jpg │ ├── thumbnail_2.jpg │ ├── thumbnail_3.jpg │ ├── thumbnail_4.jpg │ ├── thumbnail_5.jpg │ ├── thumbnail_6.jpg │ └── thumbnail_7.jpg ├── customizing │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── buttons.png │ └── index.html ├── index.html └── show │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── auto.html │ ├── by_click.html │ ├── by_hover.html │ ├── by_script.html │ └── single.html ├── tabpanel.js ├── tabpanel ├── activate │ ├── by_click.html │ ├── by_hover.html │ └── by_script.html ├── index.html └── nested │ └── index.html ├── validator.js └── validator ├── custom └── index.html ├── events ├── index.html └── remote.txt ├── index.html └── rules ├── add_client.html ├── add_remote.html ├── captcha.png ├── captcha.txt ├── correct.png ├── error.png ├── info.png └── remove.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/.nojekyll -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License 2 | =============== 3 | 4 | Copyright (c) 2012 [s79](https://github.com/s79) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OurJS # 2 | 3 | OurJS 是一个适用于 WEB 开发的 JavaScript 框架，它提供了覆盖面广、细节完善的功能，并能让开发者使用可预期的 API，写出具备良好的兼容性、可读性和扩展性的代码。 4 | 5 | > 完全兼容 PC 端的 IE6+、Firefox、Chrome、Safari、Opera 以及其他使用 Trident 和 WebKit 内核的浏览器。 6 | 7 | *[更多内容请参考 OurJS 简介/演示/文档](http://s79.github.com/OurJS/)* 8 | 9 | 10 | ## 特点 ## 11 | 12 | * **化繁为简** —— 以简单直接的方式，提供易于理解和使用的功能。 13 | * **功能完善** —— 提供的功能覆盖面广、细节完善，可以满足 WEB 开发中的绝大多数需求。 14 | * **风格一致** —— 提供的 API 与原生 JS 和 DOM 的语法习惯一致，便于理解和记忆。 15 | * **易于扩展** —— 不论是要扩展框架本身，还是扩展应用，OurJS 均提供了简易的方式。 16 | 17 | 18 | ## 要求和限制 ## 19 | 20 | OurJS 要求浏览器运行在“标准模式”下。 21 | 22 | OurJS 不能和其他对原型进行了扩展的框架或类库共存。 23 | 24 | 25 | ## 文件列表 ## 26 | 27 | `our.js` 中包含以下列出的所有文件： 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
描述文件名
Integratedsrc/integrated/sizzle.js
src/integrated/json2.js
Widgetsrc/widget.js
Requestsrc/request.js
Animationsrc/animation.js
JS Event Modulesrc/jseventmodule.js
DOM API Enhancementssrc/dom.js
Browser API Enhancementssrc/browser.js
JS API Enhancementssrc/lang.js
58 | 59 | 以下文件均为可选的附加项： 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
Widgetswidgets/*.js
Utilitiesutilities/*.js
69 | 70 | 71 | ## 许可 ## 72 | 73 | OurJS 基于 MIT 许可协议发布，关于此协议的细节请查看 `LICENSE.md`。 74 | -------------------------------------------------------------------------------- /build.cmd: -------------------------------------------------------------------------------- 1 | @echo off 2 | set debug=..\debug.js 3 | set our=..\our.js 4 | cd src 5 | echo /*!>%debug% 6 | echo. * OurJS>>%debug% 7 | echo. * sundongguo>>%debug% 8 | echo. * http://s79.github.com/OurJS/>>%debug% 9 | echo. * %date%>>%debug% 10 | echo. * Released under the MIT License.>>%debug% 11 | echo. */>>%debug% 12 | copy/y/b %debug% + lang.js + browser.js + dom.js + jseventmodule.js + animation.js + request.js + widget.js + integrated\json2.js + integrated\sizzle.js %debug% 13 | set yuicompressor_path=D:\SkyDrive\ProgramFiles\JSFileCompressor\yuicompressor-2.4.7\build 14 | java -jar %yuicompressor_path%\yuicompressor-2.4.7.jar %debug% -o %our% --charset UTF-8 15 | pause 16 | -------------------------------------------------------------------------------- /changelog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 更新日志 6 | 7 | 8 | 9 | 10 |
11 |

更新日志

12 | 13 |

2013-12-03

14 |

增加 Widget.parseAs 方法

15 |

使用此方法代替以前的内部方法 Widget.parsers.parse，Widget.parsers 属性现在不存在了。

16 | 17 |

2013-10-24

18 |

修改 String.prorotype.camelize 的转换方式

19 | 20 |

2013-10-17

21 |

修复 jsEventTarget.on 方法解析带括号的选择符出错的 bug

22 |

现在可以正常的使用如 click:relay(tr:not(:nth-child(2))>td:nth-child(even)) 的选择符了。

23 |

修复 Request 的 start 事件触发时 ongoing 未更新的 bug

24 | 25 |

2013-08-19

26 |

简化 widget-validator 的设计使其更灵活

27 |

不再支持内置的类型判断，这样可以简化使用方式，并可以更灵活的进行验证。

28 | 29 |

2013-07-24

30 |

将 Request 的 useCache 和 async 选项修改为相反的含义

31 |

useCache 修改为 noCache，async 修改为 sync，当省略这些选项时，将直接取 false 值。

32 | 33 |

2013-07-11

34 |

注册 Widget 时 selector 的格式限制为 <nodeName>.<className>

35 |

使代码可以在 Strict Mode 正常运行

36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /demos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OurJS 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /demos/navigator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 浏览器信息 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |

浏览器信息

15 | 16 |

在 navigator 上扩展的属性

17 | 18 |
19 | navigator.* 20 | 21 |
22 |
23 | navigator.userAgentInfo.* 24 |
25 |
26 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /demos/request/data.txt: -------------------------------------------------------------------------------- 1 | {"result": "ok"} 2 | -------------------------------------------------------------------------------- /demos/request/data.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 成功 5 | 6 | 7 | Success 8 | 9 | 10 | -------------------------------------------------------------------------------- /demos/storage/another_path/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | localStorage 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 | 21 |

这是另一个路径下的页面（IE6 IE7 可跨路径）

22 |
23 | localStorage.setItem 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
key:
value:
37 |
38 |
39 | 40 |
41 |
42 |
43 | localStorage.getItem 44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
key:
value:
57 |
58 |
59 | 60 |
61 |
62 |
63 | localStorage.removeItem 64 |
65 | 66 | 67 | 68 | 69 | 70 |
key:
71 |
72 |
73 | 74 |
75 |
76 |
77 | localStorage.clear 78 |
79 | 80 |
81 |
82 | 102 | 103 |
104 | 105 | 106 | -------------------------------------------------------------------------------- /dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview OurJS 开发版 3 | * @author sundongguo@gmail.com 4 | * @version 20120213 5 | */ 6 | 7 | (function() { 8 | var ourjs = [ 9 | 'src/lang.js', 10 | 'src/browser.js', 11 | 'src/dom.js', 12 | 'src/jseventmodule.js', 13 | 'src/animation.js', 14 | 'src/request.js', 15 | 'src/widget.js', 16 | 'src/integrated/json2.js', 17 | 'src/integrated/sizzle.js' 18 | ]; 19 | if (document.documentElement.currentStyle && !document.documentElement.currentStyle.minWidth) { 20 | ourjs.push('utilities/console.js'); 21 | } 22 | var path = function() { 23 | var scripts = document.getElementsByTagName('script'); 24 | var i = 0; 25 | var script; 26 | var index; 27 | while (script = scripts[i++]) { 28 | index = script.src.indexOf('dev.js'); 29 | if (index > -1) { 30 | return script.src.slice(0, index); 31 | } 32 | } 33 | return ''; 34 | }(); 35 | var file; 36 | while (file = ourjs.shift()) { 37 | document.writeln(''); 38 | } 39 | })(); 40 | -------------------------------------------------------------------------------- /docs/api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OurJS API Reference 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

API 参考

19 |
20 | 25 | 30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OurJS 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /download/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 下载 OurJS 6 | 7 | 8 | 11 | 12 | 13 |
14 |

下载

15 | 16 |

OurJS

17 |

OurJS 的所有基本功能均被打包到一个文件 our.js 中：

18 |

21 | 22 | 23 | 24 | 25 | 26 |

Widgets

27 |

Widgets 提供了常见的功能，能够简化开发，请根据情况选用：

28 | 41 | 42 |

实用工具

43 |

这些工具并没有集成到 OurJS 中，可以根据情况选用：

44 | 49 | 50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/images/close.png -------------------------------------------------------------------------------- /images/comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/images/comment.png -------------------------------------------------------------------------------- /images/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/images/folder.png -------------------------------------------------------------------------------- /images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/images/github.png -------------------------------------------------------------------------------- /images/link.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/images/link.gif -------------------------------------------------------------------------------- /images/logger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/images/logger.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/images/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OurJS 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /jsdoc.cmd: -------------------------------------------------------------------------------- 1 | @echo off 2 | set jsdoc_path=D:\SkyDrive\ProgramFiles\JSDocToolkit 3 | java -jar %jsdoc_path%\jsrun.jar %jsdoc_path%\app\run.js src src\integrated -s -n -d=scripts -t=scripts 4 | pause 5 | -------------------------------------------------------------------------------- /scripts/common_loader.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var pathPrefix = location.pathname.indexOf('OurJS') === 1 ? '/OurJS' : ''; 3 | document.writeln(''); 4 | document.writeln(''); 5 | })(); 6 | -------------------------------------------------------------------------------- /scripts/widget-demoarea.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DEMO 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /scripts/widget-demobutton.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview Widget - 演示按钮 3 | * @author sundongguo@gmail.com 4 | * @version 20130418 5 | */ 6 | 7 | (function() { 8 | //==================================================[Widget - 演示按钮] 9 | //--------------------------------------------------[ExecuteCode] 10 | // 在页面内所有的 domready 监听器被调用之后才启用点击“演示按钮”执行代码的功能。 11 | document.on('afterdomready:once.demobutton', function() { 12 | document.$('body').on('click:relay(button.widget-demobutton).demobutton', function() { 13 | if (!this.disabled) { 14 | eval(this.code || this.innerText); 15 | } 16 | }); 17 | }); 18 | 19 | //--------------------------------------------------[DemoButton] 20 | /** 21 | * 演示按钮。 22 | * @name DemoButton 23 | * @constructor 24 | * @description 启用方式 25 | * 为一个 BUTTON 元素添加 'widget-demobutton' 类，即可使该元素成为“演示按钮”。 26 | * @description 新增行为 27 | * 当点击一个“演示按钮”时，该按钮内的文本（或该按钮的 data-code 属性中的文本）将被作为 JS 代码被执行，执行时的作用域为全局作用域。 28 | * @description 可配置项 29 | * data-code 30 | * 点击该按钮后执行的代码。 31 | * 如果不指定本属性，则点击该按钮时，以该按钮内的文本作为代码执行。 32 | */ 33 | 34 | var styleRules = [ 35 | 'button.widget-demobutton { margin: 1px 0; padding: 6px 12px; overflow: visible; border: none; background: #323232; color: gainsboro; font: bold 14px/14px Verdana, Helvetica, Arial, "Microsoft YaHei", SimSun, sans-serif; text-align: left; }', 36 | 'button.widget-demobutton:hover { background: black; }', 37 | 'button.widget-demobutton:active { color: white; }', 38 | 'button.widget-demobutton code { font-weight: normal; font-family: Consolas, "Lucida Console", Courier, "Microsoft YaHei", SimSun, monospace; }', 39 | 'button.widget-demobutton strong { color: #64D5EB; }', 40 | 'button.widget-demobutton em { color: #A4C639; font-style: italic; }', 41 | 'button.widget-demobutton var { color: #FF6767; font-style: normal; }', 42 | 'button.widget-demobutton[disabled], button.widget-demobutton[disabled]:hover, button.widget-demobutton[disabled]:active { color: gray; background: #323232; }' 43 | ]; 44 | if (navigator.isIE6) { 45 | styleRules.pop(); 46 | } 47 | Widget.register({ 48 | type: 'demobutton', 49 | selector: 'button.widget-demobutton', 50 | styleRules: styleRules, 51 | config: { 52 | code: '' 53 | }, 54 | initialize: function() { 55 | this.setAttribute('type', 'button'); 56 | } 57 | }); 58 | 59 | })(); 60 | -------------------------------------------------------------------------------- /scripts/widgets_loader.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var pathPrefix = location.pathname.indexOf('OurJS') === 1 ? '/OurJS' : ''; 3 | document.writeln(''); 4 | document.writeln(''); 5 | document.writeln(''); 6 | document.writeln(''); 7 | document.writeln(''); 8 | document.writeln(''); 9 | document.writeln(''); 10 | document.writeln(''); 11 | })(); 12 | -------------------------------------------------------------------------------- /stylesheets/prettify.css: -------------------------------------------------------------------------------- 1 | /* Pretty printing styles. Used with prettify.js. */ 2 | 3 | /* SPAN elements with the classes below are added by prettyprint. */ 4 | .pln { color: #000 } /* plain text */ 5 | 6 | @media screen { 7 | .str { color: #C41A16 } /* string content */ 8 | .kwd { color: #AA0D91 } /* a keyword */ 9 | .com { color: #007400 } /* a comment */ 10 | .typ { font-style: italic; font-weight: bold } /* a type name */ 11 | .lit { color: #1C00CF } /* a literal value */ 12 | /* punctuation, lisp open bracket, lisp close bracket */ 13 | .pun, .opn, .clo { color: #666 } 14 | .tag { color: #008 } /* a markup tag name */ 15 | .atn { color: #606 } /* a markup attribute name */ 16 | .atv { color: #080 } /* a markup attribute value */ 17 | .dec, .var { color: #606 } /* a declaration; a variable name */ 18 | .fun { color: red } /* a function name */ 19 | } 20 | 21 | /* Use higher contrast and text-weight for printable form. */ 22 | @media print, projection { 23 | .str { color: #060 } 24 | .kwd { color: #006; font-weight: bold } 25 | .com { color: #600; font-style: italic } 26 | .typ { color: #404; font-weight: bold } 27 | .lit { color: #044 } 28 | .pun, .opn, .clo { color: #440 } 29 | .tag { color: #006; font-weight: bold } 30 | .atn { color: #404 } 31 | .atv { color: #060 } 32 | } 33 | 34 | /* Put a border around prettyprinted code snippets. */ 35 | /* pre.prettyprint { padding: 2px; border: 1px solid #888 } */ 36 | 37 | /* Specify class=linenums on a pre to get line numbering */ 38 | ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */ 39 | li.L0, 40 | li.L1, 41 | li.L2, 42 | li.L3, 43 | li.L5, 44 | li.L6, 45 | li.L7, 46 | li.L8 { list-style-type: none } 47 | /* Alternate shading for lines */ 48 | li.L1, 49 | li.L3, 50 | li.L5, 51 | li.L7, 52 | li.L9 { background: #eee } 53 | -------------------------------------------------------------------------------- /stylesheets/reset.css: -------------------------------------------------------------------------------- 1 | /* --------------------------------------------------[Reset] */ 2 | body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } 3 | ul, ol { list-style: outside none; } 4 | fieldset, img { border: 0; } 5 | table { border-collapse: collapse; border-spacing: 0; } 6 | body, small, sup, sub, button, input, textarea, select { font: 12px/1 Arial, Helvetica, Verdana, SimSun, sans-serif; } 7 | body { line-height: 1.5; } 8 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 9 | address, cite, dfn, em, var { font-style: normal; } 10 | code, kbd, pre, samp { font-family: Consolas, "Lucida Console", Courier, SimSun, monospace; } 11 | sup, sub { position: relative; vertical-align: baseline; } 12 | sup { top: -3px; } 13 | sub { bottom: -3px; } 14 | button { padding: 5px 10px; overflow: visible; } 15 | -------------------------------------------------------------------------------- /stylesheets/widgets.css: -------------------------------------------------------------------------------- 1 | /* --------------------------------------------------[Widgets] */ 2 | h4 { margin: 15px 0 0; } 3 | 4 | #api { margin-top: 50px; } 5 | #api li { margin: 10px 0; } 6 | #api table { width: 932px; border-collapse: collapse; } 7 | #api table tr:nth-child(even) { background: whitesmoke; } 8 | #api table th { background: gainsboro; } 9 | #api table th, 10 | #api table td { border: 0 none; vertical-align: top; } 11 | #api table td:last-child { width: 100%; } 12 | #api kbd, 13 | #api samp { font-style: italic; font-family: Verdana, Helvetica, Arial, "Microsoft YaHei", SimSun, sans-serif; white-space: nowrap; } 14 | #api kbd { color: #666; font-weight: normal; } 15 | #api samp { color: gray; } 16 | #api dfn { color: steelblue; white-space: nowrap; } 17 | #api var { color: sienna; font-style: italic; } 18 | #api var em { margin-left: 5px; padding: 0 2px; border-radius: 5px 0; background: gold; color: maroon; font: italic 12px Arial; } 19 | #api table kbd, 20 | #api table samp, 21 | #api table dfn, 22 | #api table var { display: inline-block; margin: 10px 0; } 23 | #api table p dfn, 24 | #api table p var, 25 | #api table table dfn, 26 | #api table table var { display: inline; margin: 0; } 27 | #api table table { width: auto; margin-left: 0; } 28 | #api table table th, 29 | #api table table td { padding: 2px 5px; border: 1px solid silver; } 30 | #api .list { overflow: hidden; } 31 | #api .list div { margin-bottom: -1px; padding: 0 0 10px; border-bottom: 1px solid gainsboro; -border-bottom-width: 0; } 32 | 33 | #api .list .anchor { color: #666; font-weight: bold; font-size: 16px; } 34 | #api .list .anchor kbd { padding-right: 5px; } 35 | -------------------------------------------------------------------------------- /tests/Math.randomRange.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Math.randomRange 6 | 7 | 19 | 20 | 21 | 71 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /tests/Object.clone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Object.clone 6 | 7 | 8 | 12 | 13 | 14 |
15 |
16 | 17 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /tests/Object.toQueryString.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Object.toQueryString 6 | 7 | 8 | 11 | 12 | 13 |
14 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tests/String.prorotype.camelize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | String.prorotype.camelize 6 | 7 | 8 | 11 | 12 | 13 |
14 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /tests/_beforeunload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | beforeunload 6 | 7 | 8 | 9 | 10 | 点击伪协议的超链接在 IE6 IE7 IE8 IE9 中也会触发 beforeunload 事件 11 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /tests/_colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | colors 6 | 7 | 11 | 12 | 13 |

Colors

14 |
15 | orangered 16 | tomato 17 | greenyellow 18 | yellowgreen 19 | cornflowerblue 20 | steelblue 21 | springgreen 22 | mediumseagreen 23 | orchid 24 | mediumorchid 25 | gold 26 | goldenrod 27 | whitesmoke 28 | gainsboro 29 | silver 30 | darkgray 31 | gray 32 | dimgray 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /tests/_countdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Countdown 6 | 7 | 12 | 13 | 14 |

15 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /tests/_firebug.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | console-ie6_firebug 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /tests/_iFrameAutoResize-iframe.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | iFrameAutoResize 6 | 11 | 12 | 13 |
14 | 15 |
16 |
17 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tests/_iFrameAutoResize.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | iFrameAutoResize 6 | 11 | 12 | 13 | 14 |
15 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /tests/_include-1.html: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | -------------------------------------------------------------------------------- /tests/_include-2.html: -------------------------------------------------------------------------------- 1 |
2 |
另一个模版
3 |
4 | 模版还可以嵌套 5 | 模版一 6 |
7 |
8 | -------------------------------------------------------------------------------- /tests/_include.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | include 6 | 7 | 8 | 9 |

include

10 | 模版一 11 | 模版二 12 | 13 |

END

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /tests/_include.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 使用 注释信息 引入模版文件。 3 | * 注意避免模版文件之间的循环引用。 4 | * 另外模版文件中不能有脚本调用 document.write 方法，也不应该监听 document 的 domready 事件。 5 | */ 6 | document.on('beforedomready', function() { 7 | function include(target) { 8 | var $target = $(target); 9 | new Request($target.getData('src'), {noCache: true, sync: true}) 10 | .on('finish', function(e) { 11 | var scripts = []; 12 | var text = e.text.replace(/(?:]*?>)([\s\S]*?)(?:<\/script>)/ig, function(script, scriptText) { 13 | var match = script.match(/src="([^"]+)"/i); 14 | if (match) { 15 | scripts.push([0, match[1]]); 16 | } else { 17 | if (scriptText) { 18 | scripts.push([1, scriptText]); 19 | } 20 | } 21 | return ''; 22 | }); 23 | if (e.status === 200) { 24 | $target.outerHTML = text; 25 | scripts.forEach(function(script) { 26 | script[0] ? window.execScript(script[1]) : document.loadScript(script[1]); 27 | }); 28 | } else { 29 | $target.outerHTML = '

include error: ' + this.url + '

'; 30 | } 31 | }) 32 | .send(); 33 | } 34 | 35 | var includeElements = document.getElementsByTagName('ins'); 36 | var includeElement; 37 | while (includeElement = includeElements[0]) { 38 | include(includeElements[0]); 39 | } 40 | 41 | }); 42 | -------------------------------------------------------------------------------- /tests/_showHint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | showHint 6 | 7 | 8 | 9 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /tests/createElement.css: -------------------------------------------------------------------------------- 1 | body { background: gold; } -------------------------------------------------------------------------------- /tests/createElement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | createElement 6 | 7 | 8 | 9 | 10 |
11 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /tests/createElement.js: -------------------------------------------------------------------------------- 1 | $('

中文字符

').insertTo(document.body, 'afterBegin'); 2 | -------------------------------------------------------------------------------- /tests/document.addStyleRules.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | document.addStyleRules 6 | 7 | 8 | 9 | 10 |
11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /tests/document.preloadImages.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | document.preloadImages 6 | 7 | 8 | 9 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tests/dom_features.html: -------------------------------------------------------------------------------- 1 | 2 | text_before 3 | 4 | text_after 5 | 6 | text_before 7 | 8 | text_after 9 | 10 | 11 | 48 | dom_features 49 | 56 | 106 | 107 | text_before 108 | 109 | text_after 110 | 111 | 112 | 113 |
114 | 141 | 142 | text_before 143 | 144 | text_after 145 | 146 | text_before 147 | 148 | text_after 149 | -------------------------------------------------------------------------------- /tests/dom_test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dom_test 6 | 7 | 8 | 9 | 10 | 11 | text_before 12 | 13 | text_after 14 | 15 | 19 | 20 | 21 | 22 |

29 | (#x) 30 | 31 | SOME DOM METHODS TEST 32 | 33 |

34 | 35 |
(#y) heading_one
36 | 37 |
38 |
39 | 40 | 102 | 103 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /tests/domready-frame-frame.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | domready 6 | 7 | 12 | 24 | 25 | 26 | null 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /tests/domready-frame.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | domready 6 | 7 | 13 | 25 | 26 | 27 | 28 | null 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tests/domready.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | domready 6 | 7 | 21 | 49 | 50 | 51 | 52 | null 53 |
54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tests/event_types.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | event_types 6 | 7 | 10 | 11 | 12 |

“可用事件类型”的“应用于”元素测试

13 | 14 | 15 | 16 | 17 | 22 | 23 | span 24 | 25 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /tests/freezeInteractionArea.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | freezeInteractionArea 6 | 7 | 8 | 16 | 17 | 18 | 19 |
20 | 这些元素不会被遮盖： 21 | link 22 | 23 | 24 | 27 |
28 | 29 | 30 |
31 | 这些元素会被遮盖： 32 | link 33 | 34 | 35 |
36 |
37 | 对话框出现时，仅对话框内的部分可以使用 tab 键导航。 38 | 39 | 40 | 41 | a 42 |
43 | 44 | 45 |
46 |
47 |
48 | 对话框出现时，仅对话框内的部分可以使用 tab 键导航。 49 | 50 | 51 | 52 | a 53 |
54 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | 这些元素会被遮盖： 62 | link 63 | 64 | 65 |
66 |
67 | 对话框出现时，仅对话框内的部分可以使用 tab 键导航。 68 | 69 | 70 | 71 | a 72 |
73 | 74 |
75 | 76 | 77 | 78 | 79 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /tests/getClientRect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | getClientRect 6 | 7 | 26 | 53 | 54 | 55 |
56 |
57 |
58 | 59 | 60 | 61 | 62 | 65 | 66 | 67 |
td 63 |
64 |
68 |
69 |
70 |
[0,0]
71 |
[0,0]
72 |
[0,0]
73 | 74 | 75 | -------------------------------------------------------------------------------- /tests/htmlunknownelement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTMLUnknownElement 6 | 7 | 8 | 9 | FOO 10 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /tests/ie6_memory_leak.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IE6 Memory Leak 6 | 7 | 8 | 9 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /tests/ie6_png-iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | png 6 | 7 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /tests/ie6_png.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | png 6 | 7 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /tests/ie6_png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/tests/ie6_png.png -------------------------------------------------------------------------------- /tests/jQuery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery 6 | 7 | 8 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 59 | 60 |
61 | 62 | 63 |
64 | 65 |
66 | OurJS 67 | 77 | 78 |
79 | 80 |
81 | 86 | 87 | 88 |
89 | 104 | 105 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /tests/toInteger.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | toInteger 6 | 7 | 8 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /tests/typeOf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | typeOf 6 | 7 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
valueString(value)Object.prototype.toString.call(value)typeof value期望值实际值
31 | 
 32 | var XHR = window.XMLHttpRequest ? XMLHttpRequest : ActiveXObject;
 33 | var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
 34 |
35 |
36 | 39 |
40 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /tests/viewport.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | viewport 6 | 7 | 22 | 62 | 63 | 64 |
65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
DBDE
CW
CH
OW
OH
SW
SH
SL
ST
116 | 117 | 118 | -------------------------------------------------------------------------------- /widgets/autocue/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 自动提词机 6 | 7 | 8 | 9 | 10 |
11 |

自动提词机

12 | 13 |

示例

14 |

信息队列

15 |

16 | 自动提词机会以滚动字幕的形式展示信息队列中的信息。
17 | 信息队列最初是空的，通过调用自动提词机的 addMessages 方法，可以将新信息添加到信息队列。 18 |

19 |

本例新建了一个自动提词机，并为其添加了三条信息：

20 |
21 |

可以随时通过调用 addMessages 方法来向信息队列中添加更多的信息。

22 |

23 | 当信息队列的长度超过 data-cache-size 的值时，已展示过的信息将被从队列中删除，不会被再次播放。
24 | 尚未展示过的信息则永远不会被删除，它们必将至少被展示一次。在清理信息队列时，会忽略所有尚未展示过的信息。 25 |

26 |

27 | 本例新建了一个自动提词机，并将 data-cache-size 指定为 3。
28 | 页面中添加了一个“再添加两条信息”按钮，每次点击此按钮，都会顺次添加两个数字到信息队列中： 29 |

30 |
31 | 32 |

更新展示的信息

33 |

每隔一定的时间，自动提词机都会以纵向（可以指定滚动的方向）滚动的形式更新当前展示的信息。

34 | 35 |

滚动间隔时间

36 |

可以通过配置 data-interval 来指定信息自动滚动的间隔时间。

37 |

如果没有指定 data-interval，则使用 5000（毫秒）作为默认值。

38 |

当鼠标指针进入自动提词机的区域后，自动滚动将停止，当鼠标指针离开自动提词机的区域后，自动滚动将继续进行。

39 |

本例新建了一个自动提词机，添加了五条信息，并将 data-interval 设置为 1000：

40 |
41 | 42 |

滚动方向

43 |

可以通过配置 data-direction 来指定滚动方向，有效值为 'up' 和 'down'。

44 |

如果没有指定 data-direction，则使用 'up' 作为默认值。

45 |

本例在上例的基础上，将配置项 data-direction 设置为 'down'：

46 |
47 | 48 |

同时展示多条信息

49 |

自动提词机还可以同时展示多条信息。

50 |

可以通过配置 data-visible-items 来指定同时展示的信息条目数。

51 |

在指定 data-visible-items 的数目时，应注意为自动提词机添加足够多的信息（不少于指定的同时展示条目数），以免有相同的信息条目被重复展示。

52 |

本例新建了一个自动提词机，可以同时展示最多五条信息（实际可见的少于五条是因为自动提词机的高度被固定了）：

53 |
54 | 55 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /widgets/autocue/message_queue/add.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Autocue 6 | 7 | 8 | 14 | 15 | 16 |
17 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /widgets/autocue/message_queue/add_more.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Autocue 6 | 7 | 8 | 9 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /widgets/autocue/multiple_messages/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Autocue 6 | 7 | 8 | 14 | 15 | 16 |
17 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /widgets/autocue/multiple_messages/messages.txt: -------------------------------------------------------------------------------- 1 | { 2 | "state": 1, 3 | "message": "ok", 4 | "value": [ 5 | {"content":"“直捣黄龙，与诸君痛饮耳！”
岳飞，“还我河山”的宋朝名将。战场上一生未败过，使金军留下“憾山易，憾岳家军难”的话。不用多说，大家都知道，只可惜中国历史上能说这句话的人太少了。"}, 6 | {"content":"“王侯将相有种乎，兵强马壮者为之耳！”
安重荣，后晋“儿皇帝”石敬瑭割让燕云十六州，整个朝廷上下都很惧怕契丹，人人对契丹人尊敬无比，惟独安重荣常常对路过的契丹使节箕踞谩骂，肆意侮辱，甚至对契丹人扬言迟早要了灭契丹。受契丹侵逼的吐浑诸部请求内附后晋，后晋当然不敢接纳，安重荣却陇络起来，安重荣暗杀契丹过路使臣，并上表数千言，公开指斥石敬瑭“称臣奉表，罄中国之珍，贡献契丹，凌虐汉人，意无厌足”，并把奏表改成书信体，遍发朝廷大臣和后晋诸藩镇。安重荣看不起石敬瑭，同时自已也想做皇帝，他的所作为石敬瑭所不能容忍。安重荣是朔州人，自少就孔武有力，精骑射。有一次，在精于骑射的契丹使臣面前，向其耀武扬威，安重荣指天上飞鸟射之，均应弦而落，观者万数，无不为其射术惊呼。契丹使臣非常钦佩，将乘良马敬献给安重荣。安重荣起兵反晋，想“入主中原”的契丹人也借绞灭安重荣叛军为名，请帮“儿皇帝”石敬唐助战。石敬瑭派大将杜重威平乱，由于力量相差太大，和部将出卖，安重荣战败被杀，头被石敬瑭献给契丹。"}, 7 | {"content":"“祖逖如不扫清中原，誓不再回江东。”
祖逖，中国历史上“闻鸡习武”的哪位。东晋王朝建立后，偏安江南，不愿北顾。很南迁中原人后代，希望东晋能恢复中原，祖逖就是其中的一位。祖逖自小立“闻鸡习武”。胸怀大志，发愤读书，练就了一身好武艺。 再多次作代表向东晋请愿出兵北伐被拒绝后，祖逖于313年祖逖渡长江北上。 船至中流，祖逖站立于船头，面对滔滔一不复返的长江激流，击辑康概言道：“祖逖如不扫清中原，誓不再回江东！”与他同行的人，都被他的豪情壮语所感动。愿跟从于他。过江后，祖将军组织了一支两千人的军队。数次打敌人的优势兵力，经过几年艰苦战斗，收复长江以北黄河以南地区，被中原白姓称作“慈父”。东晋王朝派很多宫员到“收复的地区”上任。正当祖逖准备进军河北时，他的北伐业绩却引起了东晋政府的恐慌，深得民心的祖逊成为他们的“大患”，削其权，千方百计在背后阻拢大军北上。 祖逖将军忧郁而终。其弟被东晋逼反，兵败投石虎（羯族）被杀。祖家残遭东晋灭族。"}, 8 | {"content":"“男儿当为国战死边野，马革裹尸而还”
马援，东汉开国名将，抗击过匈奴、平定过姜乱。在历史上留下“丈夫为志，穷当益坚，老当益壮”。年老的时后，还平定南方的少数民族。其中平定交趾（今越南）征侧、征贰叛乱后，将日南郡管地向南一直开扩，到快到今天的西贡。马援在此立一铜柱作为国界，上面刻有“铜柱毁，交趾灭。”越南人虽然恨透了马援，但不敢将铜柱搞毁，于是每每经过哪的人都要向铜柱投块石块，久而久之，竟堆起了一座“石山”。"}, 9 | {"content":"“胡将灭，汉当兴！”
梁犊，梁犊与高力等人在关中起义，梁犊以晋征东将军自命。秦、雍间城戍无不摧陷，沿路过关斩将，长驱而东。高力等皆多力善射，以一当百，施一丈柯，攻战若神，所向崩溃，关中义士接杆而起，及至长安，众已十万。大破后赵乐平王石苞于长安。东出潼关，攻克洛阳。王龛、马勖等起兵响应。梁犊败姚弋仲姜兵十万、败苻洪氏兵十万，再连败李农汉奸军十万。中原大振，兵锋直指邺城。后赵石虎大惧，调燕王石斌军，配精锐重装骑兵一万，统诸路兵马讨之。李农手下假意降梁犊作内应。击斩梁犊高力等于荥阳。不久石虎死，高力原部众为冉闵保护，引起石羯仇恨，石羯内部皆请诛之。"}, 10 | {"content":"“诸胡逆乱中原，已数十年，今我诛之。若能共讨者，可遣军来也。”
冉闵，灭胡最多，发布“杀胡令”，号呼天下汉人杀尽胡人。这段历史上生于五胡乱华时，冉闵父冉谵，原为晋将，北方沦丧后，投陈午部“乞活军”，320年，陈川（陈午弟）杀部将降石勒（羯族首领），冉谵投上党部“乞活军”，不久为石虎所破，受伤被俘，伤发而死。冉闵所有亲人都死于异族入侵，成为孤儿，当时仅十一二岁，羯主石勒将其改名石闵，收为义孙，命季龙以子视之。冉闵忍辱二十年，躲过石羯内部一些人和巫师“三千羯士”等一列系欲置之于死地的斗争。石虎死后，复汉姓，利用石羯内乱之机，阵斩羯族军士四万，又坑降三四万。羯族精锐尽失，这是几十万羯人的子弟，他们恨透了冉闵，其后冉于邺城屠羯胡二十几万。羯族整个民族基本被杀绝。冉闵的种族灭绝政策引起北方各胡的恐慌，造成各胡族空前大围结。面对众胡联军，冉闵的军队却常常以少胜多，消灭大量胡族军队。"}, 11 | {"content":"“我西川只有断头之士，没有屈膝鼠辈”
蒲泽，蒲泽痛斥元吏。这句话反应了元灭宋时，哪些英勇抗击的四川军民心声。元军灭宋，首攻四川。从1234年起，在四川拉割战打了多年，很多城池却缕攻不下，如合川；有些城池攻下了又不断失手，如云顶。1258年，川将蒲泽连合云顶军民攻成都，在平原地区被击败，兵败东撤。元军追杀几十里，兵士伤亡重多。云顶城陷入孤立无援的境地。蒙军围困了云顶城，石城军民殊死苦战，火器火炮用完了，便使用弓箭射击，箭头用完了，滚木，石头号也成了锐利的武器。激战数日，蒙军屡攻不下。最后，石城中粮食吃尽，蒙古大军从水门攻入城内。蒲泽牺牲，城中军民全部战死。云顶城首次陷落。 以后几年，云顶山附近和川西平原地区人民不堪妨受蒙古贵族的蹂，多次配合义军和官兵夺回云顶城。 1266年，义军再次夺回云顶失败后，才算真正的失陷。南宋末年川西人民在云顶山石城周围抗击蒙古军队的战斗，前后坚持30多年。创造了亚欧各国抗击元军的奇迹。击毙蒙古大汉的合川等地则直到涯山海战后，宋朝正式亡国，元朝叫人告之，方始出降。"}, 12 | {"content":"“打进大都生擒忽必烈！救出文天祥！”
无名英雄，公元1282年，河北中山府发生一场农民起义。起义义士是一位使枪的英雄。可惜名字都没有记载（有网友说姓赵，不知是不否赵云转世）。仅很少几个字，详细资料估计不是元朝没记就是清朝给删了。 起义军不到万人，确连续击败人数众多的元军。起义领袖号召天下汉人起来“反抗蒙古元朝的统治，打进大都生擒忽必烈！救出文天祥！”义军打到离元大都只一百多里的地方。要不是辽宁的蒙古精兵赶回来的及时，已经杀进了大都。或者中国就要少被蒙古统治七十年了。因为这场起义把元王朝吓坏了，忽必烈怕留着文天祥弄出更大的乱子。再次招降无果后，杀掉文天祥。由于这次农民起义的打击，元朝从高丽调回军队，取消了准备第三次征日的军队。以前从朋友哪看一讲本讲元史的书，很短几句提到这场起义。后来在曹余章编著的老版《上下五千年》（五）——32正气歌，即172页下面哪几段讲文天祥的，也提到了河北中山府的这场起义。"}, 13 | {"content":"“每一支箭出去必要射倒一个敌人。”
李广，箭无虚发的汉朝飞将军，只可惜不是皇亲，因此有＂李广难封＂之说，李广一生未受重用，他的军队多时也就万人左右，但训练的十份精锐善战．常常以少克多，李广以万人军队在外蒙古高原绕圈，吸引拖置凶奴１６万的主力，使其不能救援河西的凶奴．皇亲们则靠绝对优势的兵力取河西，立大功．后来出击外蒙古，皇亲们都有绝对优势的兵马数十万．别人为独得大功，兵不满万的李广竟被调去走不利行军又无向导的路．后来对他的孙子李陵更不公平，李陵竟将别人不屑一顾的五千荆楚兵训练成敢“直捣王庭”的精锐部队．后世有诗人赞李广＂但使龙城飞将在，不叫胡马渡阴山＂，李广力气惊人，且射术也惊人，他的部将和后人都及不上，有＂李广射虎＂的故事．李广能拉三百多斤力才能拉开的大黄弓，而马可波罗看到蒙古劲骑射拉开七八十公斤力（合一百五十斤左右）的大弓，很吃惊，认为欧州兵根本没法比．李广能拉的弓需要的力气是蒙古劲骑射的两倍，也就是蒙古骑兵如果不是一拥而上，哪么在远其射程达不到的地方就将被李广一一射杀．李广与凶奴作战有史为证，李广训练的军队很精锐善战．李广后来重新启用仅被用于防守，但凶奴数年不敢进攻他守卫的郡县．"}, 14 | {"content":"“犯强汉者，虽远必诛！”
陈汤，威服西域诸国，在中亚锡尔河北地区破北凶奴，斩其单于。迫使其余部向西远迁，于是欧州的缰梦开始了，哈哈，整个欧州都在凶奴的铁蹄下颤抖。推骨排一样源源不断被凶取赶来的蛮族，导致了罗马帝国灭亡。"} 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /widgets/autocue/scrolling/down.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Autocue 6 | 7 | 8 | 14 | 15 | 16 |
17 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /widgets/autocue/scrolling/up.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Autocue 6 | 7 | 8 | 14 | 15 | 16 |
17 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /widgets/calendar/custom_styles/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Calendar 6 | 7 | 8 | 22 | 23 | 24 |
25 |

26 |
27 | 28 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /widgets/calendar/first_day/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Calendar 6 | 7 | 8 | 12 | 13 | 14 |
15 |

16 | 17 |
18 | 19 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /widgets/calendar/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 月历 6 | 7 | 8 | 9 | 10 |
11 |

月历

12 | 13 |

示例

14 |

显示指定月份的日期

15 |

可以通过配置 data-month 来显示指定月份的日期。

16 |

如果没有指定 data-month，则显示当前月份的日期。

17 |

本例新建了一个月历，并将 data-month 设置为 '1900-01'：

18 |
19 | 20 |

日期的排列顺序

21 |

可以通过配置 data-first-day 来指定每周的第一天是星期几。

22 |

如果没有指定 data-first-day，则使用 0 作为默认值，即每周的第一天为星期日。

23 |

本例新建了一个月历，并将 data-first-day 设置为 1。另外，本例还通过监听 update 事件，在指定的位置显示当前月份，并通过监听 cellupdate 事件，为每个单元格添加短日期的弹出提示：

24 |
25 | 26 |

定义日期单元格的样式

27 |

月历为各日期单元格都添加了表示该日期状态的类，并且在各单元格的日期被显示时提供了 cellupdate 事件，因此可以很灵活的定义各日期单元格的样式。

28 |

本例新建了一个使用自定义样式的月历，并为每月的 10 - 15 号都添加了不同的颜色：

29 |
30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /widgets/calendar/month/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Calendar 6 | 7 | 8 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /widgets/carousel/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 无缝轮播器 6 | 7 | 8 | 9 | 10 |
11 |

无缝轮播器

12 | 13 |

示例

14 |

自动轮播

15 |

无缝轮播器会自动轮播其所有的“条目”。

16 |

本例新建了一个无缝轮播器，并将其 data-interval 设置为 2000：

17 |
18 | 19 |

快速预览

20 |

“向左滚动”和“向右滚动”按钮是可选的，如果使用这些按钮，可以通过按住它们来实现快速预览。

21 |

本例在上例的基础上，新增了“向左滚动”和“向右滚动”按钮：

22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /widgets/carousel/scrolling/auto_view.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Carousel 6 | 7 | 8 | 9 | 19 | 20 | 21 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /widgets/carousel/scrolling/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/carousel/scrolling/bg.png -------------------------------------------------------------------------------- /widgets/carousel/scrolling/btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/carousel/scrolling/btn.png -------------------------------------------------------------------------------- /widgets/carousel/scrolling/quick_view.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Carousel 6 | 7 | 8 | 9 | 25 | 26 | 27 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /widgets/datepicker/date_range/automatically.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | DatePicker 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /widgets/datepicker/date_range/datepicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/datepicker/date_range/datepicker.png -------------------------------------------------------------------------------- /widgets/datepicker/date_range/limit.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | DatePicker 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /widgets/datepicker/date_range/no_limit.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | DatePicker 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /widgets/datepicker/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 日期选择器 6 | 7 | 8 | 9 | 10 |
11 |

日期选择器

12 | 13 |

示例

14 |

依赖关系

15 |

日期选择器的“日期选择面板”中包含了一个“月历” Widget，因此在使用日期选择器时，还要引入月历的解析器。

16 | 17 |

选择日期

18 |

日期选择器仍是一个表单控件（INPUT[type=text]），可对其进行的操作如下：

19 | 26 |

本例新建了一个日期选择器：

27 |
28 | 29 |

可选日期范围

30 |

可以通过配置 data-min-date 和 data-max-date 来限定可选日期的范围。

31 | 32 |

固定限定

33 |

本例在上例的基础上，将配置项 data-min-date 设置为 '2010-09-10'，data-max-date 设置为 '2012-10-20'：

34 |
35 | 36 |

动态限定

37 |

本例在上例的基础上，使用脚本自动将配置项 data-min-date 和 data-max-date 设置为本周的日期范围内：

38 |
39 | 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /widgets/dialog/animation/slide.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 16 | 17 | 18 | 19 |
20 | × 21 |
22 | 23 | 24 | 25 | 26 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /widgets/dialog/grouping/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 18 | 19 | 20 | 21 |
22 | × 23 | 24 |
25 | 26 | 27 | 28 |
29 | × 30 |
31 | 32 | 33 | 34 | 35 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /widgets/dialog/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 模态对话框 6 | 7 | 8 | 9 | 10 |
11 |

模态对话框

12 | 13 |

示例

14 |

遮盖层

15 |

16 | 当对话框打开时，将自动生成一个遮盖层，遮盖层遮盖的范围为对话框的父元素的渲染范围。被遮盖的部分将无法使用键盘或鼠标进行操作。
17 | 如果对话框的父元素是 BODY，则遮盖层会遮盖整个视口。 18 |

19 |

当前打开的对话框会在遮盖层上方显示。

20 | 21 |

遮盖整个视口

22 |

23 | 本例新建了一个对话框，对话框的父元素是 BODY，当对话框打开时，整个视口都将被遮盖。
24 | 当遮盖层出现时，“$dialog.close();”按钮是不能点击的，也无法使用 tab 键使其获得焦点： 25 |

26 |
27 | 28 |

遮盖一个元素

29 |

30 | 本例在上例的基础上，修改了对话框在 DOM 树中的位置，现在对话框的父元素是绿色边框的元素，当对话框打开时，只有对话框的父元素会被遮盖。
31 | 当遮盖层出现时，“$dialog.close();”按钮并不会被遮盖，因此可以正常对其进行操作： 32 |

33 |
34 | 35 |

定位

36 |

对话框的显示的位置取决于其定位参考元素和定位偏移量的设置。

37 | 38 |

定位参考元素

39 |

40 | 当对话框打开时，会根据其定位参考元素来定位。
41 | 可以通过配置 data-pinned-target 来指定其他的定位参考元素，但只能指定为对话框的父元素或其父元素的后代元素，且不能是对话框自身。 42 |

43 |

如果没有指定 data-pinned-target，则对话框的定位参考元素为其父元素。

44 |

如果对话框的定位参考元素是 BODY，则视口滚动时，对话框不会跟随滚动。

45 |

本例新建了一个对话框，对话框的父元素及其定位参考元素均为 BODY：

46 |
47 |

如果对话框的定位参考元素不是 BODY，则视口滚动时，对话框也将跟随滚动。

48 |

本例在上例的基础上，将配置项 data-pinned-target 设置为红色边框的元素：

49 |
50 | 51 |

定位偏移量

52 |

53 | 默认情况下对话框的中心点与其定位参考元素的中心点重合，如果其定位参考元素为 BODY，则对话框的中心点与视口的中心点重合。
54 | 可以通过配置 data-left、data-right、data-top 和 data-bottom 来指定对话框的左、右、顶和底边与其定位参考元素的左、右、顶和底边的差值，指定的差值的单位是像素，可以为负数。 55 |

56 |

注意如果指定了 data-left 则 data-right 无效，指定了 data-top 则 data-bottom 无效。

57 |

本例在上例的基础上，将配置项 data-right 和 data-bottom 都设置为 0：

58 |
59 | 60 |

重新定位

61 |

如果对话框的尺寸发生了变化，可以通过调用其 repositon 方法来重新定位。

62 |

本例在上例的基础上，在对话框内添加了“扩大”和“缩小”按钮，点击这些按钮时，如果对话框的尺寸发生了变化，会自动调用对话框的 repositon 方法：

63 |
64 | 65 |

动画效果

66 |

可以通过配置 data-animation 来指定打开和关闭对话框时使用的动画效果，可选项有 'none'，'fade' 和 'slide'。

67 |

如果没有指定 data-animation，则关闭动画效果（相当于使用 'none' 作为默认值）。

68 |

本例新建了一个对话框，并将对话框的 data-animation 设置为 'slide'：

69 |
70 | 71 |

分组及层叠显示

72 |

73 | 当多个对话框有相同的父元素时，则视这些对话框为一组，一组对话框可以重叠显示。
74 | 当一组对话框重叠显示时，遮盖层只有一个，只有最后打开的对话框才不会被遮盖。 75 |

76 |

本例新建了一组对话框 dialogA 和 dialogB：

77 |
78 | 79 |

升级对话框

80 |

在一个应用中，通常对话框的外观和行为都是一致的。因此可以通过封装的方式升级对话框，以满足本应用的特定需要。

81 |

假设某应用有以下需求：

82 | 87 |

本例创建了一个升级版的对话框（widget-dialog-x），升级后的对话框除具备原始对话框所有的特性外，还预置了外观样式，并可以通过配置 data-title 的值来指定对话框的标题，通过配置 data-src 的值来使其内部的 IFRAME 载入另一个页面作为对话框的内容：

88 |
89 | 90 |
91 | 92 | 93 | -------------------------------------------------------------------------------- /widgets/dialog/overlay/parent_is_body.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 | link 21 | 22 | 23 | 26 | 27 |
28 | 29 | 30 |
31 | × 32 |
33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /widgets/dialog/overlay/parent_is_not_body.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 | link 21 | 22 | 23 | 26 | 27 | 28 |
29 | × 30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /widgets/dialog/positioning/offset_specified.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | × 24 |
25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /widgets/dialog/positioning/pinned_target_is_body.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | × 24 |
25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /widgets/dialog/positioning/pinned_target_is_not_body.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | × 24 |
25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /widgets/dialog/positioning/repositon.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | × 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /widgets/dialog/upgrade/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/dialog/upgrade/close.png -------------------------------------------------------------------------------- /widgets/dialog/upgrade/content.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 11 | 12 | 13 |
14 |

使用 iframe 载入的内容

15 |

text

16 |

text

17 |

text

18 |

text

19 |

text

20 |

使用 iframe 载入的内容

21 |

text

22 |

text

23 |

text

24 |

text

25 |

text

26 |

使用 iframe 载入的内容

27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /widgets/dialog/upgrade/dialog-x.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | //==================================================[Widget - 定制对话框（封装模态对话框）] 3 | Widget.register({ 4 | type: 'dialog-x', 5 | selector: 'div.widget-dialog-x', 6 | styleRules: [ 7 | 'div.widget-dialog-x { display: none; width: 500px; height: 300px; padding: 0; border: 1px solid #202020; outline: none; background: #424242; font: 14px/30px Verdana, Helvetica, Arial, "Microsoft YaHei", SimSun, sans-serif; }', 8 | 'div.widget-dialog-x .title { height: 31px; padding: 0 10px; background: url(title.png) repeat-x; color: whitesmoke; font-weight: bold; line-height: 31px; text-align: left; }', 9 | 'div.widget-dialog-x .close { position: absolute; right: 3px; top: 3px; width: 24px; height: 24px; outline: none; background: url(close.png) no-repeat center top; }', 10 | 'div.widget-dialog-x .close:hover { background-position: center bottom; }', 11 | 'div.widget-dialog-x iframe { display: block; width: 490px; height: 259px; margin: 5px; border: none; }' 12 | ], 13 | config: { 14 | titleText: '', 15 | contentSrc: 'about:blank' 16 | }, 17 | initialize: function() { 18 | // 修改结构。 19 | this.insertAdjacentHTML('afterBegin', '
' + this.titleText + '
'); 20 | 21 | // 监听 open 和 close 事件。 22 | this 23 | .on('open.x', function() { 24 | this.contentFrame = $('').insertTo(this); 25 | }) 26 | .on('close.x', function() { 27 | this.contentFrame.remove(); 28 | }); 29 | 30 | // 使其具备 Dialog 的特性。 31 | Widget.parseAs(this, 'dialog'); 32 | 33 | } 34 | }); 35 | 36 | })(); 37 | -------------------------------------------------------------------------------- /widgets/dialog/upgrade/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dialog 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /widgets/dialog/upgrade/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/dialog/upgrade/title.png -------------------------------------------------------------------------------- /widgets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OurJS 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /widgets/paginator/dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Paginator 6 | 7 | 8 | 9 | 20 | 21 | 22 |
23 |
尚未载入数据
24 |
Loading...
25 |
26 |
27 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /widgets/paginator/dynamic/remote_data.txt: -------------------------------------------------------------------------------- 1 | { 2 | "rows": [ 3 | "测试数据" 4 | ], 5 | "totalRows": 20 6 | } 7 | -------------------------------------------------------------------------------- /widgets/paginator/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 分页导航条 6 | 7 | 8 | 9 | 10 |
11 |

分页导航条

12 | 13 |

示例

14 |

工作模式

15 |

分页导航条可以工作在两种模式下。

16 | 17 |

静态模式

18 |

对于服务端输出的静态页，应将当前页码和总页数输出为 data-current-page 和 data-total-pages 属性的值，以直接生成导航链接。此外，还应指定 data-target-url，以使每个导航链接都可以像普通链接一样被点击。

19 |

在这种情况下，不必使用任何 JS 代码来做其他处理，分页导航条的 update 方法和 turn 方法也将失效。

20 |

21 | 本例新建了一个分页导航条，并通过配置 data-current-page 和 data-total-pages 指定了当前页码和总页数，通过配置 data-target-url 为 '?page={page}' 指定了导航链接的 URL。
22 | 这个分页导航条将在被解析完毕后立即创建导航链接。当点击导航链接时，将直接跳转到目标地址： 23 |

24 |
25 | 26 |

动态模式

27 |

对于一个富应用页面，data-current-page、data-total-pages 和 data-target-url 均不必指定。

28 |

当使用脚本获得了当前页码和总页数后，或需要更新当前页码和总页数时，应通过调用 update 方法来创建或更新导航链接。

29 |

当一个导航链接被点击时，会自动调用 turn 方法并触发 turn 事件，对于本次点击行为的处理可以在该事件的监听器中进行。

30 |

本例新建了一个分页导航条，在获得服务端的分页数据后，将动态创建导航链接。当点击导航链接时，将自动调用 turn 方法：

31 |
32 | 33 |

导航链接的数量

34 |

当分页导航条创建导航链接时，会根据 data-endpoint-pages 和 data-adjacent-pages 来确定要创建的链接数量，它们分别表示在导航条的两端和当前页码的两侧最多要创建的导航链接数。

35 |

如果没有指定 data-endpoint-pages，则使用 1 作为默认值，如果没有指定 data-adjacent-pages，则使用 2 作为默认值。

36 |

本例新建了一个“静态模式”的分页导航条，并将上述两个属性分别指定为 3 和 5：

37 |
38 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /widgets/paginator/links/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Paginator 6 | 7 | 8 | 9 | 19 | 20 | 21 |
22 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /widgets/paginator/static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Paginator 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /widgets/photowall/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 照片墙 6 | 7 | 8 | 9 | 10 |
11 |

照片墙

12 | 13 |

示例

14 |

手动滚动

15 |

照片墙的向左滚动和向右滚动按钮虽然不是必需的，但通常都应该指定它们，以便于操作。

16 |

本例新建了一个包含了上述两个按钮的照片墙：

17 |
18 | 19 |

自动滚动

20 |

通过配置 data-interval，可以指定照片墙自动滚动的时间间隔。

21 |

本例在上例的基础上，将配置项 data-interval 设置为 2000：

22 |
23 | 24 |

活动照片

25 |

通过配置 data-active-index，可以指定活动照片。

26 |

本例在上例的基础上，将配置项 data-active-index 设置为 5：

27 |
28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /widgets/photowall/scrolling/active_photo.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Photowall 6 | 7 | 8 | 9 | 25 | 26 | 27 |
28 |
29 |
    30 |
  • 1
    • 31 |
  • 2
    • 32 |
  • 3
    • 33 |
  • 4
    • 34 |
  • 5
    • 35 |
  • 6
    • 36 |
  • 7
    • 37 |
38 |
39 |
40 | ‹ 41 | › 42 |
43 |
44 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /widgets/photowall/scrolling/auto_loop.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Photowall 6 | 7 | 8 | 9 | 25 | 26 | 27 |
28 |
29 |
    30 |
  • 1
    • 31 |
  • 2
    • 32 |
  • 3
    • 33 |
  • 4
    • 34 |
  • 5
    • 35 |
  • 6
    • 36 |
  • 7
    • 37 |
38 |
39 |
40 | ‹ 41 | › 42 |
43 |
44 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /widgets/photowall/scrolling/static.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Photowall 6 | 7 | 8 | 9 | 25 | 26 | 27 |
28 |
29 |
    30 |
  • 1
    • 31 |
  • 2
    • 32 |
  • 3
    • 33 |
  • 4
    • 34 |
  • 5
    • 35 |
  • 6
    • 36 |
  • 7
    • 37 |
38 |
39 |
40 | ‹ 41 | › 42 |
43 |
44 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /widgets/scrollbox/content_size/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | ScrollBox 6 | 7 | 8 | 13 | 15 | 16 | 17 | 18 |
19 |
20 |

内容开始

21 |

text

22 |

text

23 |

text

24 |

text

25 |

text

26 |

text

27 |

text

28 |

text

29 |

text

30 |

text

31 |

内容结束

32 |
33 |
34 | 35 | 36 | 37 |
38 |
39 |

内容开始

40 |

text

41 |

text

42 |

text

43 |

text

44 |

text

45 |

text

46 |

text

47 |

text

48 |

text

49 |

text

50 |

内容结束

51 |
52 |
53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /widgets/scrollbox/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 滚动框 6 | 7 | 8 | 9 | 10 |
11 |

滚动框

12 | 13 |

示例

14 |

滚动行为

15 |

滚动框的滚动行为与系统默认的滚动行为完全一致。

16 |

除了拖拽滚动条、点击轨道外，还可以通过在滚动内容区域使用鼠标滚轮、PageUp、PageDown、Home、End、上下箭头、空格键，点击锚点，拖拽内容，调用脚本等方式来使滚动框的内容滚动。

17 | 18 |

滚动区域的尺寸

19 |

默认情况下，滚动区域的尺寸等于滚动框的尺寸减去轨道的尺寸。

20 |

可以通过配置 data-content-shrink 来指定“滚动区域”右侧与“滚动框”右侧的间距。

21 |

本例新建了两个滚动框，并将第二个滚动框的 data-content-shrink 设置为 20：

22 |
23 | 24 |

滚动条的最小高度

25 |

当可滚动的内容很长时，滚动条可能会变得很短。在这种情况下，可能需要限制滚动条的最小高度。

26 |

可以通过配置 data-scrollbar-min-height 来指定滚动条的最小高度。

27 |

如果没有指定 data-scrollbar-min-height，则使用 20 作为默认值。

28 |

本例新建了两个内容足够长的滚动框，并将第二个滚动框的 data-scrollbar-min-height 设置为 50：

29 |
30 | 31 |

更新滚动条

32 |

当滚动框的尺寸、可见性或其内容区域的滚动高度发生变化时，需要调用 update 方法来校正滚动条的位置。

33 |

如果内容区域不需要滚动即可完全显示，则滚动条将被隐藏。

34 |

本例新建了一个可以隐藏、显示、伸缩尺寸的滚动框：

35 |
36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /widgets/scrollbox/scrollbar_min_height/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | ScrollBox 6 | 7 | 8 | 25 | 27 | 28 | 29 | 30 |
31 |
32 |

内容

33 |

text

34 |

text

35 |

text

36 |

text

37 |

text

38 |

内容

39 |

text

40 |

text

41 |

text

42 |

text

43 |

text

44 |

内容

45 |
46 |
47 | 48 | 49 | 50 |
51 |
52 |

内容

53 |

text

54 |

text

55 |

text

56 |

text

57 |

text

58 |

内容

59 |

text

60 |

text

61 |

text

62 |

text

63 |

text

64 |

内容

65 |
66 |
67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /widgets/scrollbox/scrollbar_min_height/scrollbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/scrollbox/scrollbar_min_height/scrollbar.png -------------------------------------------------------------------------------- /widgets/scrollbox/scrollbar_min_height/track.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/scrollbox/scrollbar_min_height/track.png -------------------------------------------------------------------------------- /widgets/scrollbox/update/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | ScrollBox 6 | 7 | 8 | 9 | 19 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 |
32 |

START

33 |

text

34 |

text

35 |

text

36 |

text

37 |

text

38 |

END

39 |
40 |
41 | 42 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /widgets/slideshow/animation/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/1.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/2.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/3.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/4.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/5.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/6.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/7.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/pointer.png -------------------------------------------------------------------------------- /widgets/slideshow/animation/slide.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Slideshow 6 | 7 | 8 | 23 | 24 | 25 |
26 | 35 |
36 |
37 |
38 | 39 | 任他凡事清浊，为你一笑间轮回甘堕。 40 |
41 |
42 | 43 | 如花美眷，似水流年，回得了过去，回不了当初。 44 |
45 |
46 | 47 | 君不见，高堂明镜悲白发，朝如青丝暮成雪！ 48 |
49 |
50 | 51 | 天不老，情难绝。心似双丝网，中有千千结。 52 |
53 |
54 | 55 | 四海皆兄弟，谁为行路人。 56 |
57 |
58 | 59 | 天高地迥，绝宇宙之无穷；兴尽悲来，识盈虚之有数。 60 |
61 |
62 | 63 | 煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急？ 64 |
65 |
66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /widgets/slideshow/animation/thumbnail_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/thumbnail_1.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/thumbnail_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/thumbnail_2.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/thumbnail_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/thumbnail_3.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/thumbnail_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/thumbnail_4.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/thumbnail_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/thumbnail_5.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/thumbnail_6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/thumbnail_6.jpg -------------------------------------------------------------------------------- /widgets/slideshow/animation/thumbnail_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/animation/thumbnail_7.jpg -------------------------------------------------------------------------------- /widgets/slideshow/customizing/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/customizing/1.jpg -------------------------------------------------------------------------------- /widgets/slideshow/customizing/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/customizing/2.jpg -------------------------------------------------------------------------------- /widgets/slideshow/customizing/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/customizing/3.jpg -------------------------------------------------------------------------------- /widgets/slideshow/customizing/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/customizing/4.jpg -------------------------------------------------------------------------------- /widgets/slideshow/customizing/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/customizing/5.jpg -------------------------------------------------------------------------------- /widgets/slideshow/customizing/buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/customizing/buttons.png -------------------------------------------------------------------------------- /widgets/slideshow/customizing/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Slideshow 6 | 7 | 8 | 28 | 29 | 30 |
31 | 38 |
39 | 40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /widgets/slideshow/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 幻灯片播放器 6 | 7 | 8 | 9 | 10 |
11 |

幻灯片播放器

12 | 13 |

示例

14 |

切换方式

15 |

切换幻灯片的方式共有四种，这四种方式是可以共存的。

16 | 17 |

自动切换

18 |

可以通过配置 data-interval 来指定自动切换的时间，这样当一张幻灯片显示的时间超过一定时间后，会自动切换到下一张。

19 |

如果启用了自动切换功能，当鼠标指针进入幻灯片播放器的区域后，自动切换将停止，当鼠标指针离开幻灯片播放器的区域后，自动切换将继续进行。

20 |

本例新建了一个幻灯片播放器，并将 data-interval 设置为 2000：

21 |
22 | 23 |

点击切换

24 |

如果幻灯片有对应的指示器，则通过鼠标点击指示器，也能切换幻灯片。

25 |

本例在上例的基础上，添加了指示器（一般都建议加上指示器，以提高用户对本组幻灯片的可预见性）：

26 |
27 | 28 |

悬停切换

29 |

如果指定了“鼠标悬停播放延时”，则还可以通过鼠标指向一个指示器来切换幻灯片。

30 |

通过配置 data-hover-delay，可以指定鼠标悬停播放延时。

31 |

本例在上例的基础上，将配置项 data-hover-delay 设置为 100：

32 |
33 | 34 |

脚本切换

35 |

通过调用幻灯片播放器的 show、showPrevious 和 showNext 方法，也能激活指定的选项卡。

36 |

本例在上例的基础上，增加了调用以上方法的测试按钮：

37 |

38 |
39 | 40 |

无需切换的情况

41 |

如果幻灯片小于两个，则没有必要对幻灯片进行切换。在这种情况下：

42 | 46 |

本例在上例的基础上，将幻灯片和指示器的数量都修改为一个：

47 |
48 | 49 | 50 |

动画效果

51 |

可以通过配置 data-animation 来指定幻灯片切换时使用的动画效果，可选项有 'none'，'fade', 'cover' 和 'slide'。

52 |

如果没有指定 data-animation，则使用 'fade' 作为默认值。

53 |

本例新建了一个幻灯片播放器，并将其 data-interval 设置为 3000，data-hover-delay 设置为 0（鼠标指向指示器即切换对应的幻灯片），data-animation 设置为 'slide'：

54 |
55 | 56 |

更多定制

57 |

一个 Widget 本身仍是一个元素，因此可以灵活的进行各种扩展。

58 |

本例新建了一个包含“播放上一张”和“播放下一张”按钮的幻灯片播放器，它们将在鼠标移入幻灯片播放器时显示，在鼠标移出幻灯片播放器时隐藏。另外，当鼠标移入幻灯片播放器中时，可以使用鼠标滚轮来切换幻灯片：

59 |
60 | 61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /widgets/slideshow/show/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/show/1.jpg -------------------------------------------------------------------------------- /widgets/slideshow/show/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/show/2.jpg -------------------------------------------------------------------------------- /widgets/slideshow/show/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/slideshow/show/3.jpg -------------------------------------------------------------------------------- /widgets/slideshow/show/auto.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Slideshow 6 | 7 | 8 | 14 | 15 | 16 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /widgets/slideshow/show/by_click.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Slideshow 6 | 7 | 8 | 19 | 20 | 21 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /widgets/slideshow/show/by_hover.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Slideshow 6 | 7 | 8 | 19 | 20 | 21 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /widgets/slideshow/show/by_script.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Slideshow 6 | 7 | 8 | 9 | 20 | 21 | 22 | 34 | 35 |
36 | 37 |
38 | 39 | 40 |
41 | 42 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /widgets/slideshow/show/single.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Slideshow 6 | 7 | 8 | 9 | 20 | 21 | 22 | 30 | 31 |
32 | 33 |
34 | 35 | 36 |
37 | 38 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /widgets/tabpanel/activate/by_click.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | TabPanel 6 | 7 | 8 | 20 | 21 | 22 |
23 | 28 |
29 |
一
30 |
二
31 |
三
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /widgets/tabpanel/activate/by_hover.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | TabPanel 6 | 7 | 8 | 20 | 21 | 22 |
23 | 28 |
29 |
一
30 |
二
31 |
三
32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /widgets/tabpanel/activate/by_script.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | TabPanel 6 | 7 | 8 | 9 | 21 | 22 | 23 |
24 | 29 |
30 |
一
31 |
二
32 |
三
33 |
34 |
35 |
36 | 37 |
38 | 39 |
40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /widgets/tabpanel/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 标签面板 6 | 7 | 8 | 9 | 10 |
11 |

标签面板（选项卡）

12 | 13 |

示例

14 |

激活方式

15 |

激活选项卡的方式共有三种，这三种方式是可以共存的。

16 | 17 |

点击激活

18 |

点击选项卡的标签即可切换活动选项卡。

19 |

本例新建了一个标签面板：

20 |
21 | 22 |

悬停激活

23 |

24 | 如果指定了“鼠标悬停激活延时”，则还可以通过鼠标指向选项卡的标签来切换活动面板。
25 | 通过配置 data-hover-delay 来指定鼠标悬停激活延时。 26 |

27 |

本例在上例的基础上，将配置项 data-hover-delay 设置为 200：

28 |
29 | 30 |

脚本激活

31 |

通过调用标签面板的 activate 方法，也能激活指定的选项卡。

32 |

本例在上例的基础上，增加了调用该方法的测试按钮：

33 |
34 | 35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /widgets/tabpanel/nested/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | TabPanel 6 | 7 | 8 | 9 | 21 | 22 | 23 |
24 | 29 |
30 |
一
31 |
32 |
33 | 38 |
39 |
一
40 |
二
41 |
三
42 |
43 |
44 |
45 |
三
46 |
47 |
48 |
49 | 50 |
51 | 52 |
53 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /widgets/validator/custom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单验证器 6 | 7 | 8 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 46 | 47 | 48 | 49 | 50 | 55 | 56 | 57 | 58 | 62 | 63 | 64 | 65 |
电子邮箱： 42 |

请输入有效的 EMail 地址

43 |

通过

44 |

45 |
手机号码： 51 |

请输入有效的手机号码

52 |

通过

53 |

54 |
59 | 60 | 61 |
66 |
67 | 68 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /widgets/validator/events/remote.txt: -------------------------------------------------------------------------------- 1 | {"errorMessage": "账号已存在"} 2 | -------------------------------------------------------------------------------- /widgets/validator/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 表单验证器 6 | 7 | 8 | 9 | 10 |
11 |

表单验证器

12 | 13 |

示例

14 |

添加验证规则

15 |

表单验证器只会对配置了验证规则的表单域进行验证。

16 | 17 |

客户端验证

18 |

如果所有的验证规则均可以在客户端完成，则表单验证器在触发 validate 事件之后，将同步触发 validated 事件。

19 |

本例新建了一个表单验证器，并为各表单域均配置了多条客户端验证规则，其中账号要求必填，最少 3 个字符，最多 20 个字符，且只能由英文字母、数字和下划线组成；密码要求必填，最少 6 个字符，最多 20 个字符：

20 |
21 | 22 |

服务端验证

23 |

服务端验证只会在必要时进行，表单验证器在触发 validate 事件之后，将在所有的服务端验证结束后异步触发 validated 事件。

24 |

本例在上例的基础上，添加了一个验证码字段，并为其添加了一条服务端验证规则：

25 |
26 | 27 | 28 |

删除验证规则

29 |

删除某个表单域的验证规则时，该表单域已显示的提示信息也将被清除。

30 |

本例新建了一个表单验证器，仅当选中“订阅更新”复选框时，“订阅邮箱”字段才需要被验证：

31 |
32 | 33 |

指定关联表单域

34 |

如果为某个表单域指定了关联表单域，则在验证本表单域的值时，还会对指定的关联表单域进行验证。

35 |

本例新建了一个表单验证器，其中“电子邮箱”和“手机号码”两者只要正确填写一个即可：

36 |
37 | 38 |

事件监听

39 |

表单验证器在一个表单域开始和结束验证时，以及本表单开始和结束验证时会依次触发 fieldvalidate、fieldvalidated、validate 和 validated 事件。

40 |

本例新建了一个表单验证器，并能在右侧的信息记录面板中，即时显示当前发生的事件及状态：

41 |
42 | 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /widgets/validator/rules/add_client.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单验证器 6 | 7 | 8 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 | 50 |
帐　号：

密　码：

45 | 46 |
51 |
52 | 53 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /widgets/validator/rules/add_remote.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单验证器 6 | 7 | 8 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 61 | 62 | 63 | 64 | 67 | 68 | 69 | 70 |
帐　号：

密　码：

验证码：captcha 57 |

验证中……

58 |

正确

59 |

60 |
65 | 66 |
71 |
72 | 73 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /widgets/validator/rules/captcha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/validator/rules/captcha.png -------------------------------------------------------------------------------- /widgets/validator/rules/captcha.txt: -------------------------------------------------------------------------------- 1 | {"errorMessage": "验证码错误"} 2 | -------------------------------------------------------------------------------- /widgets/validator/rules/correct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/validator/rules/correct.png -------------------------------------------------------------------------------- /widgets/validator/rules/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/validator/rules/error.png -------------------------------------------------------------------------------- /widgets/validator/rules/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s79/OurJS/837281e29856b35a4f6fd4e6cd42822e7ba290aa/widgets/validator/rules/info.png -------------------------------------------------------------------------------- /widgets/validator/rules/remove.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表单验证器 6 | 7 | 8 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 54 | 55 | 56 | 57 |
订阅更新：

订阅邮箱：

电话号码：

52 | 53 |
58 |
59 | 60 | 104 | 105 | 106 | 107 | --------------------------------------------------------------------------------