jQuery插件入門學習—— 學習目標:寫一個星級評分插件(jquery插件基礎寫法)

1.jQuery.fn.extend(object);

     對jQuery.prototype進得擴展,就是爲jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”,

     比如我們要開發一個星級評分插件,可以這麼做

            jQuery.fn.extend({

              ratingStars:function(){   }

            })

           等價與

           jQuery.prototype.extend(ratingStars);

           還等價於:

                jQuery.fn.ratingStars = function( options ) { }

           調用時:

               $(".rating-stars").ratingStars(ratingOptions);

     2. $.extend( { }, defaults, options );    合併參數對象的寫法

    3.星級評分插件實現

        步一:頁面搭建

               <div class="rating-stars block" id="rating">

                <input type="number" readonly class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">

                <div class="rating-stars-container">

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                    <div class="rating-star">

                        <i class="fa fa-star"></i>

                    </div>

                </div>

            </div>

                步二:jQuery插件實現過程1:

                     jQuery.fn.ratingStars = function( options ) {

                          //注意:此處爲插件配置參數

                           var defaults = {

                                selectors: {

                                   

                                }

                            };

                        var settings = $.extend( { }, defaults, options );

                        //此處爲這個插件的對象方法配置

                        var methods={

                            init: function(element){

                             } 

                        } 

                    /*此處返回值爲一個循環調用methods對象的init方法來實現,this指向方法在外部獲取元素對象實例的HTML: $(".rating-stars"),

                        調用執行時 $(".rating-stars").ratingStars(ratingOptions)調用後,實現星級評分插件的使用,並且可以實現在HTML一個頁裏調用

                        很多個重複結構

                    */

                     return this.each(function() {

                                    methods.init($(this));

                                });         

             }


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章