DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> MultiSelect左右選擇控件的設計與實現介紹
MultiSelect左右選擇控件的設計與實現介紹
編輯:JQuery特效代碼     
由於項目中用到左右選擇的控件,網上找了一些相關的實現,基本上有兩個:
1、基於JQuery UI的控件:

這個看起來樣式不錯,而且使用起來功能也比較齊全,但是與傳統的左邊選擇到右邊的方式不同,有點別扭。
2、某個兄弟手寫的一個控件:

這個符合我的需求,簡單實用,但是不滿足我的另一個需求,我的需求是右邊的選擇框需要能選擇不同顏色的圖片,而且這個樣式有點不美觀。

怎奈自己寫一個吧,費了我半天的勁,總算搞定了,貼出來與大家分享一下吧:

這個既滿足了我功能的需求也滿足了我對樣式的要求。
關於顏色選擇我引用了第三方的一個插件jquery.colorPicker.js,我比較喜歡簡單實用並且美觀的東西。
關於code,太多了不方便貼出來,說一下我的實現吧,左右的控件用的是jQuery easy UI的datagrid控件,我也是嘗試了幾個控件,只有這個符合我的要求,當然了對於datagrid也做了一些去掉標題、手動修改樣式的一些處理。左右選擇和上下控制基本上的邏輯是一樣的,就是調用的datagrid的一些方法來實現了,當然這塊控制灰掉button也做了很多的邏輯控制,目的就是讓用戶使用起來更加方便。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved