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


Posted in Javascript onMarch 10, 2007

之前在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);

//左边动画效果,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));

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');

3.View的使用方式

//XML:index方式访问字段;JSON:直接使用字段名
var tpl = new YAHOO.ext.Template( 
	'<div class="thumb">'+
	'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+
	' src=userfiles/image/lite_'+who+'/{0}></div>' + 
	'<div>文件大小: {1}</div>'+
	'</div>'
); 
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 : '<div style="padding:10px;">没有匹配的内容!</div>'
}); 
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);

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'); 
};

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

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

mainView.on('click', function(vw, index, node, e){
	alert('Node "' + node.id + '" at index: ' + index + ' was clicked.');
});
可得到index但node.id无法获取。我只好用较丑陋的方式实现:
//在Domhelper中“硬”输出click事件
var tpl = new YAHOO.ext.Template( 
	'<div class="thumb">'+
	'<div><img onclick=popupDialog("userfiles/image/'+who+'/{0}",{2},{3}) '+
	' src=userfiles/image/lite_'+who+'/{0}></div>' + 
	'<div>文件大小: {1}</div>'+
	'</div>'
);

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

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
Seajs的学习笔记
Mar 04 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 #Javascript
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 #Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 #Javascript
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 #Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 #Javascript
学习YUI.Ext 第三天
Mar 10 #Javascript
学习YUI.Ext 第二天
Mar 10 #Javascript
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
教师岗位职责范本
2013/12/29 职场文书
装饰活动策划方案
2014/02/11 职场文书
大班上学期个人总结
2015/02/13 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
工作年限证明范本
2015/06/15 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers