jQuery插件编写：对象级插件示例（三）

在这一篇中将介绍一个完整的对象级别插件示例，叫做子弹图插件。关于子弹头图表是什么可以百度查一下，它和我们常见的柱状图很相似。最终效果如下图所示


图一

先回顾一下上一篇文章中说过开发一个对象级别插件分为以下三步：

第一、创建静态的HTML模板和CSS文件

第二、编写插件逻辑，在选定的页面元素上动态添加HTML结构

第三、如果需要和用户交互，还应动态绑定相应的处理事件

在本文展示的这个插件示例中包含了上述三个步骤，将会一一进行说明。这个插件并不是我自己从头开发的。我是在别人的基础上做了适当的修改完成的。原插件的地址可以访问这里获得：

https://github.com/NETTUTS/An-In-Depth-Review-of-the-jQuery-Widget-Factory

插件所用到的HTML模板和CSS样式基本都是原来的，只做了很少的修改。而插件的js逻辑内容则全部是我重写过的。

下面开始介绍插件的内容。

第一步：创建HTML和CSS静态结构

1.1 HTML标签（文件：model.html)

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>子弹图静态HTML模型</title>  
  6. <link rel="stylesheet" href="jquery.bulletchart.css">  
  7. </head>  
  8. <body>  
  9.     <div class="chart bullet-chart" style="width: 85%;">  
  10.         <div class="legend">  
  11.             <div class="legend-item" data-index="0">  
  12.                 <span class="legend-symbol bar"></span><span class="legend-label">Projected  
  13.                     Target</span>  
  14.             </div>  
  15.             <div class="legend-item" data-index="1">  
  16.                 <span class="legend-symbol bar blue"></span><span  
  17.                     class="legend-label">Actual Target</span>  
  18.             </div>  
  19.             <div class="legend-item" data-index="2">  
  20.                 <span class="legend-symbol marker green"></span><span  
  21.                     class="legend-label">Green Line</span>  
  22.             </div>  
  23.             <div class="legend-item" data-index="3">  
  24.                 <span class="legend-symbol marker red"></span><span  
  25.                     class="legend-label">Minimum Threshold</span>  
  26.             </div>  
  27.         </div>  
  28.         <div class="chart-container">  
  29.             <div class="bar" style="width: 80%;"></div>  
  30.             <div class="bar blue" style="width: 70%;"></div>  
  31.             <div class="marker green" style="left: 60%;"></div>  
  32.             <div class="marker red" style="left: 50%;"></div>  
  33.         </div>  
  34.         <div class="tick-bar">  
  35.             <span class="tick" style="left: 0%;"></span><span class="tick-label"  
  36.                 style="left: 0%;">0</span><span class="tick" style="left: 25%;"></span><span  
  37.                 class="tick-label" style="left: 25%;">25</span><span class="tick"  
  38.                 style="left: 50%;"></span><span class="tick-label"  
  39.                 style="left: 50%;">50</span><span class="tick" style="left: 75%;"></span><span  
  40.                 class="tick-label" style="left: 75%;">75</span><span class="tick"  
  41.                 style="left: 100%;"></span><span class="tick-label"  
  42.                 style="left: 100%;">100</span>  
  43.         </div>  
  44.     </div>  
  45. </body>  
  46. </html>  

1.2 CSS文件（jquery.bulletchart.css)

[css] view plain copy print?
  1. .bullet-chart { font-size: 16px; -webkit-user-select: none; }  
  2.   
  3. /* 留出足够空间显示图表的刻度 */  
  4. .bullet-chart {  
  5.     padding-bottom : 50px;  
  6. }  
  7.   
  8. .bullet-chart .chart-container {  
  9.   height: 30px;  
  10.   background: #EEE;  
  11.   position: relative;  
  12.   /* margin-left: 2.1em; */  
  13. }  
  14.   
  15. /* Bar 默认为灰色 */  
  16. .bullet-chart .bar {  
  17.   background: #777;  
  18.   position: absolute;  
  19.   
  20.   /* 垂直居中 */  
  21.   height: 10px;  
  22.   top: 50%;  
  23.   margin-top: -5px;  
  24. }  
  25.   
  26.   
  27. /* Marker */  
  28. .bullet-chart .marker {  
  29.   background: #555;  
  30.   width: 2px;  
  31.   height: 20px;  
  32.   position: absolute;  
  33.   left: 250px;  
  34.   top: 50%;  
  35.   margin-top: -10px;  
  36. }  
  37.   
  38. .bullet-chart .red { background: #cd6668; }  
  39. .bullet-chart .green { background: #72cd84; }  
  40. .bullet-chart .blue { background: #64a0cb; }  
  41. .bullet-chart .purple { background: #a77cdb; }  
  42. .bullet-chart .orange { background: #ffb95e; }  
  43. .bullet-chart .cyan { background: #a0e2ff; }  
  44.   
  45. /* Ticks */  
  46. .bullet-chart .tick-bar {  
  47.   position: relative;  
  48.   top: 30px;  
  49.   border-top: 1px solid #AAA;  
  50. }  
  51.   
  52. .bullet-chart .tick-bar .tick {  
  53.   position: absolute;  
  54.   width: 1px;  
  55.   height: 6px;  
  56.   top: -1px;  
  57.   background: #AAA;  
  58. }  
  59.   
  60. .bullet-chart .tick-bar .tick-label {  
  61.   text-align: center;  
  62.   position: absolute;  
  63.   font-size: 0.6em;  
  64.   width: 2.1em;  
  65.   margin-left: -1.05em;  
  66.   top: 5px;  
  67.   color: #AAA;  
  68. }  
  69.   
  70. /* Legend */  
  71. .bullet-chart .legend {  
  72.   margin: 0 0 1em 0;  
  73.   border: 1px solid #EEE;  
  74.   padding: 0.5em 0 0 0.5em;  
  75.   max-width: 300px;  
  76. }  
  77.   
  78. .bullet-chart .legend .legend-item {  
  79.   display: inline-block;  
  80.   margin: 0 0.5em 0.5em 0;  
  81.   background: #FFE;  
  82.   padding: 0 5px;  
  83.   border-radius: 2px;  
  84.   cursor: pointer;  
  85. }  
  86.   
  87. .legend-item .legend-symbol {  
  88.   position: static;  
  89.   margin: 0px;  
  90.   display: inline-block;  
  91.   vertical-align: middle;  
  92. }  
  93.   
  94. .legend-item .legend-symbol.marker {  
  95.   height: 12px;  
  96.   width: 2px;  
  97. }  
  98.   
  99. .legend-item .legend-symbol.bar {  
  100.   height: 12px;  
  101.   width: 7px;  
  102. }  
  103.   
  104. .legend-item .legend-label {  
  105.   font-size: 0.6em;  
  106.   vertical-align: middle;  
  107.   margin-left: 5px;  
  108. }  
  109.   
  110. .fade { opacity: 0.5; }  

有了HTML和CSS我们就能看到插件运行后的最终效果图。如图一所示。这只是开发的第一步，但也是很重要的一步。这个时候不能仅仅效果一出来就急着去写插件逻辑（JS代码）。应该先对其兼容性做到足够的测试。确保在写JS之前插件所用到的HTML和CSS已经确定不再改变，尤其是HTML结构上不能随意改变。至于原因很明显，HTML结构的改变会导致原来的JS不可用的。

第二步、第三步：编写插件逻辑，添加用户交互事件

2.1 JS文件（jquery.bulletchart.js)

由于代码比较多，不会一一解释，当然还是在关键的地方加上了注释。而且，这里也包含了第三步的内容，即添加相应的用户事件。代码也不是太复杂，相信有jquery经验的你能够看懂。

 

[javascript] view plain copy print?
  1. /** 
  2.  * 子弹图插件，基于网上的一个控件改编而成 
  3.  * 网上原插件地址：https://github.com/NETTUTS/An-In-Depth-Review-of-the-jQuery-Widget-Factory 
  4.  * http://net.tutsplus.com/tutorials/javascript-ajax/an-in-depth-review-of-jquerys-widget-factory/ 
  5.  * 日期：2013-6-5 
  6.  * @author 张书振 
  7.  */  
  8. (function($) {  
  9.       
  10.     $.fn.bulletchart = function(options) {  
  11.         var settings = {  
  12.           // 宽度为相对于容器的百分比: 0 - 100  
  13.           size: 100,  
  14.             
  15.           // 显示的图形有两种，一种是bar，只是以竖线显示，另一种是marker，以矩形条显示  
  16.           // title 是显示的名称，value是百分比值 0-100，css可以指定颜色值 green,blue,purple,red,orange,cyan  
  17.           //  [{ title: 'Sample Bar', value: 75, css: '' }],  
  18.           bars: [],  
  19.   
  20.           //  [{ title: 'Sample Marker', value: 50, css: 'green' }],  
  21.           markers: [],  
  22.   
  23.           // 刻度必须是百分比数值 ： 0 - 100  
  24.           ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]  
  25.         };  
  26.         settings = $.extend(settings, options || {});  
  27.           
  28.         return this.each(function() {  
  29.             init($(this));  
  30.         });  
  31.         /** 
  32.          * 初始化插件函数 
  33.          * @param $target 将要应用插件的目标DOM节点，是个jQuery对象  
  34.          */  
  35.         function init($target) {  
  36.             $target.addClass("bullet-chart");  
  37.             // 设置图标的显示宽度，百分比  
  38.             $target.css("width", settings.size + "%");  
  39.               
  40.             //添加legend  
  41.             var $legend = $("<div class='legend'></div>").appendTo($target);  
  42.             var legendIndex = 0;  
  43.             $.each(settings.bars, function() { // 此循环遍历添加bar类型 legend内容  
  44.                 var $legendItem = $("<div class='legend-item'></div>")  
  45.                 .attr("data-index", legendIndex++) // 给每个legendItem添加索引，便于单击事件处理  
  46.                 .appendTo($legend);  
  47.                 var $legendSymbol = $("<span class='legend-symbol bar'></span>").appendTo($legendItem);  
  48.                 $legendSymbol.addClass(this.css);  
  49.                 var $legendLabel = $("<span class='legend-label'></span>").appendTo($legendItem);  
  50.                 $legendLabel.text(this.title);  
  51.             });  
  52.             $.each(settings.markers, function() { // 此循环遍历添加marker类型 legend内容  
  53.                 var $legendItem = $("<div class='legend-item'></div>")  
  54.                 .attr("data-index", legendIndex++)  
  55.                 .appendTo($legend);  
  56.                 var $legendSymbol = $("<span class='legend-symbol marker'></span>").appendTo($legendItem);  
  57.                 $legendSymbol.addClass(this.css);  
  58.                 var $legendLabel = $("<span class='legend-label'></span>").appendTo($legendItem);  
  59.                 $legendLabel.text(this.title);  
  60.             });  
  61.               
  62.             //添加图表  
  63.             var $container = $("<div class='chart-container'></div>").appendTo($target);  
  64.             var $tickbar = $("<div class='tick-bar'></div>").appendTo($target);  
  65.             //刻度  
  66.             $.each(settings.ticks, function() {  
  67.                 $("<span class='tick'></span>")  
  68.                     .css("left", this + "%")  
  69.                     .appendTo($tickbar);  
  70.                 $("<span class='tick-label'><span>")  
  71.                     .css("left", this + "%")  
  72.                     .text(this)  
  73.                     .appendTo($tickbar);  
  74.             });  
  75.             //绘制bar 和 marker 图形  
  76.             $.each(settings.bars, function() {  
  77.                 $("<div class='bar'></div>")  
  78.                     .addClass(this.css)  
  79.                     .animate({ width : this.value + "%" })  
  80.                     .appendTo($container);  
  81.             });  
  82.             $.each(settings.markers, function() {  
  83.                 $("<div class='marker'></div>")  
  84.                     .addClass(this.css)  
  85.                     .css("left", this.value + "%")  
  86.                     .appendTo($container);  
  87.             });  
  88.               
  89.             // 这里就是第三步的内容，为legend添加事件，鼠标单击事件，显示或隐藏相应的bar和marker图形  
  90.             $(".legend-item", $target).toggle(  
  91.                 function(event) {  
  92.                     var $legendItem = $(this);  
  93.                     $legendItem.addClass("fade");  
  94.                     $(".chart-container>.bar, .chart-container>.marker", $target).eq($legendItem.attr("data-index"))  
  95.                     .fadeOut();  
  96.                 },  
  97.                 function(event) {  
  98.                     var $legendItem = $(this);  
  99.                     $legendItem.removeClass("fade");  
  100.                     $(".chart-container>.bar, .chart-container>.marker", $target).eq($legendItem.attr("data-index"))  
  101.                     .fadeIn();  
  102.                 }  
  103.             );  
  104.         }  
  105.     };  
  106. })(jQuery);  

2.2 Demo测试页面（demo.html)

 

[html] view plain copy print?
    1. <!doctype html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="utf-8">  
    5.     <title>BulletChart: A jQuery Widget</title>  
    6.     <meta name="description" content="BulletChart: A jQuery Widget">  
    7.     <meta name="author" content="SitePoint">  
    8.     <link rel="stylesheet" href="jquery.bulletchart.css">  
    9.     <script src="jquery-1.8.3.js"></script>  
    10.     <script src="jquery.bulletchart.js"></script>  
    11.     <script type="text/javascript">  
    12.     $(function(){  
    13.           $("#bulletChartBtn").click(function(){  
    14.               $('.chart').bulletchart({  
    15.                     size: 85,  
    16.                     bars: [  
    17.                       { title: 'Projected Target', value: 80, css: '' },  
    18.                       { title: 'Actual Target', value: 70, css: 'blue' }  
    19.                     ],  
    20.                     markers: [  
    21.                       { title: 'Green Line', value: 60, css: 'green' },  
    22.                       { title: 'Minimum Threshold', value: 50, css: 'red' }  
    23.                     ],  
    24.                     ticks: [0, 25, 50, 75, 100]  
    25.                 });  
    26.           });  
    27.     });  
    28.     </script>  
    29. </head>  
    30. <body>  
    31.     <input id="bulletChartBtn" type="button" value="BulletChart"/><br/>  
    32.     <div class="chart"></div>  
    33.     <div class="chart"></div>  
    34. </body>  
    35. </html> 
posted @ 2017-07-17 18:38  SKYisLimit  阅读(163)  评论(0)    收藏  举报