学习YUI.Ext 第四天 对话框Dialog的使用

输入您的搜索字词 提交搜索表单

使用方法：
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 -->  
  

  
  
3.加入一个holder.holder的意思是一个载体，js处理好数据，转变成内容（contents，文字、图片、表格等）放在这里,也可以理解为一个架子，承托所有内容。holder表现形式很简单，通常是几行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:
传统的编程语言中为了使一个类只有一个实例，最容易的方法是在类中嵌入静态变量，并在第一个实例中设置该变量，而且每次进入构造函数都要做检查，不管类有多少个实例，静态变量只能有一个实例。为了防止类被多次初始化，要把构造函数声明为私有的，这样只能在静态方法里创建一个实例。 请看下面的例子：  
[复制此代码]code:
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的问题。
[复制此代码]code:
(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); //成功
详细出处参考：http://www.jb51.net/article/8132.htm