jquery-bar-ratingjQuery評分外掛使用攻略?

Tags: 外掛, 樣式,

jquery-bar-rating是一款小巧的簡單實用的輕量級jQuery評分外掛。該評分外掛是將一個標準的select元素轉換為評分元件。你可以通過CSS來渲染評分元件的樣式,外掛中提供了6種不同的主題樣式。它還內建了一些CSS星級評分樣式。

工具/原料

膝上型電腦或是桌上型電腦

網際網路

jQuery

jquery-bar-rating

方法/步驟

使用該評分外掛你需要引入jQuery(1.7.2+),jquery.barrating.min.js檔案,並選擇一種你需要的主題樣式CSS檔案將其引入,例如選擇fontawesome-stars.css樣式檔案。

jquery-bar-ratingjQuery評分外掛使用攻略

該評分外掛的HTML結構是標準的

jquery-bar-ratingjQuery評分外掛使用攻略

在頁面DOM元素載入完畢之後,可以通過下面的方法來初始化該評分外掛。

jquery-bar-ratingjQuery評分外掛使用攻略

通過上面的初始化,

...rating widget...

jquery-bar-ratingjQuery評分外掛使用攻略

theme:預設值:''。指定一種評分主題。

initialRating:預設值:null。指定初始化時評分的值,如果為空,外掛會查詢帶有selected屬性的option項。

showValues:預設值:false。如果設定為true,將會在評分上顯示數值。

showSelectedRating:預設值:true。顯示使用者選擇的分數。

reverse:預設值:false。如果設定為true,評分系統將反向。

readonly:預設值:false。如果設定為true,評分系統將只讀。

fastClicks:預設值:true。在觸控裝置上移除300ms的點選延遲。

wrapperClass:預設值:'br-wrapper'。指定包裹div容器的class名稱。

jquery-bar-ratingjQuery評分外掛使用攻略

$('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):當評分元件被銷燬的時候觸發。

jquery-bar-ratingjQuery評分外掛使用攻略

(1)如何在初始化時設定為空的評分值?

如果你想在頁面初始化的時候將評分元件設定為空的分值,可以簡單的新增一個空的option選項:

(2)如何指定顯示在評分上的文字?

外掛中提供的showValues引數可以實現在評分值上顯示文字。如果你想設定一些額外的顯示文字,可以為每一個

注意事項

該外掛依賴於JQuery庫,需要引入JQuery庫檔案

相關問題答案