jquery-bar-rating是一款小巧的簡單實用的輕量級jQuery評分外掛。該評分外掛是將一個標準的select元素轉換為評分元件。你可以通過CSS來渲染評分元件的樣式,外掛中提供了6種不同的主題樣式。它還內建了一些CSS星級評分樣式。
工具/原料
膝上型電腦或是桌上型電腦
網際網路
jQuery
jquery-bar-rating
方法/步驟
使用該評分外掛你需要引入jQuery(1.7.2+),jquery.barrating.min.js檔案,並選擇一種你需要的主題樣式CSS檔案將其引入,例如選擇fontawesome-stars.css樣式檔案。
該評分外掛的HTML結構是標準的
在頁面DOM元素載入完畢之後,可以通過下面的方法來初始化該評分外掛。
$(function() {
$('#example').barrating({
theme: 'fontawesome-stars'
});
});
通過上面的初始化,
...rating widget...
theme:預設值:''。指定一種評分主題。
initialRating:預設值:null。指定初始化時評分的值,如果為空,外掛會查詢帶有selected屬性的option項。
showValues:預設值:false。如果設定為true,將會在評分上顯示數值。
showSelectedRating:預設值:true。顯示使用者選擇的分數。
reverse:預設值:false。如果設定為true,評分系統將反向。
readonly:預設值:false。如果設定為true,評分系統將只讀。
fastClicks:預設值:true。在觸控裝置上移除300ms的點選延遲。
wrapperClass:預設值:'br-wrapper'。指定包裹div容器的class名稱。
$('select').barrating('show');:顯示評分元件。
$('select').barrating('set', value);:設定評分元件的值。
$('select').barrating('clear');:清空評分數值。
$('select').barrating('destroy');:銷燬評分元件例項。
回撥函式如下所示:
onSelect:function(value, text):當一個分數被選擇的時候觸發。
onClear:function(value, text):當評分被清除的時候觸發。
onDestroy:function(value, text):當評分元件被銷燬的時候觸發。
(1)如何在初始化時設定為空的評分值?
如果你想在頁面初始化的時候將評分元件設定為空的分值,可以簡單的新增一個空的option選項:
(2)如何指定顯示在評分上的文字?
外掛中提供的showValues引數可以實現在評分值上顯示文字。如果你想設定一些額外的顯示文字,可以為每一個
注意事項
該外掛依賴於JQuery庫,需要引入JQuery庫檔案