学习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 tools之tooltip
Jul 25 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
js实现移动端轮播图
Dec 21 Javascript
ES6的解构赋值实例详解
May 06 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
学习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
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
python的即时标记项目练习笔记
2014/09/18 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python中的测试框架
2020/11/13 Python
python制作微博图片爬取工具
2021/01/16 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
What is EJB
2016/07/22 面试题
2014年五四青年节活动策划书
2014/04/22 职场文书
单位委托书
2014/10/15 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
售后服务质量承诺书
2015/04/29 职场文书
运动会100米加油稿
2015/07/21 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android