MultiSelect左右選擇控件的設(shè)計(jì)與實(shí)現(xiàn)介紹
更新時(shí)間：2013年06月08日 17:48:02 作者：
由于項(xiàng)目中用到左右選擇的控件，網(wǎng)上找了一些相關(guān)的實(shí)現(xiàn)，基本上有兩個(gè):1、基于JQuery UI的控件2、某個(gè)兄弟手寫的一個(gè)控件,具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
由于項(xiàng)目中用到左右選擇的控件，網(wǎng)上找了一些相關(guān)的實(shí)現(xiàn)，基本上有兩個(gè)：
1、基于JQuery UI的控件：
這個(gè)看起來樣式不錯(cuò)，而且使用起來功能也比較齊全，但是與傳統(tǒng)的左邊選擇到右邊的方式不同，有點(diǎn)別扭。
2、某個(gè)兄弟手寫的一個(gè)控件：
這個(gè)符合我的需求，簡(jiǎn)單實(shí)用，但是不滿足我的另一個(gè)需求，我的需求是右邊的選擇框需要能選擇不同顏色的圖片，而且這個(gè)樣式有點(diǎn)不美觀。
怎奈自己寫一個(gè)吧，費(fèi)了我半天的勁，總算搞定了，貼出來與大家分享一下吧：
這個(gè)既滿足了我功能的需求也滿足了我對(duì)樣式的要求。
關(guān)于顏色選擇我引用了第三方的一個(gè)插件jquery.colorPicker.js，我比較喜歡簡(jiǎn)單實(shí)用并且美觀的東西。
關(guān)于code，太多了不方便貼出來，說一下我的實(shí)現(xiàn)吧，左右的控件用的是jQuery easy UI的datagrid控件，我也是嘗試了幾個(gè)控件，只有這個(gè)符合我的要求，當(dāng)然了對(duì)于datagrid也做了一些去掉標(biāo)題、手動(dòng)修改樣式的一些處理。左右選擇和上下控制基本上的邏輯是一樣的，就是調(diào)用的datagrid的一些方法來實(shí)現(xiàn)了，當(dāng)然這塊控制灰掉button也做了很多的邏輯控制，目的就是讓用戶使用起來更加方便。
1、基于JQuery UI的控件：
這個(gè)看起來樣式不錯(cuò)，而且使用起來功能也比較齊全，但是與傳統(tǒng)的左邊選擇到右邊的方式不同，有點(diǎn)別扭。
2、某個(gè)兄弟手寫的一個(gè)控件：
這個(gè)符合我的需求，簡(jiǎn)單實(shí)用，但是不滿足我的另一個(gè)需求，我的需求是右邊的選擇框需要能選擇不同顏色的圖片，而且這個(gè)樣式有點(diǎn)不美觀。
怎奈自己寫一個(gè)吧，費(fèi)了我半天的勁，總算搞定了，貼出來與大家分享一下吧：
這個(gè)既滿足了我功能的需求也滿足了我對(duì)樣式的要求。
關(guān)于顏色選擇我引用了第三方的一個(gè)插件jquery.colorPicker.js，我比較喜歡簡(jiǎn)單實(shí)用并且美觀的東西。
關(guān)于code，太多了不方便貼出來，說一下我的實(shí)現(xiàn)吧，左右的控件用的是jQuery easy UI的datagrid控件，我也是嘗試了幾個(gè)控件，只有這個(gè)符合我的要求，當(dāng)然了對(duì)于datagrid也做了一些去掉標(biāo)題、手動(dòng)修改樣式的一些處理。左右選擇和上下控制基本上的邏輯是一樣的，就是調(diào)用的datagrid的一些方法來實(shí)現(xiàn)了，當(dāng)然這塊控制灰掉button也做了很多的邏輯控制，目的就是讓用戶使用起來更加方便。
您可能感興趣的文章:
相關(guān)文章
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框使用說明，需要的朋友可以參考下。2011-11-11
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06
Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的實(shí)例代碼
這篇文章主要介紹了Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2017-10-10
解決用jquery load加載頁面到div時(shí),不執(zhí)行頁面js的問題
這篇文章主要介紹了解決用jquery load加載頁面到div時(shí),不執(zhí)行頁面js的問題。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開折疊效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開折疊效果,涉及jquery中fadeIn與fadeOut實(shí)現(xiàn)折疊與展開頁面元素的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
本文給大家詳細(xì)講解的是如何利用jquery.more.js實(shí)現(xiàn)點(diǎn)擊加載更多后在本頁面內(nèi)下面加載數(shù)據(jù)，十分的實(shí)用，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery圖片加載顯示loading效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
鋒利的jQuery 要點(diǎn)歸納（二）上 jQuery中的DOM操作，需要的朋友可以參考下。2010-03-03
jQuery的Ajax用戶認(rèn)證和注冊(cè)技術(shù)實(shí)例教程(附demo源碼)
這篇文章主要介紹了jQuery的Ajax用戶認(rèn)證和注冊(cè)技術(shù),結(jié)合完整實(shí)例較為詳細(xì)的分析講解了jQuery中ajax方法實(shí)現(xiàn)用戶驗(yàn)證與注冊(cè)的相關(guān)技巧與注意事項(xiàng),并附帶了demo源碼供讀者下載,需要的朋友可以參考下2015-12-12
jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionWidgets插件結(jié)合swf文件載入xml數(shù)據(jù)實(shí)現(xiàn)Bulb圖效果的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03