JQuery raty.js書寫星星評價步驟

承虛元發表於2019-04-03

前言

   今天趁著加班, 寫一篇在公司差點做不出來的效果難題(本身就是菜鳥,噓....別說出去)。
情況是這樣的, 公司要我寫一個星星評價的效果, 天哪, 我怎麼寫的出, 哈哈哈(自我嘲諷),
專案是angular, 俺都沒用過angular的UI外掛, 但還好有個jquery俺還是有點認識的, 於是
乎, 俺就去網上進行一大片的搜尋, 終於找到了raty這個外掛,經過一下午亂搞一通終於呈現
出美麗風景, 接下來就一起看一下吧!
    我為了儘量清晰,把他們歸為以下幾點:
        1.從BootCDN查詢下載所需要的檔案, 主要是jquery.min.js, 
        jquery.raty.min.js;
複製程式碼

JQuery raty.js書寫星星評價步驟

        2.下載好檔案後自然是引入了, 記住jquery.raty是依賴於jquery的, 所以要
        把jquery放到前面;
複製程式碼

JQuery raty.js書寫星星評價步驟

        3.由於jquery.raty是已經別人封裝好了的, 所以就盡情使用吧!
        首先給他一個容器:
複製程式碼

JQuery raty.js書寫星星評價步驟

        4.然後樣式可以自己看著自己的標籤設定想要的大小啥的, 這邊就不講了
        (我這種菜鳥都會樣式, 別說你不會, hahaha)
        5.接下來就是js部分, 為了節省時間, 我已經寫好註釋, 直接截圖出來吧
        (裡面的圖片自己找, 看懂每個圖片存放的路徑自然就會明白怎麼做了)
複製程式碼

JQuery raty.js書寫星星評價步驟

    div為hints的值就是那個註釋為"評語顯示"哪裡, 所以說可以在那裡設定, 另外size為80沒查出來是幹什麼的
複製程式碼

本文就這樣了, 如有需要改進之處, 請各位督促並告知本人, 本人願意接受建議以及改進, 謝謝!

(不清楚的也可留言)

相關文章