??xml version="1.0" encoding="utf-8" standalone="yes"?>
]]>
]]>
]]>
]]>
]]>
]]>//html代码
<div id="win" class="x-hidden">
</div>
//js代码
var w=new Ext.Window({
contentEl:"win",//M昄的html元素Q也可以写ؓel:"win"
width:300,
height:200,
title:"标题"
});
w.show();
参数介绍Q?br />
因ؓ前面已经介绍了panellgQ下面只介绍windowlg的几个其他特别的配置参数
//几个前面没有介绍的window自己的配|参?/span>
1.closeAction:枚DgؓQclose(默认?Q当点击关闭后,关闭windowH口
hide,关闭后,只是hiddenH口
2.closable:true在右上角昄叉叉的关闭按钮Q默认ؓtrue
3.constrainQtrue则强制此window控制在viewportQ默认ؓfalse
4.modal:true为模式窗口,后面的内定w不能操作Q默认ؓfalse
5.plainQ?/span>//true则主体背景透明Qfalse则主体有差别的背景Ԍ默认为false
实例介绍Q?br />
1.嵌套了tabpanel的window
var w=new Ext.Window({
contentEl:"win",
width:300,
height:200,
items:new Ext.TabPanel({
activeTab:0,//当前标签为第1个tabQ从0开始烦引)
border:false,
items:[{title:"tab1",html:"tab1在windowsH口?/span>"},{title:"tab2",html:"tab2在windowsH口?/span>"}]//TabPanel中的标签,以后再深入讨?/span>
}),
plain:true,//true则主体背景透明Qfalse则主体有差别的背景Ԍ默认为false
title:"标题"
});
w.show();
我们通过items把TabPanellg嵌套在window的主体中M?br />
我们在添加工h看看
// bbar:[{text:"定"},{text:"取消",handler:function(){w.close();}}],//bottom?/span>
buttons:[{text:"定"},{text:"取消",handler:function(){w.close();}}],//footer?/span>
buttonAlign:"center",//footer部按钮排列位|?q里是中?/span>
// collapsible:true,//右上角的收羃按钮
]]>
]]>
]]>
]]>fun = function(){
alert("执行");
}();
//alert(fun);
fun = function(){
alert("执行");
return "q回的是字符?/span>";// q回的是个字W串
}();
//alert(fun)
扩展Q?br />
if(!Person.extend){//若extend属性还未存在则执行里面的代?nbsp;
Person.applay(Person,{
extend:function(){
alert("定义时执?/span>");
return function(){
alert("hello");
}
}()// 注意q里加了一?)Q表C在new一个Person对象的时候就会立x行extend后面定义的方法,q且q回里面return的方法给extend属性,
//那么q样Qextend是一个方法类型的属性了
});
}
匿名ҎQ?br />
//先定义匿名方法,W一个括号对里的Q必要有这个括号对Q之后第二个括号对用来执行这个匿名方法,如果q个匿名Ҏq回的是functionQ那么可以加W三个括号对?nbsp;
(function(){
alert("aa")
return function(){
alert("bb");
}
})();// 输出l果Qaa
//带参数的匿名Ҏ使用
(function(a,b){
alert(a);
alert(b);
return function(c){
alert(c);
}
})("匿名Ҏ的第一个参数?/span>","匿名Ҏ的第二个参数?/span>")("调用匿名Ҏ执行后返回方法所需要的参数?/span>");
// 输出l果Q匿名方法的W一个参数|匿名Ҏ的第二个参数|调用匿名Ҏ执行后返回方法所需要的参数?nbsp;
]]>
一个简单的RSS readerQ读取远Exml数据ZAJAX,PHP,MYSQL的RSS源,
q个例子允许用户在一个网中查看多种源内?
2.Ajax 桌面
该指南是一个手把手教程Q通过它你可以创徏一个类?
?a target="_blank">PageFlagePageFlage ?
Netvibes的桌?|页。这个指南的目的是展CZ些基于web应用E序的技巧,q些技巧也是比较常用的Q比如操UDOMQ事件监听,dq程数据.
Ajax Desktop demo
3.AJAX for chat
使用异步JS,XML,PHP创徏一个简单的Zweb的聊天客L
4.使用AJAX和del.icio.us创徏自己的信息空?/a>
使用del.icic.us APIQ但是方法和思想可以适用与其他流行的服务Q如Q?a target="_blank">DIGG?a target="_blank">Flickr
5.AJAX轻量图表
使用动态读取数据允许用户创拟的囑Ş(falsh with ajax)?
该方案涉及到js脚本交互Q和setData和setStyleҎ
6.使用ajax和PHP创徏日历
使用ajax和PHP创徏一个日历组Ӟ月䆾转换无须h面
Quick Calendar demo
7.如何在你的网站中使用ajax整合google日历
该指南展CZ如何在一个网里创徏一个调用一个公qGoogle日历
AJAX calendar demo
8.Edit-in-Place with jQuery
Edit In Place demo 1
Edit In Place demo 2
9.创徏一个AJAX星评定构g
评定pȝQ无ȝL钮或者刷新页?那通过什么?Q点L章的链接Q?Q?
使用js框架/库:DOJO,JQUERYQmootools,Prototype JS
10.使用AJAX上传文g
AJAX File Uploader demo
11.使用AJAXQPHP创徏mailing列表
使用MYSQL储存用户输入的数据,Prototype JS 用于化AJAXh和绑定时间处?
12Q?a target="_blank">安全的联pMh表单
Safer Form demo
13. Ajax with CAPTCHA
14.ZAJAX的登陆表?/a>
异步验证输入的数据,使用jQuery form plugin和PHP处理h
Ajax-based login form demo
15. AJAX效果(for message box)
在该效果图中Q用L击save按钮Q提C框颜色逐渐消退
Nice Ajax Effects for messages box demo
16. 文字自动提示
cMgoogle的效?
AutoCompleter tutorial demo
17.自动填充选择?/a>
使用jQuery&AJAX,无须h面Q自动填充内?
Auto-populating Select Boxes demo
18.ajax下拉菜单
Ajax Dropdown Menu demo
19.Ajax/PHP Shoutbox
AJAX Shoutbox demo
20. 选项?/a>
通过ajax填充数据, 使用PHP和Prototype JS
Building Tabbed Content demo
21.Load In and Animate Content
展示如何d数据C个页面,使用jQuery处理Ajaxh和处理DOM
Load In and Animate Content demo
22. The Hows and Whys of Degradable Ajax
Degradable Ajax demo
23.使用避免多余的Ajax交互
使用该方法,可以在数据没有更新的情况下,量减少不必要的数据库状态的改变和计过E?
24.更好的AJAX Back Button Solution
A Better Ajax Back Button demo
25.Making Ajax Work with Screen Readers
]]>
]]>
]]>
]]>
]]>
我的理解Q?br />
闭包是在一个Outer函数中申明另一个inner函数Q当outer函数调用后,他的变量Variable 不会消失Q仍然可以被inner函数所使用Q而且所有的inner函数都拥有对Variable 的引?br />
var outer=function(){
var num=666;
var getNow=function(){
alert(num);
}
// num++;
return getNow;
}
var c=outer();
c(); //------666
]]>
]]>
]]>
在项目中使用ExtJS已经有一D|间了Q?对于q个庞大的Scriptcd有了一定的了解Q?在Ext的用上也有了一定的l验Q?现将q些l验做一下ȝQ?作ؓ一个入门材料给大家分n?对于Ext库, 不要被它的庞大所吓倒, 只要静下心来看SDKQ?多做一些练习, q是很容易上手的?/p>
ExtJS 中的cMl承
在Ext下, 定义一个JavaScriptcM乎没有什么特别的Q?可以直接声明一个构造函敎ͼ q用关键字new来进行初始化?有一点值得注意的是在Ext中频J出现的Singletonc, 普遍定义为:
事g
事g是指一个特定的动作Q这个动作可以针对HTML元素的,如keydown,keyup,mouseover, mouseout{,也可以是对于其它自定义的动作Q如对Ajax异步h的响应等。在ExtJS中,该如何处理呢Q?/p>
1. 处理HTML元素的标准事?/p>
HTML元素的标准事件是指mouseover、mousedown、click、blur、focus、change{能够直接对HTML元素发生的事件。在ExtJS中,q些事g的处理可以用如下的代码:
注册一个事件处理函C用: Ext.get('myElement').on('click', myHandler, myScope) myElement是要注册的元素的IDQclick是事件的名称Q注意,和HTML元素中的声明onXXX不同Q这里不需要onQ,myHandler是处理函数的函数名称QmyScope是一个可选的参数Q指定处理函数绑定的对象Q也是处理函数的作用域Q如果不提供q个参数Q则是默认的window?
撤销一个事件处理函敎ͼ Ext.get('myElement').un('click', myHandler, myScope) 参数的意义同上?br />
ExtJS会根据不同的览器进行相应的处理Q根本不需要理会用L的是什么浏览器。根据事件的不同Q传l处理函数的参数也会不同Q这个只能参考ExtJS的文档了Q必要时q得参考源代码?/p>
2. 处理自定义事?/p>
在ExtJS中用自定义事gQ需要从Ext.util.Observablel承Q示例代码如下:
在这D代码中Q定义了一个Employeec,定义了fired和quit两个事g。如何触发这两个事g呢,基类Ext.util.Observable提供了触发自定义事g的方法fireEvent(eventName, arg1, arg2, ... argn), eventName是要触发的时间的名称Q不区分大小写)Q后面的参数arg1Qarg2{是要传l事件处理函数的参数。用上面的EmployeecdCZQ触发quit事gQ?/p>
this.fireEvent('quit', this);
q行代码触发quit事gQƈEmpolyeecȝ实例传给quit事g的处理函敎ͼquit事g的订阅可以采用如下代码:
在上面的代码中,为quit事g注册了两个处理函敎ͼmyHandler1与myHandlerQ,当quit事g被激发时Q将会依ơ调用myHandler1和myHandler2两个函数?/p>
值得注意的是Q不是HTML元素的标准事件还是自定义事gQ如果ؓ某个旉注册了多个处理函敎ͼ如前面的例子Q如果myHandler1q回false的话Q则会取消在myHandler1之后注册的处理函数的执行Q即该事件被取消Q从而停止l执行该事g的处理函敎ͼ而这个返回值false会作Z件激发的l果Q返回给empolyeeQ即Q?br />
该函数document.evaluate函数暂且不支持所有浏览器QIE不支?/font> 使用 Greasemonkey 时会遇到的功能最为强大的一个工具就?evaluate 函数。通过使用XPathq种查询语言Q它可以用来L面中的元素Q属性和文本?/p> 举个例子来说Q如果您惌得某个页面上的全部链接。您也许会想C用document.getElementsByTagName('a')Q但是如果您q要l箋查是否每个链接都hhref属性,因ؓ<a>q可以用来作为锚名称使用Q这Ӟ您需要用Firefox内徏的XPath 支持去获取全部具有href属性的<a>元素?/p> 例子: 获取面上的全部链接 var allLinks, thisLink;
var allElements, thisElement;
如果您已l引用了某个元素Q例如上面的 thisElementQ,您就可以?thisElement.nodeName 来替代它所对应的在 HTML 面中的标签名称。如果被讉K的这个页面是?text/html 的方式被服务器执? 那么标签名称L用大写子母返回,不论它在原始面是如何定义的?如果面?application/xhtml+xml 方式? 那么标签名称׃以小写子母返回?不论哪种情况Q我L?nbsp; thisElement.nodeName.toUpperCase() 得到大写的标{U?nbsp;
var allDivs, thisDiv;
function xpath(query) { 在定义了q个函数之后Q您可以调?xpath('//a[@href]') 来获得某个页面上的全部链? 或者调?xpath('//* [@title]') 来获得具?title 属性的元素。您仍然需要通过 snapshotItem 函数来访问结果中的每一,q个函数的类型ƈ不是一个规则的Javascript数组?/p> |
名称Q?65天气ҎIP自动获得当地的天气情?br /> 代码Q?/p>
<iframe src="http://weather.265.com/weather.htm" width="168" height="54" frameborder="no" border="0" marginwidth="0&quoat; marginheight="0" scrolling="no"></iframe>
效果Q?/p>
说明 Q直接调?/p>
名称QQQ天气预报代码Q一Q?br />
代码 Q?lt;iframe width="145" height="130" border="0" align="center" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://minisite.qq.com/Weather/news_new.h tml" allowTransparency="true"></iframe>
效果 Q?/p>
说明 Q这U适合于在|页的边栏插入。但一个缺ҎQ上面的4个城市是既定的,无法Ҏ别的。插 入时Q选好|页上的位置Q直接将左栏的源代码全部拯d行了
名称QQQ天气预报代码Q二Q?br />
代码 Q?lt;IFRAME ID='ifm2' WIDTH='189' HEIGHT='190' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='http://weather.qq.com/inc/ss258.htm'></IFRAME>
效果 Q?/p>
说明 Q这U?也适合于在|页的边栏插入。上?的城市可以自定,比如厦门可改成别的。定制的Ҏ是修Ҏ代码中标U的数字Q从1开始代?#8220;??#8221;开始,每个数字都代表一个城市,厦门?87Q具体要哪个城市自己找一下Ş?/p>
名称Q新天气预报代?br />
代码 Q?lt;IFRAME ID='ifm2' WIDTH='260' HEIGHT='70' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' src="http://news.sina.com.cn/iframe/weather/130101.html"></iframe>
效果 Q?/p>
说明 Q这U适合于在|页的头栏插入。上面的城市可以自定Q比?矛_庄可Ҏ别的?/p>
名称QQQ天气预报代码Q三Q?br />
代码 Q?lt;iframe width="469" height="218" border="0" align="center" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://appnews.qq.com/cgi-bin/news_weather_search?city=厦门" allowTransparency="true"></iframe>
效果 Q?/p>
说明 Q这U适合于在|页的正栏插入。上面的城市可以自定Q比如厦门可Ҏ别的。定制的Ҏ是修Ҏ代码中标U的 名称。这里比较简单,直接用汉字改p了。比如是州的,你就直接?#8220;厦门”Ҏ州p?/p>
名称QQQ天气预报代码Q四Q?br />
代码 Q?lt;iframe width=160 height=230 frameborder=0 scrolling=NO src=http://appnews.qq.com/cgi-bin/news_qq_search?city=南昌></iframe>
效果 Q?/p>
说明 Q直接调?/p>
名称QQQ天气预报代码Q五Q?br />
代码 Q?lt;iframe src="http://appnews.qq.com/cgi-bin/news_qq_search?city=南昌" frameborder="0" width="160" scrolling="no" height="230"></iframe>
效果 Q?/p>
说明 Q这U适合于在|页的边栏插入。上面的城市可以自定Q比如南昌可Ҏ别的。定制的Ҏ是修Ҏ代码中标U的名称。这里比较简单,直接用汉字改p了。比如是州的,你就直接?#8220;厦门”Ҏ州p
http://www.4aqq.com/viewthread.php?tid=602
HTML selector
HTML selector 是 HTML ?tags, 比如 P, DIV, TD {? 如你?CSS 定义了它? 在整中, q个 Tag 的性质按照你的定义来昄? HTML selector 的语法如?
Class selector
Class selector 有两U? 一U叫相关 class selector, 它跟一?HTML ?tag 有关p? 它的语法?br />
ID selector
ID selector 其实跟独?class selector 的功能一? 而区别在于它们的语法和用法不? 以及对于 Javascript 操纵 HTML
元素有帮? 它的语法如下
假如我们有下面的定义#yelowone {color: yellow}我们可以q用q个定义CQ何的有同?ID 名字?tag, 比如 <SPAN ID="yellowone">text here</SPAN>你可能觉得既?ID selector 和独?class selector 功能一? Z么两者都存在? 如果你知道用 CSS-P 来定位的? 你就明白它们的区别了. ?ID ?HTML 元素可以?CSS-P?JavaScript 来操Uc?br />
包含选择W?/strong>
可以单独ҎU元素包含关pd义的样式表,元素1里包含元?Q这U方式只对在元素1里的元素2定义Q对单独的元?或元?无定义,语法如下Q?br />
样式表的层叠?/strong>
层叠性就是承性,样式表的l承规则是外部的元素样式会保留下来承给q个元素所包含的其他元素。事实上Q所有在元素中嵌套的元素都会l承外层元素指定的属性|有时会把很多层嵌套的样式叠加在一P除非另外更改。例如在DIV标记中嵌套P标记Q?br />