学习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 ajax修改全局变量示例代码
Nov 08 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
webpack引入eslint配置详解
Jan 22 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
vuex存储token示例
Nov 11 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 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遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python File(文件) 方法整理
2019/02/18 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python实现交并比IOU教程
2020/04/16 Python
python 实现任务管理清单案例
2020/04/25 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
大专生工程监理求职信
2013/10/04 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
财务会计自荐信范文
2014/02/21 职场文书
难忘的一课教学反思
2014/04/30 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
关爱空巢老人感想
2015/08/11 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL