使用方法: 1.加入YUI.Ext 库到你的web程序: <!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file --> <script type="text/javascript" src="deepcms/yui/utilities_2.1.0.js"></script><script type="text/javascript" src="deepcms/yui-ext.0.33-rc1/yui-ext.js"></script> 2.加入样式表 CSS Style 。如果你是一个美工,最多打交道的地方,可能就是这几个文件: <!--YahooUI! Ext --> <link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/reset-min.css" /> <link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/resizable.css" /> <link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/tabs.css" /> <link rel="stylesheet" type="text/css" href="yui-ext.0.33-rc1/resources/css/basic-dialog.css" /> 3.加入一个holder.holder的意思是一个载体,JS处理好数据,转变成内容(Contents,文字、图片、表格等)放在这里,也可以理解为一个架子,承托所有内容。holder表现形式很简单,通常是几行div。 <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;"> <div class="ydlg-hd">中易旅游网</div> <div class="ydlg-bd"> 您没确认条款内容。</div> </div> 4.加入定义Dialog脚本,实例化Dialog: // create the HelloWorld application (single instance) var HelloWorld = function(){ // everything in this space is private and only accessible in the HelloWorld block //任何在这个区域的都是私有变量 ,只能在HelloWorld访问 var dialog, showBtn; var toggleTheme = function(){ getEl(document.body, true).toggleClass('ytheme-gray'); }; // return a public interface return { init : function(){ showBtn = getEl('goNextBtn'); //绑定一个按钮 // attach to click event 加入事件 /showBtn.on('click', this.showDialog, this, true); ///getEl('theme-btn').on('click', toggleTheme); }, showDialog : function(){ if(!dialog){ //因为采用单例模式,不能被new重复实例。这里是用懒惰的方法作判断。 dialog = new YAHOO.ext.BasicDialog("hello-dlg", { modal:true,//这段代码是dialog的一些参数,如大小、有冇阴影、是否覆盖select等 autoTabs:false, width:180, height:100, shadow:true, minWidth:508, shim: true, autoScroll: false, resizable:false, minHeight:300 }); dialog.addKeyListener(27, dialog.hide, dialog);//键盘事件Esc退出 dialog.addButton('退出', dialog.hide, dialog); } dialog.show(showBtn.dom);//参数为动画效果出现的地方 } }; }();//注意这对括号,如果没有将不会执行。 //用onDocumentReady代替windows.onload初始化程序。当DOM准备好,无须等待载入图片和其他资源;有关两者的讨论,请看这里 YAHOO.ext.EventManager.onDiocumentReady(HelloWorld.init, HelloWorld, true); 难点分析: Singleton Pattern 设计模式之单例 什么是 Singleton Pattern? Anwser: 单例模式(Singleton Pattern)是一种非常基本和重要的创建型模式。 “单例”的职责是保证一个类有且只有一个实例,并提供一个访问它的全局访问点。 在程序设计过程中,有很多情况下需要确保一个类只能有一个实例。 单例模式有什么好处? Anwser: 1.减少new操作带来的内存占用;2.在JS中,可以建立你自己的命名空间namespace. 如何实现单例模式? Anwser: 传统的编程语言中为了使一个类只有一个实例,最容易的方法是在类中嵌入静态变量,并在第一个实例中设置该变量,而且每次进入构造函数都要做检查,不管类有多少个实例,静态变量只能有一个实例。为了防止类被多次初始化,要把构造函数声明为私有的,这样只能在静态方法里创建一个实例。 请看下面的例子: 复制代码 代码如下:function __typeof__(objClass) //返回自定义类的名称 { if ( objClass != undefined && objClass.constructor ) { var strFun = objClass.constructor.toString(); var className = strFun.substr(0, strFun.indexOf('(')); className = className.replace('function', ''); return className.replace(/(^s*)|(s*$)/ig, ''); } return typeof(objClass); } function Singleton() { // template code for singleton class.静态属性判断是否重复生产new对象 if ( this.constructor.instance ) { return this.constructor.instance; } else{ alert("else");this.constructor.instance = this; } this.value = parseInt(Math.random()*1000000); this.toString = function(){ return '[class Singleton]'; } } Singleton.prototype.GetValue = function(){return this.value; }; Singleton.prototype.SetValue = function(value){ this.value = value; }; var singleton = new Singleton(); alert(__typeof__(singleton)); alert(singleton.GetValue()); alert(singleton.GetValue()); singleton.SetValue(1000000); var singleton = new Singleton(); alert(singleton.GetValue()); alert(singleton.GetValue()); 第二个和第三个是random出来的。总之有两组结果是一样的。可以看出Singleton的模式下,对象实例化一次后,其属性或变量不会变化(哪怕是new的操作),除非你人为地修改。 上面的例子通过调用Constructor静态属性来获得对象确实可以保证“唯一实例”,然而,这个例子的失败之处在于它并没有有效地禁止Singleton对象的构造,因此如果我们在程序代码中人工加入new Singleton (),仍然可以获得到多个对象而导致模式失败。因此要完全实现Singleton并没有想象中那么简单。 于是我们进一步思考,得到了下面第三种方法,这种方法巧妙利用了“匿名”函数的特征来禁止对SingletonObject类构造函数的访问,可以说比较好的模拟了私有构造函数的特性,从而比较完美地解决了用javascript实现Singleton Pattern的问题。 复制代码 代码如下:(function(){ //instance declared //SingletonFactory Interface SingletonFactory = {getInstance : getInstance} //private classes function SingletonObject(){ SingletonObject.prototype.methodA = function() {alert('methodA');} SingletonObject.prototype.methodB = function() { alert('methodB'); } SingletonObject.instance = this; } //SingletonFactory implementions function getInstance(){ if(SingletonObject.instance == null) return new SingletonObject(); else return SingletonObject.instance; } })(); var instA = null; try { alert("试图通过new SingletonObject()构造实例!"); instA = new SingletonObject(); } catch(e){alert("SingletonObject构造函数不能从外部访问,系统抛出了异常!");} instA = SingletonFactory.getInstance(); //通过Factory上定义的静态方法获得 var instB = SingletonFactory.getInstance(); instA.methodA(); instB.methodA(); alert(instA == instB); //成功
推荐阅读
实例学习Javascript之构建方法、属性
我爱你中国
爱你中国
中国爱你
很爱你中国
我爱你中国
爱你中国
中国爱你
很爱你中国
[Ctrl+A 全选>>>详细阅读
本文标题:学习YUI.Ext 第四天--对话框Dialog的使用
地址:http://www.17bianji.com/kaifa2/JS/30773.html
1/2 1