学习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注入技巧
Jun 22 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
Angularjs过滤器使用详解
May 25 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 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中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
pytorch 求网络模型参数实例
2019/12/30 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
公务员培训自我鉴定
2014/02/01 职场文书
教师暑期培训感言
2014/08/15 职场文书
仲裁协议书
2014/09/26 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
家长高考寄语
2015/02/27 职场文书
努力工作保证书
2015/02/28 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
英镑符号 £
2022/02/17 杂记