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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 学习YUI.Ext 第四天--对话框Dialog的使用

Javascript: jQuery中isFunction方法的BUG修复; 将函数的实际参数转换成数组的方法; javascript 删除数组中重复项（uniq）; js 巧妙去除数组中的重复项; javascript下一种表单元素获取方法存在的问题; javascript 三种数组复制方法的性能对比; js 多层叠的TAB选项卡; javascript 自动标记来自搜索结果页的关键字; 起点页面传值js,有空研究学习下; javascript 的Document属性和方法集合; JavaScript 使用简略语法创建对象的代码; 使用JQuery进行跨域请求; jquery 经典动画菜单效果代码; jquery 常用操作方法; js提示信息jtip封装代码，可以是图片或文章; javascript面向对象的方式实现的弹出层效果代码; jquery中的sortable排序之后的保存状态的解决方法; js或css实现滚动广告的几种方案; 使用JavaScript库还是自己写代码？; js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « ‹ 281 282 283 284 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 92 ::

收藏到网摘: n/a

学习YUI.Ext基础第一天 Gird组件 Part-3:范例RSSFeed Viewer

使用方法：
1.加入YUI.Ext 库到你的web程序：

<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 。如果你是一个美工，最多打交道的地方，可能就是这几个文件：

<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); //成功 

学习YUI.Ext基础第一天 Gird组件 Part-3:范例RSSFeed Viewer

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

评论 (0) All

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