當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一个非常棒的jQuery 评分插件--好东西要分享

發(fā)布時間：2025/4/16 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了一个非常棒的jQuery 评分插件--好东西要分享小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

　　現(xiàn)在做網(wǎng)頁已經(jīng)不僅限于實現(xiàn)功能了，更多的是要實現(xiàn)功能的同時追求更加美觀的實現(xiàn)。比如頁面上讓用戶評分的功能，你完全可以放5個RdioButton讓用戶選擇分數(shù)，也可以用DropDownList來實現(xiàn)，但那樣不如用五個星星來得炫來得直觀。

　　像這樣的星星評分插件用得非常普遍，幾乎要成為你隨手捻來的小菜，任何一個不具備使用這樣插件的前端程序員都是毫無戰(zhàn)斗力的。

　　這里給大家介紹一個實現(xiàn)這樣的評分效果的小插件jQuery Raty。它提供的API相當豐富真的是讓人愛不釋手。詳細文檔及下載插件請移步這里。

基本使用

　　下面我們來實際操作，運用一下這個有愛的小插件。

　　需要做的事情非常簡單，在頁面上放一個DIV，id取名為‘star’或者什么的隨你所以愛，用來顯示我們的評分插件。

1 <div id="star"></div>

　　當然，記得把下載下來的jquery.raty.js或者jquery.raty.min.js放在項目文件夾當中。同時，由于是基于jQuery的，所以包含jQuery的腳本文件那是必需的。這三個腳本文件都可以在下載后的壓縮包內的js文件夾內找到。直接復制到你的項目相應目錄中即可。

　　然后，在頁面中用<Script>標簽將剛才的腳本引進頁面當中。

1 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 2 3 <script src="Scripts/jquery.raty.js" type="text/javascript"></script>

???? 現(xiàn)在，只需一句代碼就可以實現(xiàn)評分了。在頁面添加如下語句：

1 <script type="text/javascript"> 2 3 $('#star').raty(); 4 5 </script>

　　運行我們的網(wǎng)站程序來看一下效果。

　　沒出現(xiàn)星星不說，排版還一團亂。但看到這個情形，我們應該知道是缺少相應的圖片或者CSS樣式表。將壓縮包內的img文件夾復制到項目中，就應該能解決圖片缺失的問題了。

　　需要注意的就是圖片路徑問題，默認它會在根目錄打img文件夾中的圖片，如果你需要將圖片放到其他地方，需要在代碼中指定，這在后面介紹。

　　刷新頁面看效果：

　　圖片是出來了，排版還是亂的，而且有HTML符號&#160沒有被正確解析。這個符號代表空格，對應著&nbsp，這里應該是腳本里面的問題。所以這里提出一個使用這個插件需要注意的地方：jQuery要求1.5及以上版本。如果你一開始用的不是1.4的版本，恭喜你你不會出現(xiàn)這里的問題。

　　現(xiàn)在將jQuery換掉：

　　同時修改頁面當中的引用。

1 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

　　現(xiàn)在刷新頁面查看效果，一切正常了。

指定圖標

　　上面介紹的是基本的使用，這個插件最讓人喜愛的地方在于他提供了非常多的API供我們自定義，實現(xiàn)一些我們想要的功能和效果。

　　通過定義path屬性可以指定我們要使用的圖標的位置?，F(xiàn)在我們將項目中的img文件夾移到其他地方，比如這里我把它移到Styles文件夾下：

　　然后刷新頁面，同樣會出現(xiàn)找不圖片的錯誤，這時候，在腳本里面設置一下path屬性：

1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 path:"Styles/img" 6 7 }); 8 9 </script>

　　再去刷新頁面效果又出來了，并且我們可以通過查看頁面的源碼發(fā)現(xiàn)，圖片的調用確實是我們指定的地方：

　　我們可以使用自定義的圖標，也可以使用其他自帶的圖標，壓縮包內可以找到更大的星星圖標，以及勛章笑臉圖標等。

　　現(xiàn)在將doc文件夾img文件夾內的所以有圖標復制到我們項目中的img文件夾中來。更改圖標通過插件的starOff和starOn屬性。

　　下面將圖標換成大的：

1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 path:"Styles/img", 6 7 starOff: 'star-off-big.png', 8 9 starOn: 'star-on-big.png' 10 11 }); 12 13 </script>

　　只需寫上相應圖標的文件名即可，如果要使用勛章則應該是medal-on.png和medal-off.png，現(xiàn)在刷新頁面看效果，有點不理想：

　　星星沒有排成一排了，擠了兩個下去。是不是很奇怪。查看一下頁面代碼，發(fā)現(xiàn)包含我們raty插件的那個DIV被加了個width：100px樣式。

　　可我們并沒有給DIV設置任何樣式啊，這只能是插件的腳本自己設置的。因為在小星星時，100的寬度剛好，現(xiàn)在換在大星星了一排的位置不夠了所以被擠了兩個下去。這里需要通過size屬性來設置一下寬度從而將五個大星星重新顯示到一排來：

1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 path:"Styles/img", 6 7 starOff: 'star-off-big.png', 8 9 starOn: 'star-on-big.png', 10 11 size:24 12 13 }); 14 15 </script>

設置顯示文本

　　指針放到星星上默認顯示‘bad’‘poor’‘reuglar’…可以自定義要顯示的文本，通過hint屬性。

　　現(xiàn)在換成1，2，3…

1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 hints: ['1', '2', '3', '4', '5'], 6 7 path:"Styles/img", 8 9 starOff: 'star-off-big.png', 10 11 starOn: 'star-on-big.png', 12 13 size:24 14 15 }); 16 17 </script>

獲取用戶選擇的值

　　最為重要的環(huán)節(jié)就是獲取用戶所選擇的值。插件提供了不止一種的方式可以讓你得到用戶的選擇值，這里介紹兩種方式。

　　通過click事件來獲取。Click里面定義一個函數(shù)來處理獲取的值，這個選擇值通過’score’參數(shù)傳遞。

　　這里通過彈窗顯示出用戶選擇的值：

　　第二種方式可以設置一個隱蔽的HTML元素來保存用戶的選擇值，然后可以在腳本里面通過jQuery選中這個元素來處理該值。

　　現(xiàn)在在我們的star DIV下面再放一個DIV，用來保存用戶的選擇：

1 <script src="Scripts/jquery.raty.js" type="text/javascript"></script> 2 3 <div id="star"> 4 5 </div> 6 7 <div id="result"> 8 9 </div>

　　然后在腳本代碼里將這個DIV設置為target，需要注意的是，還要將targetKeep 屬性設置為true，用戶的選擇值才會被保持在目標DIV中，否則只是鼠標懸停時有值，而鼠標離開后這個值就會消失。

1 <script type="text/javascript"> 2 3 $('#star').raty({ 4 5 hints: ['1', '2', '3', '4', '5'], 6 7 path: "Styles/img", 8 9 starOff: 'star-off-big.png', 10 11 starOn: 'star-on-big.png', 12 13 size: 24, 14 15 target: '#result', 16 17 targetKeep : true 18 19 }); 20 21 </script>

　　現(xiàn)在，用戶的選擇會在下面的DIV中被顯示出來。

　　但其實我們只是想拿它來暫時存放這個值，并沒想讓它顯示出來，所以可以讓這個DIV一直隱藏，我們通過這個DIV來獲取值并進行我們需要的各種處理，比如送回服務器保存到數(shù)據(jù)庫等。這里同樣使用彈窗顯示這個值來做例子。跟上面唯一不同就是獲取該值的方式不同。

1 <script type="text/javascript"> 2 3 $("#result").hide();//將保存結果的DIV隱藏 4 5 $('#star').raty({ 6 7 hints: ['1', '2', '3', '4', '5'], 8 9 path: "Styles/img", 10 11 starOff: 'star-off-big.png', 12 13 starOn: 'star-on-big.png', 14 15 size: 24, 16 17 target: '#result', 18 19 targetKeep : true 20 21 }); 22 23 //彈出結果 24 25 var text = $('#result').text(); 26 27 $('img').click(function () { 28 29 if ($('#result').text() != text) { 30 31 alert($('#result').text()); 32 33 return; 34 35 } 36 37 }); 38 39 </script>

　　這個插件還有很多有趣的功能，大家可以自己去探尋，它強大到真的能滿足你在項目中的各種需求。

本文例子源碼下載：點我

相關連接：

jQuery Raty - A Star Rating Plugin

http://wbotelhos.com/raty

轉載于:https://www.cnblogs.com/Wayou/archive/2012/10/05/jQueryRaty.html

總結

以上是生活随笔為你收集整理的一个非常棒的jQuery 评分插件--好东西要分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：数据结构——折半查找
下一篇： JAVA共通関数--文字列に空白を追加す