学习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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
学习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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP URL路由类实例
2013/11/12 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
javascript call和apply方法
2008/11/24 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
vue数据控制视图源码解析
2018/03/28 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
python代码制作configure文件示例
2014/07/28 Python
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
中学生运动会入场词
2014/02/12 职场文书
自我鉴定标准格式
2014/03/19 职场文书
减负增效提质方案
2014/05/23 职场文书
项目合作协议书
2014/09/23 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
正规欠条模板
2015/07/03 职场文书
护士业务学习心得体会
2016/01/25 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript