More Related Content Similar to JavaScript 脚本控件(二) Similar to JavaScript 脚本控件(二) (20) JavaScript 脚本控件(二)2. 什么是脚本组件? 对象管理小组( Object Management Group, OMG) 的“建模语言规范”中将组件定义为:“系统中一种物理的、可代替的部件、它封装了实现并提供了一系列可用的接口。一个组件代表一个系统中实现的物理部分,包括软件代码(源代码,二进制代码,可执行代码)或者一些类似内容,如脚本或者命令文件。” 4. function Alert (title, msg) { var mask = document.createElement('div'); var alertBox = document.createElement(...); var title = document.createElement(...); var content = document.createElement(...); var close = document.createElement(...); mask.className = 'mask'; alertBox.className = 'alertbox'; title.className = 'title'; content.className = 'content'; mask.style.display = 'block'; alertbox.style.display = 'block'; } Alert ('rank', 'test'); 6. function Alert (title, msg) { this.title = title; this.msg = msg; var mask = document.createElement('div'); var alertBox = document.createElement('div'); var content = document.createElement('div'); var title = document.createElement('div'); this. setTitle = function(title) { return this.title = title; }; this. setMsg = function(msg) { { return this.msg = msg; }; this. show = function() { }; return this; }; var instanceAlert = new Alert ('rank','test'); instanceAlert. show (); 假设有一个类继承了 Alert 类,子类也有一个 setTitle 方法,那么就不好复用父类的代码了。 8. function Alert (title, msg) { this.init.apply(this, arguments); }; Object.mix( Alert .prototype, (function(){ return { init : function(title, msg){}, setTitle : function(title) {}, setMsg : function(msg) {}, show : function() {} } })()); var instanceAlert = new Alert (‘rank’,’test’); instanceAlert. show (); 13. If Panel is a base class . Dialog has a Mask . Dialog has a Popup . LayerPopup is a BasePopup . LayerPopup has delayShow , delayHide (). BaseLayer is a Panel . BaseLayer has a close button. BaseLayer has a header . BaseLayer has a footer . BaseLayer has a shadow . BaseLayer has a corner . …… Alert is a Dialog. Confirm is a Dialog . 14. —— 组件 以 人 为本。 组件接口的设计及重载 15. 一、构造函数 二、 show() 方法 layer. show (); layer. show (x); layer. show (x,y); layer. show (x,y,w); layer. show (x,y,w,h); layer. show (x,y,w,h,HTMLElement); var layer = new LayerPopup (HTMLElement); var layer = new LayerPopup (HTMLElement, config); var layer = new LayerPopup (config); Example render 16. Example layer = new LayerPopup ({ close : true, shadow : true, cue : true, corner : true, width : 500, height : 300, useESCKey : true, useIframe : true, caption : ‘title’, content : ‘<div>test</div>’, className : ‘panel pupop-t1’, autoPosition : true, delayTime : 500, }); 18. layer = new LayerPopup ({ close : true, shadow : true, cue : true, corner : true, width : 500, height : 300, useESCKey : true, caption : ‘title’, content : ‘<div>test</div>’, className : ‘panel pupop-t1’, autoPosition : true, delayTime : 500 }); layer. show (); dialog. hide (); dialog = new Dialog (); dialog. show (); dialog. hide (); MessageBox . alert ({ icon:MB_ICON.SUCCESS, caption:' 这是个示例的 messagebox', content:' 如果您的浏览器 3 秒内没有自动跳转,请点击这里 ' }).show(); MessageBox . confirm ({ caption:' 这是个示例的 messagebox', content:' 如果您的浏览器 3 秒内没有自动跳转,请点击这里 ' }).show(); 19. 大统一 —— overlaylize Behavior demo $(‘overlay-box’). overlaylize ({ type : ‘popup’, delayTime : 2000 }); $(‘overlay-box’). overlaylize ({ type : ‘dialog’, modal : true, width : 300, useIframe : true }); 21. 一、考虑 show() 接口,我要在显示的时候更改一下浮层里的内容。 二、我要在隐藏的时候,加入动画效果。 三、或者…在浮层里的表单未填完,不允许关闭浮层。 dlg = new Dialog (HTMLElement); dlg. onafterhide = function(){ dlg. show (); } dlg = new Dialog (HTMLElement); dlg. onbeforehide = function(evt){ evt. preventDefault (evt); //animation code here. dlg.fireEvent(‘hide’); } dlg = new Dialog (HTMLElement); dlg. onbeforshow = function(evt){ //bussiness code here } AOP Events ---- Before, after or more. 22. 我想要 Drag 功能… 我想要 Resize 功能… 我想要 自适应 功能… 我想要遮罩层要使用 尽量小 的内存 我想要按 ESC 键关闭浮层… 我想要 多浮层 时能够一个个关闭…