source: branches/2.4/prototype/plugins/jquery.jrating/jRating.jquery.js @ 7445

Revision 7445, 6.6 KB checked in by eduardow, 12 years ago (diff)

Ticket #3167 - Melhoria na performance nas pesquisas de contatos dinamicos (plugin).
Line 
1/************************************************************************
2*************************************************************************
3@Name :         jRating - jQuery Plugin
4@Revison :      2.3
5@Date :                 07/09/2012
6@Author:         ALPIXEL - (www.myjqueryplugins.com - www.alpixel.fr)
7@License :               Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
8 
9**************************************************************************
10*************************************************************************/
11(function($) {
12        $.fn.jRating = function(op) {
13                var defaults = {
14                        /** String vars **/
15                        bigStarsPath : 'jquery/icons/stars.png', // path of the icon stars.png
16                        smallStarsPath : 'jquery/icons/small.png', // path of the icon small.png
17                        phpPath : 'php/jRating.php', // path of the php file jRating.php
18                        type : 'big', // can be set to 'small' or 'big'
19
20                        /** Boolean vars **/
21                        step:false, // if true,  mouseover binded star by star,
22                        isDisabled:false,
23                        showRateInfo: true,
24
25                        /** Integer vars **/
26                        length:5, // number of star to display
27                        decimalLength : 0, // number of decimals.. Max 3, but you can complete the function 'getNote'
28                        rateMax : 20, // maximal rate - integer from 0 to 9999 (or more)
29                        rateInfosX : -45, // relative position in X axis of the info box when mouseover
30                        rateInfosY : 5, // relative position in Y axis of the info box when mouseover
31
32                        /** Functions **/
33                        onSuccess : null,
34                        onError : null
35                };
36
37                if(this.length>0)
38                return this.each(function() {
39                        var opts = $.extend(defaults, op),   
40                        newWidth = 0,
41                        starWidth = 0,
42                        starHeight = 0,
43                        bgPath = '';
44
45                        if($(this).hasClass('jDisabled') || opts.isDisabled)
46                                var jDisabled = true;
47                        else
48                                var jDisabled = false;
49
50                        getStarWidth();
51                        $(this).height(starHeight);
52
53                        var average = parseFloat($(this).attr('id').split('_')[0]),
54                        idBox = parseInt($(this).attr('id').split('_')[1]), // get the id of the box
55                        widthRatingContainer = starWidth*opts.length, // Width of the Container
56                        widthColor = average/opts.rateMax*widthRatingContainer, // Width of the color Container
57
58                        quotient =
59                        $('<div>',
60                        {
61                                'class' : 'jRatingColor',
62                                css:{
63                                        width:widthColor
64                                }
65                        }).appendTo($(this)),
66
67                        average =
68                        $('<div>',
69                        {
70                                'class' : 'jRatingAverage',
71                                css:{
72                                        width:0,
73                                        top:- starHeight
74                                }
75                        }).appendTo($(this)),
76
77                         jstar =
78                        $('<div>',
79                        {
80                                'class' : 'jStar',
81                                css:{
82                                        width:widthRatingContainer,
83                                        height:starHeight,
84                                        top:- (starHeight*2),
85                                        background: 'url('+bgPath+') repeat-x'
86                                }
87                        }).appendTo($(this));
88                       
89
90                        $(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'});
91
92                        if(!jDisabled)
93                        $(this).unbind().bind({
94                                mouseenter : function(e){
95                                        var realOffsetLeft = findRealLeft(this);
96                                        var relativeX = e.pageX - realOffsetLeft;
97                                        if (opts.showRateInfo)
98                                        var tooltip =
99                                        $('<p>',{
100                                                'class' : 'jRatingInfos',
101                                                html : getNote(relativeX)+' <span class="maxRate">/ '+opts.rateMax+'</span>',
102                                                css : {
103                                                        top: (e.pageY + opts.rateInfosY),
104                                                        left: (e.pageX + opts.rateInfosX)
105                                                }
106                                        }).appendTo('body').show();
107                                },
108                                mouseover : function(e){
109                                        $(this).css('cursor','pointer');       
110                                },
111                                mouseout : function(){
112                                        $(this).css('cursor','default');
113                                        average.width(0);
114                                },
115                                mousemove : function(e){
116                                        var realOffsetLeft = findRealLeft(this);
117                                        var relativeX = e.pageX - realOffsetLeft;
118                                        if(opts.step) newWidth = Math.floor(relativeX/starWidth)*starWidth + starWidth;
119                                        else newWidth = relativeX;
120                                        average.width(newWidth);                                       
121                                        if (opts.showRateInfo)
122                                        $("p.jRatingInfos")
123                                        .css({
124                                                left: (e.pageX + opts.rateInfosX)
125                                        })
126                                        .html(getNote(newWidth) +' <span class="maxRate">/ '+opts.rateMax+'</span>');
127                                },
128                                mouseleave : function(){
129                                        $("p.jRatingInfos").remove();
130                                },
131                                click : function(e){
132                    var element = this;
133                                        $(this).unbind().css('cursor','default').addClass('jDisabled');
134                                        if (opts.showRateInfo) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();});
135                                        e.preventDefault();
136                                        var rate = getNote(newWidth);
137                                        average.width(newWidth);
138
139                                        /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/
140                                                $('.datasSent p').html('<strong>idBox : </strong>'+idBox+'<br /><strong>rate : </strong>'+rate+'<br /><strong>action :</strong> rating');
141                                                $('.serverResponse p').html('<strong>Loading...</strong>');
142                                        /** END ONLY FOR THE DEMO **/
143
144                                        $.post(opts.phpPath,{
145                                                        idBox : idBox,
146                                                        rate : rate,
147                                                        action : 'rating'
148                                                },
149                                                function(data) {
150                                                        if(!data.error)
151                                                        {
152                                                                /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/
153                                                                        $('.serverResponse p').html(data.server);
154                                                                /** END ONLY FOR THE DEMO **/
155
156
157                                                                /** Here you can display an alert box,
158                                                                        or use the jNotify Plugin :) http://www.myqjqueryplugins.com/jNotify
159                                                                        exemple :       */
160                                                                if(opts.onSuccess) opts.onSuccess( element, rate );
161                                                        }
162                                                        else
163                                                        {
164
165                                                                /** ONLY FOR THE DEMO, YOU CAN REMOVE THIS CODE **/
166                                                                        $('.serverResponse p').html(data.server);
167                                                                /** END ONLY FOR THE DEMO **/
168
169                                                                /** Here you can display an alert box,
170                                                                        or use the jNotify Plugin :) http://www.myqjqueryplugins.com/jNotify
171                                                                        exemple :       */
172                                                                if(opts.onError) opts.onError( element, rate );
173                                                        }
174                                                },
175                                                'json'
176                                        );
177                                }
178                        });
179
180                        function getNote(relativeX) {
181                                var noteBrut = parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100);
182                                switch(opts.decimalLength) {
183                                        case 1 :
184                                                var note = Math.round(noteBrut*10)/10;
185                                                break;
186                                        case 2 :
187                                                var note = Math.round(noteBrut*100)/100;
188                                                break;
189                                        case 3 :
190                                                var note = Math.round(noteBrut*1000)/1000;
191                                                break;
192                                        default :
193                                                var note = Math.round(noteBrut*1)/1;
194                                }
195                                return note;
196                        };
197
198                        function getStarWidth(){
199                                switch(opts.type) {
200                                        case 'small' :
201                                                starWidth = 12; // width of the picture small.png
202                                                starHeight = 10; // height of the picture small.png
203                                                bgPath = opts.smallStarsPath;
204                                        break;
205                                        default :
206                                                starWidth = 23; // width of the picture stars.png
207                                                starHeight = 20; // height of the picture stars.png
208                                                bgPath = opts.bigStarsPath;
209                                }
210                        };
211
212                        function findRealLeft(obj) {
213                          if( !obj ) return 0;
214                          return obj.offsetLeft + findRealLeft( obj.offsetParent );
215                        };
216                });
217
218        }
219})(jQuery);
Note: See TracBrowser for help on using the repository browser.