群是萬能的,有人問我星級評分的輸入問題,我一想,案例裡模板裡有乙個五星評分,是個顯示效果。如果點選五星,如何實現輸入呢?
其實很簡單。
一 效果演示:
點選幾顆星,輸入星級。
二 設計思路
延用案例裡的五星顯示,繫結到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 在涉及到使用者登陸的專案中...