分類  >  Web前端 >

上拉框的分離設計

tags:    時間:2013-12-10 23:03:13
下拉框的分離設計

     模擬系統內置下拉框,使得在所有的系統以及瀏覽器中具有同樣的表現,目標是功能分解,利用 mixin 分離實現。

 

下拉框功能點分析:

 

1.可以存儲值,是一個存儲數據的容器,相當於 readonly 的 input。

 

2.有下拉箭頭,點擊下拉箭頭可以彈出選項列表。(實際上點擊存儲容器也有同樣的表現)。

 

3.選項列表本質是一個 overlay,選項列表彈出後會遮蓋存儲容器下面的內容。

 

4.選項列表浮層具有默認的對齊屬性,即選項列表的左上角與存儲容器的左下角對齊。

 

5.最重要的:下拉框的內容(選項列表)是一個列表,可以通過滑鼠或鍵盤選中特定列表項值。

 

 

下拉框實現設計:

 

1.值容器

 

值容器使用 input 來表現,不過新增自定義屬性 data-value 用來表示下拉框的值,input 本身的 value 則用來表示下拉框值的對應展現內容。

 

值容器作為最基本的實現,具備 inputNode(關聯input) ,inputValue (下拉框值),inputDisplay(下拉框展現內容)三個屬性,不僅能為下拉框提供支持,經過擴展也可以作為自動補全組件的存儲底層:

 

function Base(){} Base.ATTRS = {         inputNode:{             setter:function(el) {                  return Node.one(el);             }         },          inputValue:{         },          inputDisplay:{             valueFn:function() {                 this.get("inputNode").val();             }         }     };

  2.列表

 

列表表示列表數據項的有序組合,列表使用語義化的 ul ,li來表示:

 

 

var LIST_WRAP_TMPL = "<ul class='{listClass}'>";  var LIST_ITEM_TMPL = "<li class='{listItemClass}' data-value='{listItemValue}'>{listItem}</li>"; 
 

 

具備 listData (列表內容數據),hoverListItem(當前滑鼠掠過的單個表項),selectListItem(當前滑鼠點擊確定的單個表項),以及一些樣式類配置:

 

function List(){}  List.ATTRS = {         listData:{             setter:function(v) {                 return v || [];             }         },         listClass:{             value:"ks-selectable2-list"         },         listItemClass:{             value:"ks-selectable2-list-item"         },          listItemHoverClass:{             value:"ks-selectable2-list-item-hover"         },         listItemActiveClass:{             value:"ks-selectable2-list-item-active"         },          hoverListItem:{setter:smooth},         activeListItem:{setter:smooth},         selectListItem:{setter:smooth}     };
 

主要邏輯為監控滑鼠動作來更新對應屬性值(hover,click)。(經擴展也可支持鍵盤)。

 

 

3.overlay 特性擴充

 

通過擴充 overlay 的特性(盒子,定位,對齊)並結合上述 1,2 的 input 和 list 來產生模擬系統的下拉框類

 

 

UIBase.create([         S.require("uibase/box"),         S.require("uibase/contentbox"),         S.require("uibase/position"),         UA['ie'] == 6 ? S.require("uibase/shim") : null,         S.require("uibase/align"),         SelectBase,         SelectList);
 

下拉框要處理自己的邏輯了:

 

1.監控 list 的選擇項變化,同步 input 的展現內容與自定義的 data-value 屬性值。

 

2.將 input 設為只讀,並且屏蔽 input 獲得焦點 (系統下拉框的 input 是不會出現游標的)。

 

3.添加下拉箭頭。

 

3.控制列表顯示:點擊 input 以及下拉箭頭進行列表的顯示和隱藏,點擊空白區域隱藏列表。

 

4.設置默認對齊屬性,列表默認對齊於 input。

 

 

3.demo

 

模擬系統下拉框

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網