学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例_YUI.Ext相关

WBOY
Release: 2016-05-16 19:16:59
Original
1212 people have browsed it

之前在Part 1简单介绍了Veiw和JSONView。今天这里小弟为大家说说应用的案例,原本Jack的Image Chooser是一个非常好的案例,当中包含Jack大量的奇技淫巧,不过正因为这样,过于深奥,小弟我亦不能全盘吃透,只挑其“勃大茎深”之处,与君共勉之!
本文包含四大知识点:1.在LayoutDialog中加入Tabs;2.View的使用方式;3.JSONView的使用方式;4.获取XML/JSON的fields值与分页

演示地址

View之定义
A View is generally used to build a quick template-based display of datamodel, rather than building a more complex grid. I thnk there's a blog post that illustrates doing this with JSON data.Templates can be used for any repetitious html creation, not necessarily tied to a datamodel.
主要的意思是View用于展示DataModel的数据,Part 1已经说过。这里是来自fourm某君的补充。

代码点评:

1.先看一段简单的

//用yui.ext做翻转按钮, super easy(美工最爱!?^^) showBtn = getEl('showIntro'); showBtn.on('click', this.showDialog, this, true); showBtn.applyStyles("cursor:pointer"); showBtn.on('mouseover', function(){showBtn.dom.src='images/over_10.gif'}, this, true); showBtn.on('mouseout', function(){showBtn.dom.src='images/btn_10.gif'}, this, true);
Copy after login

//左边动画效果,createDelegate()负责轮换效果 var luo=getEl("left_pic"); luo.move('right', 250, true, .1, function(){ luo.dom.src='images/'+who+".gif"; luo.move('left', 250, true, .15, null, YAHOO.util.Easing.easeOutStrong); }.createDelegate(this));
Copy after login

2.在LayoutDialog中加入Tabs

LayoutDialong分两个区域:west & center。而center之中我们要加入tabs,并逐一附加active的事件

var center = layout.getRegion('center'); var tab1 = new YAHOO.ext.ContentPanel('luo', {title: '罗老师作品'}); center.add(tab1); center.add(new YAHOO.ext.ContentPanel('chen', {title: '陈老师作品'})); 
//center.on('panelactivated',function(){ // alert(center.titleTextEl); //}, this, true); //center.showPanel('center'); /*two ways to activate the tabs.and tabs= many CPs 如果在BasicDialog中,只需要dialog本身就可以获取getTabs,因为Dialog本身就是 唯一的一个Region; 但在LayoutDialog中,Region是多个的,所有要指明哪个一个Region才行 */
// stoe a refeence to the tabs 获取TABS集合 var tabs = layout.getRegion('center').getTabs();//逐一加入事件 tabs.getTab('center').on('activate', function(){this.show_thumb('student')}, this, true); tabs.getTab('luo').on('activate', function(){this.show_thumb('luo')}, this, true); tabs.getTab('chen').on('activate',function(){this.show_thumb('chen')}, this, true); //center.showPanel('chen'); //用Region激活也可以 /*Tips:不能立即激活事件,会点延时,经过多行代码的延时便ok !用addbufferlistener理论上也可以*/ layout.getRegion('center').getTabs().activate('center');
Copy after login

3.View的使用方式

//XML:index方式访问字段;JSON:直接使用字段名 var tpl = new YAHOO.ext.Template( '
'+ '
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例_YUI.Ext相关
' + '
文件大小: {1}
'+ '
' ); tpl.compile(); //“编译DOM”加速 var schema = { tagName: 'row',//Item项 id: 'id',//ID如不需要时,设置空白字符串,不能取消! fields: ['filename','filesize','width','height']//读取的字段 }; var dm = new YAHOO.ext.grid.XMLDataModel(schema); var mainView = new YAHOO.ext.View('pic_'+who, tpl, dm, { singleSelect: true,//If JSON,还需指定一个config:jsonRoot emptyText : '
没有匹配的内容!
' }); dm.on('load',function(){}, this, true); mainView.on('click', function(vw, index, node, e){ //alert('Node "' + node[] + '" at index: ' + index + ' was clicked.') },this, true); mainView.prepareData = function(data){ // prepare,用于自定义格式 //如JSON方式直接属性名访问,e.g data.sizeString = formatSize(data.size); data[1] = formatSize(data[1]); return data; }; //用DataModel加载文件,如果是JSONView,这个服务由JSONView本身(UpdateManager)提供 dm.load('xml.asp?who='+who);
Copy after login

4.JSONView的使用方式

var dh = YAHOO.ext.DomHelper; dh.append(document.body, {tag: 'div', id: 'editUserDialog-user'}); //XML:index方式访问字段;JSON:直接使用字段名 var tpl = new YAHOO.ext.Template('
Username: {username}
' + '
Birthday: {birthday}
' + '
Member Since: {join_date}
' + '
Last Login: {last_login}
'); tpl.compile(); var mainView = new YAHOO.ext.JsonView('pic', tpl, { singleSelect: true, jsonRoot: 'user', emptyText : '
No images match the specified filter
' }); mainView.load("test.asp", "id=2"); //JSONView特有的异常事件 mainView.on('loadexception', function(){onLoadException()}, this, true); var onLoadException= function(v,o){ alert('Error'); };
Copy after login

5.获取XML/JSON的fields值与分页

这两个问题放在一起讨论的原因是至今我还不能实现。如果按照jack的办法:

mainView.on('click', function(vw, index, node, e){ alert('Node "' + node.id + '" at index: ' + index + ' was clicked.'); });
Copy after login
可得到index但node.id无法获取。我只好用较丑陋的方式实现:
//在Domhelper中“硬”输出click事件 var tpl = new YAHOO.ext.Template( 
'
'+
'
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例_YUI.Ext相关 ' src=userfiles/image/lite_'+who+'/{0}>
' +
'
文件大小: {1}
'+
'
'
);
Copy after login

分页:
View的分页视乎应该通过DataModel。但我没成功过。如知道缘由的朋友恳请告之。
http://www.ajaxjs.com/yuicn/article.asp?id=20070239

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!