<div class="row">
  <div id="tagList"></div>
</div>
....
<script type="text/javascript">
  //執行外掛
  $(function () {
    $('#tagList').tagsPagination({
      startPage: 1
    });
  })
</script>

2、tag_list.js

 1 //參考jquery.twbsPagination 怎樣設計一個外掛。小括號,裡面宣告一個function,之後用子執行模式執行
 

 2 (function ($, window, document, undefined) {
 3   'use strict';
 4   var TagsPagination = function(element,options){
 5     this.$element = $(element); //將外掛初始化時傳入的html dom物件轉jQuery物件,這裡是div,拿到這個物件很重要,之後就可以基於它做很多事情
 6     
 7     //定義物件基本設定引數物件,合併2個物件到第一個物件
 8     this.options = $.extend({}, $.fn.tagsPagination.defaults, options);//
 
設計模式,引數處理
 9     
10     var tagName = (typeof this.$element.prop === 'function') ?
11       this.$element.prop('tagName') : this.$element.attr('tagName');
12     
13     //訪問頁面上的HTML DOM物件
14     // var t = this.$element.first();
15     // console.info(t);
16     this.$listContainer = this.$element;//賦值基本屬性$listContainer,容器物件
 

17 
18     //this.show();
19     //1.絢爛外掛物件的DOM,並將絢爛的結果用append方法追加到由引數傳入的dom物件上去
20     this.render(this.getPages(this.options.startPage));//getPages在下面prototyp鏈中定義
21     return this;//程式設計模式,不影響DOM顯示
22   };
23   //基本設計模式,在大括號內定義,對TagsPagination原型鏈進行程式設計
24   TagsPagination.prototype = {
25     constructor: TagsPagination,
26     //銷燬jQuery物件
27     destroy:function () {
28 
29     },
30     show:function() {
31 
32     },
33     //render相關基礎function, 絢爛所有的tag標籤,返回陣列型別
34     _buildListItems: function (pages) {
35       var listItems = [];
36       for(var i = 0; i < pages.tags.length; i++){
37         listItems.push(this._buildItem('page', pages.tags[i]));
38       }
39       return listItems;
40     },
41     //render相關基礎function  絢爛一個tag DOM標籤,返回jQuery物件
42     _buildItem:function(type,tag) {
43       //繪製一個tag標籤的dom節點
44       var $itemContainer = $('<div></div>'), $itemContent = $('<span></span>');
45       // var $itemDelIcon = $('<span></span>');
46 
47       $itemContainer.addClass('tag_container');
48       $itemContent.addClass('label label-default').html(tag); 
49       // $itemDelIcon.addClass('glyphicon glyphicon-remove-circle');
50       // $itemDelIcon.attr('aria-hidden',"true");
51       // $itemContainer.append($itemContent).append($itemDelIcon);
52       $itemContainer.append($itemContent);
53       return $itemContainer;
54     },
55     //render相關基礎function 獲取tag資料,怎樣和ajax結合,返回結果傳給render function
56     getPages: function (currentPage) {
57       //TODO Mock(模擬)
58       var tags = [];
59       tags.push("Default");
60       tags.push("Primary");
61       return {"currentPage": currentPage, "tags": tags};
62     },
63     //核心方法,在物件構造器中被呼叫
64     render: function (pages) {
65       var _this = this;
66       this.$listContainer.children().remove();
67       var items = this._buildListItems(pages);
68       $.each(items, function (key, item) {
69         _this.$listContainer.append(item);
70       });
71 
72     }
73   }
74 
75   //入口之一:開始定義外掛模組,頁面引用從這裡載入執行
76   $.fn.tagsPagination = function(option){
77     console.log("PLUGIN DEFINITION");
78     var data = new TagsPagination(this, option);//呼叫自己定義的jQuery外掛物件,之後就是思考怎樣定義TagsPagination物件了
79   };
80   //將自定義JS物件賦值給外掛,感覺僅僅起到標識作用
81   //$.fn.tagsPagination.Constructor = TagsPagination;
82 
83 })(window.jQuery, window, document);

//TODO 事件處理以及和ajax聯動