Jquery Mobile开发以及Js对象动态绑定
动态创建对象并绑定属性:
var instantiate = function (Type, args) {
var Constructor = function () { };
Constructor.prototype = Type.prototype; var obj = new Constructor(); Type.apply(obj, args); return obj;
}; var AssetObj = function () { }; AssetObj.prototype.getAssetName = function (AssetName) {
return "AssetName:" + this[AssetName] + ",data:" + this[AssetName + "DataObjs"] + "Length:" + this[AssetName + "DataObjs"].length;
}; AssetObj.prototype.set = function (Asset, data) {
this[Asset] = Asset;
if (this[Asset + "DataObjs"] == null || this[Asset + "DataObjs"] == undefined) {
this[Asset + "DataObjs"] = new Array();
this[Asset + "DataObjs"].push(data);
} else {
this[Asset + "DataObjs"].push(data);
}
} //
var assetObjs = instantiate(AssetObj);
var regionObjs = instantiate(AssetObj); //assetObjs.set("ISCS", "ISCS_DATA1");
//assetObjs.set("ISCS", "ISCS_DATA2");
//assetObjs.set("HHO", "HHO_DATA");
//alert("person2:" + assetObjs.getAssetName('ISCS'));
//alert("person3:" + assetObjs.getAssetName('HHO')); $.each(items, function (k, v) {
assetObjs.set(v.Asset, v);
regionObjs.set(v.Region, v);
});
Jquery属性选择器:
源码示例:
//获取页面data-role="page"和data-role="dialog"的数目
//#7470
var $pages = $(":jqmData(role='page'),:jqmData(role='dialog')")
那我来大家来看一下到底是咋样实现的呢?
源码展示:
var oldFind = $.find,
jqmDataRE = /:jqmData\(([^)]*)\)/g; $.find = function(selector,context,ret,extra){
//注意这边会按照jquery mobile的特性写法,进行一层过滤
selector = selector.replace(jqmDataRE,"[data-" + ($.mobile.ns || "") + "$1]");
//比如selector为":jqmData(role='page')",替换后的"[data-role='page']"
return oldFind.call(this,selector,context,ret,extra);
};
说明;
1、其实在jquery mobile体系中,内部处理了一下$.find,对:jqmData这种选择器进行处理
Jquery Mobile开发以及Js对象动态绑定的更多相关文章
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- 18个jQuery Mobile开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- jquery mobile开发笔记之Ajax提交数据(转)
http://my.oschina.net/xiahuawuyu/blog/81763 这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对 ...
- 利用JQuery Mobile开发web app
什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...
- jQuery Mobile开发的新闻阅读器,适应iphone和android手机
程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...
- jQuery Mobile 开发中常见的问题
目录 页面缩放显示问题 页面跳转后样式丢失js失效 跳转时重复调用pageinit方法的解决办法 如何调用loading效果 1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办 ...
- Jquery学习笔记(1)--JQuery原理,与JS对象互换,核心函数
js对象转jQuery对象,$('num'), jQuery对象转js对象,$('num')[0],或$('num').get(0). 1.点击换行,each(),html(),attr(),每个h1 ...
- jquery mobile开发中页面跳转后js不执行的问题
为了实现在移动设备上的无缝客户体验,jQueryMobile默认采用AJAX的方式载入一个目的链接页面.因此,当在浏览器中点击一个链接打一个新的页面时,jQueryMobile接收这个链接,通过AJA ...
随机推荐
- Jquery ajax运用执行顺序有误怎么解决
在这儿,可能就要提示一个ajax的一个属性async async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续执行ajax块后 ...
- centos6 install mcrypt
Download the latest epel-release rpm from http://dl.fedoraproject.org/pub/epel/6/x86_64/ Install epe ...
- 学习MySQL之数据库操作(一)
所有代码,均为自学时用到的测试与注释,知识细节或知识点不会面面俱到,亦不会有任何讲解,只做为自己学习复习用. ##数据库操作 ##创建数据库 myTest ,并将数据库字符集设为GBK CREATE ...
- Bash 为何要发明 shopt 命令
在 Bash 中,有两个内置命令用来控制 Bash 的各种可配置行为的开关(打开或关闭),这些开关称之为选项(option).其中一个命令是 set,set 命令有三种功能:显示所有的变量和函数:修改 ...
- javascript数据结构与算法---栈
javascript数据结构与算法---栈 在上一遍博客介绍了下列表,列表是最简单的一种结构,但是如果要处理一些比较复杂的结构,列表显得太简陋了,所以我们需要某种和列表类似但是更复杂的数据结构---栈 ...
- Hadoop里的数据挖掘应用-Mahout——学习笔记<三>
之前有幸在MOOC学院抽中小象学院hadoop体验课. 这是小象学院hadoop2.X的笔记 由于平时对数据挖掘做的比较多,所以优先看Mahout方向视频. Mahout有很好的扩展性与容错性(基于H ...
- toolkit --------chart属性
Data Visualization类组件以直观的图表方式显示数据的分布,能够让我们更好地分析各数据的内在联系.本文主要向大家介绍该类组件的基本特性以及使用实例. 一.基本特性介绍 1.chart组件 ...
- ZOJ 3699 Dakar Rally
Dakar Rally Time Limit: 2 Seconds Memory Limit: 65536 KB Description The Dakar Rally is an annu ...
- Node.js入门学习笔记(一)
先来个最常见的"Hello World!". 打开你最喜欢的编辑器(我用的是Sublime Text),创建一个helloWorld.js的文件.我们要做的就是向stdout输出& ...
- padding
padding-top:20px;上内边距 padding-right:30px;右内边距 padding-bottom:30px;下内边距 padding-left:20px;左内边距 paddin ...