一款好用的jquery評分外掛程式

2022-06-02 04:12:09 字數 2154 閱讀 2599

1.jquery評分外掛程式的功能:

圖示顯示使用者評分,更美觀

可實時點選,切換評分

返回使用者評分,記錄使用者評分

實現類似下圖效果

2.優點:

美觀,方便

3.缺點:

只能用於jquery開發

然後解壓。

解壓成功如下圖:

2.使用步驟:

(1)、在body下建立乙個div,裝評分

如:(3)、引入js檔案

(4)、在js中呼叫raty()方法

此時已經引入了預設的評分

效果為

由於沒有引入壓縮包中的img資料夾

(5)引入img資料夾

效果為:

解決方法:

效果:基本的效果就實現了,外掛程式還可以自定義api

(7)可定義path屬性可以指定我們要使用的圖示的位置。現在我們將專案中的img資料夾移到其他地方,比如這裡我把它移到styles資料夾下

如則在raty()中寫path屬性

(8)、我們可以使用自定義的圖示,也可以使用其他自帶的圖示,壓縮包內可以找到更大的星星圖示,以及勳章笑臉圖示等將doc資料夾img資料夾內的所以有圖示複製到我們專案中的img資料夾中來。更改圖示通過外掛程式的staroff和staron屬性。

其中staroff為滑鼠移入的,staron為原本的

效果:換一組:

做法:

效果:小數評分:

做法:

效果(9)設定提示文字

指標放到星星上預設顯示『bad』『poor』『reuglar』…可以自定義要顯示的文字,通過hints屬性。一次寫入滑鼠滑過你想出現的提示即可,用陣列的方式

效果:

(10)、獲取使用者選擇的值

最為重要的環節就是獲取使用者所選擇的值。外掛程式提供了不止一種的方式可以讓你得到使用者的選擇值,這裡介紹兩種方式。

通過click事件來獲取。click裡面定義乙個函式來處理獲取的值,這個選擇值通過』score』引數傳遞。引數不需要自己定義

用法:效果:

2. 第二種方式可以設定乙個隱蔽的html元素來儲存使用者的選擇值,然後可以在指令碼裡面通過jquery選中這個元素來處理該值。

現在在我們的star div下面再放乙個div,用來儲存使用者的選擇:

做法:接下來在指令碼**裡將這個div設定target屬性,需要注意的是,還要將targetkeep 屬性設定為true,使用者的選擇值才會被保持在目標div中,否則只是滑鼠浮上時有值,而滑鼠離開後這個值就會消失

做法:效果為:

如果我們只是想拿它來暫時存放這個值,並沒想讓它顯示出來,所以可以讓這個div一直隱藏,我們通過這個div來獲取值並進行我們需要的各種處理,比如送回伺服器儲存到資料庫等。跟上面唯一不同就是獲取該值的方式不同,用text()方法

具體**:

效果為:

這個外掛程式還有很多有趣的功能,壓縮包有詳盡的解釋。

1. jquery外掛程式庫

2.jquery之家  

一款好用的除錯外掛程式 vConsole

乙個輕量 可拓展 針對手機網頁的前端開發者除錯面板。就是可以在手機輸出除錯的very nice的外掛程式 1.安裝 npm install vconsole2.頁面引入 import vconsole from vconsole 3.在componentdidmount進行初始化 var vcons...

乙個非常棒的jQuery 評分外掛程式

現在做網頁已經不僅限於實現功能了,更多的是要實現功能的同時追求更加美觀的實現。比如頁面上讓使用者評分的功能,你完全可以放5個rdiobutton讓使用者選擇分數,也可以用dropdownlist來實現,但那樣不如用五個星星來得炫來得直觀。像這樣的星星評分外掛程式用得非常普遍,幾乎要成為你隨手捻來的小...

分享一款jQuery的UI外掛程式 Ninja UI

今天分享一款jquery的ui外掛程式 ninja ui 這個外掛程式使用jquery本身的語法來開發介面元素,而且你不需要關注css樣式相關設定,因為整個css樣式都被直接寫到了外掛程式中,不過壞處是,你需要 在開發前就確定好css,同時目前提供倆個型別的主題。外掛程式使用簡單,如果你會寫jque...