经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
Juqery插件编写 基础说明
来源:cnblogs  作者:liyanbo  时间:2019/8/28 8:51:49  对本文有异议
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5. <meta name="viewport" content="width=device-width" />
  6. <title>Index3</title>
  7.  
  8. <script src="/plugins/jquery/jquery-1.9.1.js"></script>
  9. <script type="text/javascript">
  10.  
  11.  
  12.  
  13. $(function ($) { // 去除冲突
  14.  
  15. // 实现$("#txt1").SpecialAlertTip({ width: 300 });
  16. $.fn.SpecialAlertTip = function (options) {
  17.  
  18. var settings = {
  19. width: 100,
  20. defalutText: "It is Default",
  21. placeholder: 'Hello Jquery pulgIn',
  22. showSearch: true,
  23. }
  24. // 合并 两个js对象 $.extend({name:1,width:23},{width:55});
  25. settings = $.extend(settings, options);
  26.  
  27. /**
  28. * Constructor
  29. */
  30. function SpecialAlertTip(select, settings) {
  31. debugger;
  32. this.$select = $(select);
  33. this.settings = settings;
  34. this.create();
  35. }
  36.  
  37.  
  38. /**
  39. * Prototype class
  40. * 获取: ShipBusiness.origianlSelect = $("#CustomCargoRemarkV2").data("fSelect");
  41. * 调用封装控件方法: ShipBusiness.origianlSelect.reload();
  42. */
  43. SpecialAlertTip.prototype = {
  44. create: function () {
  45. debugger;
  46. this.$select.css("width", this.settings.width + "px")
  47. this.$select.css("border", "1px solid green");
  48. this.$select.before('<div class="fs-label-wrap"><div class="fs-label">' + this.settings.placeholder + '</div><span class="fs-arrow"></span></div>');
  49. this.$select.before('<div class="fs-dropdown hidden"><div class="fs-options"></div></div>');
  50. this.reload();
  51. },
  52.  
  53. reload: function () {
  54. debugger;
  55. if (this.settings.showSearch) {
  56. var search = '<div class="fs-search"><input type="search" placeholder="' + this.settings.searchText + '" /></div>';
  57. //this.$wrap.find('.fs-label-wrap').prepend(search);
  58. }
  59. //this.reloadDropdownLabel();
  60. },
  61.  
  62. destroy: function () {
  63. debugger;
  64.  
  65. }
  66. }
  67.  
  68.  
  69. /**
  70. * Loop through each matching element
  71. */
  72. return this.each(function () {
  73. debugger;
  74. var data = $(this).data('SpecialAlertTip');
  75.  
  76. if (!data) {
  77. data = new SpecialAlertTip(this, settings);
  78. $(this).data('SpecialAlertTip', data);
  79. }
  80.  
  81. if (typeof settings == 'string') {
  82. data[settings]();
  83. }
  84. });
  85. }
  86.  
  87. })
  88.  
  89.  
  90.  
  91. // 使用新封装的 jquery控件
  92. $(document).ready(function () {
  93. $("#txt1").SpecialAlertTip({ width: 300 });
  94. //如想调用 内部方法
  95. var speciallTxt = $("#txt1").data('SpecialAlertTip');
  96. speciallTxt.reload();
  97. speciallTxt.settings.showSearch = false;
  98. })
  99. </script>
  100.  
  101. </head>
  102. <body>
  103. <div>
  104. <div style="width:300px;border:1px solid silver;text-align:center;margin-bottom:10px;line-height:30px;font-size:18px;margin-left:auto;margin-right:auto;height:30px; "> jQuery 控件封装实例</div>
  105. <input type="text" id="txt1" />
  106. </div>
  107. </body>
  108. </html>

 

原文链接:http://www.cnblogs.com/liyanbofly/p/11419530.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号