// target 是DOM元素

// properties 是宿主的属性

$.parser.parseOptions(target,properties);

  1.     /**
  2. * parse options, including standard 'data-options' attribute.
  3. *
  4. * calling examples:
  5. * $.parser.parseOptions(target);
  6. * $.parser.parseOptions(target, ['id','title','width',{fit:'boolean',border:'boolean'},{min:'number'}]);
  7. */
  8. parseOptions: function(target, properties){
  9. var t = $(target);
  10. var options = {};
  11.  
  12. var s = $.trim(t.attr('data-options'));
  13. if (s){
  14. if (s.substring(0, 1) != '{'){
  15. s = '{' + s + '}';
  16. }
  17. options = (new Function('return ' + s))();
  18. }
  19. $.map(['width','height','left','top','minWidth','maxWidth','minHeight','maxHeight'], function(p){
  20. var pv = $.trim(target.style[p] || '');
  21. if (pv){
  22. if (pv.indexOf('%') == -1){
  23. pv = parseInt(pv) || undefined;
  24. }
  25. options[p] = pv;
  26. }
  27. });
  28.  
  29. if (properties){
  30. var opts = {};
  31. for(var i=0; i<properties.length; i++){
  32. var pp = properties[i];
  33. if (typeof pp == 'string'){
  34. opts[pp] = t.attr(pp);
  35. } else {
  36. for(var name in pp){
  37. var type = pp[name];
  38. if (type == 'boolean'){
  39. opts[name] = t.attr(name) ? (t.attr(name) == 'true') : undefined;
  40. } else if (type == 'number'){
  41. opts[name] = t.attr(name)=='0' ? 0 : parseFloat(t.attr(name)) || undefined;
  42. }
  43. }
  44. }
  45. }
  46. $.extend(options, opts);
  47. }
  48. return options;
  49. }

用到的方法

jQuery(elements)

将一个或多个DOM元素转化为jQuery对象。

attr(name)

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。

jQuery.trim(str)

去掉字符串起始和结尾的空格。返回值:String

stringvar.substr(start [, length ])

一般截取字符串之前都会去掉前后空格。

jQuery.map(array, callback)

作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

target.style[p]

获取DOM元素style属性的p样式的值

小结

  • data-options 为 plugin 设置属性
  • style 覆盖 data-options
  • properties 覆盖 style

jquery.parser.js 的 parseOptions 方法的更多相关文章

  1. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  3. 图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 //载入JavaScript 文件 <script src="jquery.js&q ...

  4. 使用jquery.form.js的ajaxsubmit方法提交数据的Bug

    周五同事遇到一个很奇怪的问题,调到下班,虽然问题解决了,但是不知道问题的具体原因,回来翻了翻代码,才发现症结所在,下面就分享出来,供遇到同样问题的同行们参考: 先把问题描述一下,做的功能是使用ajax ...

  5. jQuery.media.js的使用方法

      该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等,前提 ...

  6. 【Jquery+Express.js】 submit() 方法提交form

    前端页面 .html 生成一个动态模块 Modal <div class="modal fade" id="addStaff" tabindex=&quo ...

  7. Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)

    直接上代码吧 一:主窗口 /*#region SendChooseTargetTemplate 发送候选人主窗口模板*/ var SendChooseTargetTemplate = ''; Send ...

  8. node.js报错throw err; // Rethrow non-MySQL errors e:\serverTest\node_modules\mysql\lib\protocol\Parser.js:79 解决方法

    今天在用node+angular做后台时,需要使用session保存登陆状态的时候,遇到了此问题,问题直译为非mysql问题,我也在后台取到的登陆用户名和密码,确实不是数据库问题.最后发现在使用ses ...

  9. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

随机推荐

  1. 环境无法创建目录,提示Too many links

    业务流程需要从客户端下载文件到本地临时目录,然后再解压文件写入相应文件后压缩,现在发现第一步创建本地临时目录就失败了. 去环境上用df命令一看,磁盘分区空间已用99%,还没到100%应该是没问题的.再 ...

  2. 浅谈FPGA资源评估

    在使用FPGA过程中,通常需要对资源做出评估,下面简单谈谈如何评估FPGA的资源. FF和LUT的数目: 这个在写出具体代码之前,初学者通常没法估算,但资深FPGA工程师会估算出一个数量级.通常的做法 ...

  3. mysql复制(高可用架构方案的基础)

    mysql复制:把一个数据库实例上所有改变复制到另外一个数据库库服务器实例的过程特点:1.没有改变就无所谓复制 ;改变是复制的根本与数据源2.所有的改变:是指可以复制全部改变,也可以复制部分改变 可以 ...

  4. Linux Change The I/O Scheduler For A Hard Disk

    ow do I change the I/O scheduler for a particular hard disk without rebooting my Linux server system ...

  5. Vue.js:事件处理器

    ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...

  6. Excel开发学习笔记:根据工作表worksheet内容控制按钮的状态

    开发环境基于VSTO,具体配置:visual studio 2010,VB .Net,excel 2007,文档级别的定制程序. 在Ribbon工具栏中有2个功能按钮,它们是否可用取决于workshe ...

  7. php文件上传总结

    前言: 学习php中 1.表单代码: <html> <head> <title>文件上传</title> </head> <body ...

  8. linux grep打印匹配的上下几行

    $grep -5 'parttern' inputfile //打印匹配行的前后5行 $grep -C 5 'parttern' inputfile //打印匹配行的前后5行 $grep -A 5 ' ...

  9. SqlServer——for xml path

    for xml path 就是将 sql 查询出来的内容以XML的格式显示出来.参考网站MSDN:将 PATH 模式与 FOR XML 一起使用. 先创建测试用的表格: create table SZ ...

  10. Java微信公众平台开发(九)--关键字回复以及客服接口实现(该公众号暂时无法提供服务解决方案)

    转自:http://www.cuiyongzhi.com/post/47.html 我们在微信公众号的后台可以发现微信给我们制定了两种模式,一种是开发者模式(也就是我们一直在做的开发),还有一种模式是 ...