作者TonyQ (^^)
看板Ajax
標題Re: [問題] n個下拉選單共用一份選項list？
時間Wed Dec 23 00:11:11 2009
※ 引述《diamondking (迷惘)》之銘言：
: 大家好，不曉得大家有沒有遇過一種狀況，
: 假設畫面上的有很多很多下選單(DropDownList, 或叫Select)，
: 但其選項列表都是一模一樣的，唯獨每一個的Selected item可能不同。
: 如此一來，因為大量的重覆選項，造成網頁的負擔。
: 有沒有一種作法，或是有沒有JS或jQeury的元件，
: 能讓我所有的下拉選單，共用一份列表？
: 我記得以前好像有看過人家做「假」的下拉選單，
: 也就是它實際上似乎是個輸入框(input)，旁邊加一個很像下拉的按鈕，
: 當按鈕按下時，才去某個div中抓清單，顯示在input底下，
: 製造出偽下拉選單。
: 不知道大家有沒有做過或看過這樣的東西？
: 先謝謝了
雖然說不是很想舉這個例子...
以前我在設計
http://ppolis.tw/user/tony
這個頁面左上角那個放大鏡的項目時大概是這樣做的。
<div>handler </div>
<div>menuItem</div>
1. handler 綁click (也就是放大鏡)
2. 計算handler 的位置，（offset）
看狀況再偏移個15-20px來顯示menuItem。
透過設定position 跟取得 offset 可以輕鬆指到定點。
（當然是用jQuery比較快.）
3. menuItem綁click (trigger handler 自定義事件設值)
大概就這些吧，考慮到送表單的話，
還要再塞個hidden input 來接值比較方便。
應該是不難做啦，只是繁瑣了點而已，而且會比傳統的select多一點限制。
至於那個灰色字跟輸入框怎麼不互相影響這個就別問了，
我現在只記得光那個框的設計，當時就花了我一整天了.......-w-;;;
原始作法因為 source 被gzip掉 ，我也不方便提供原始碼，
所以自己想辦法參考囉。
--
那個需求我從頭到尾的參考資料跟需求描述,
只有一個放大鏡＋參考safari的搜尋框...... XD
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.112.219.195