wex5 實戰 星級評分的輸入與輸出

2022-07-17 20:45:12 字數 1376 閱讀 8240

群是萬能的,有人問我星級評分的輸入問題,我一想,案例裡模板裡有乙個五星評分,是個顯示效果。如果點選五星,如何實現輸入呢?

其實很簡單。

一   效果演示:

點選幾顆星,輸入星級。

二  設計思路

延用案例裡的五星顯示,繫結到data星級欄位上,把range 滑動條元件也繫結到星級欄位上,放到星星上,設定為全透明即可。

好像有點太簡單了

三  **與實現

1 五星調入

2    從新建嚮導裡找到要用的元件,拷出來,案例裡是span裡有一人i,放到乙個div裡

3 星星拷出來,放到工程裡,一會css檔案要引用。

4 把wex5元件labelrange元件放到sapn同級目錄,並在原始碼模式支掉label

5  修改star 和range的class

star樣式裡修改star路徑,starbar是range的樣式,調節到和五星一樣寬度,一樣位置,z-index為圖層深度,設定到最上層,全透明即可

6 綁字字段

(注)range的取值範圍,我定義是1-10,在星級bind-style樣式中,做了百分比拼接處理。

四 總結

實在是簡單,沒什麼可說的。朋友們費勁去網上找什麼五星評分外掛程式,各種不好用,相容性問題,看看這篇文,是不是得重新認識wex5了?呵呵。

WeX5和BeX5的區別

許多對wex5和bex5略有了解得人都知道,wex5和bex5是完全共用前端框架技術的。但是wex5和bex5是兩個差別定位有巨大差別的產品。具體差別如下 定位 開發面向消費者和公眾的開放應用系統 後端 資料處理元件,通過http ajax websocket等對接各主流技術平台 費用 完全開源,徹...

wex5 實戰 蘋果左滑刪除與長按編輯

用了多年蘋果,習慣了蘋果的左滑刪除與長按編輯,特別是簡訊什麼的,很多安卓介面也採用了類似方式。我的想法突如其來,用wex5也設計乙個這樣的功能,可以嗎?那句廣告詞,沒有什麼不可能。呵呵。一 效果演示 左滑刪除 長按編輯 取消復原 二 設計思路 利用jquery監聽touch事件,結合wex5的事件,...

wex5 實戰 框架拓展2之事件派發與data重新整理

一 前言 講完公共data,相信大家對框架級的data元件級繫結有了更新的認識,接下來我們繼續深入,以求研究明白wex5的框架能力。在乙個web專案中,其實有乙個data,是基礎框架必須的data,並且要實時監控資料變更。那就是使用者userdata.此文的目地和意義 1 在涉及到使用者登陸的專案中...