茫茫網海中的冷日 - 對這文章發表回應
茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664686 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00043.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

對這文章發表回應

發表限制: 非會員 可以發表

發表者: 冷日 發表時間: 2010/3/17 14:54:23

通用Combobox(Select)以至一般控件的設計與實現

2009年06月14日 由 Bgser

本文涉及到combobox設計與實現上的一些方法論,並提供了一個參考實現.

Combobox(以下簡稱combox),也就是通常的意義上的Select控件,最具代表的是html裡的select元素,
它可以在有限的空間內提供多個選項給用戶選擇,這個與菜單十分相似,並作為表單元素將數據提交到服務器.
種種原因使得有時有必要自定義一個combox控件,來代替自帶的select,來分析一下html的select有什麼基本功能.

>與form集成,字段可提交

>控件禁用或禁用單個選項

>選擇,可以指定選擇任意項或不選

>鍵盤導航
支持鍵盤上下鍵導航選項,ENTER,ESC鍵關閉下拉並響應

>滾動
如果列表項過多而下拉空間有限,就應該出現滾動條,
並且在用戶選擇選項過程中,選項要相應的滾動到可視範圍內

>下拉框下拉時定位到可視範圍內

>下拉框上下文切換時自動消失
即點擊combox外時下拉框自動消失

如果是自定義的combox控件,可擴展功能有

>可編輯或不可編輯

>控件自定事件

>ajax加載
根據響應動態加載項

>過濾
用戶在輸入過程中過濾條項並自動定位

>定制下拉框
下拉框彈出的內容是可定制的,根據實現需要定制,如一個列表,一顆樹,一個表格等

>在定制下拉框後combox的基本行為保持不應
自定下拉框後不能改變控件應用的基本行為,如選擇,鍵導航等

>多樣式支持,如控件的hover,點擊,下拉時都有不同外觀效果,下拉框具有陰影等

如果自定義combox控件,以上的基本功能是要實現的,不同方式有不同實現,越靈活就越不簡單,.
現在考慮一個在封閉式環境下的實現,
這所謂的封閉環境是指為特定的需求應用而實現,代碼考慮不重用,在響應過程中不與外界進行通訊,功能與控件完全一體化,具有很強的針對性實現,

這種實現較為簡單,根據需求可部分實現select功能,有時為了設計與實現上的便利,用到多種的hack.
例如在HTML模板上的設計,可將下拉框的HTML組織在控制自身裡,
而不是將下拉框的加在BODY中,這種設計簡單明瞭,下拉定位方便,但也造成下拉框不夠通用,在樣式控制方面也要一定的技巧.
這類封閉環境下的產物常見有的一些自動完成控件,拿來就可以用.

下面來考慮一個通用的,可擴的設計方案
這裡所謂通用,是指一個集成的環境裡面,不同應用是共享的,代碼是可重用的,來對上面combox所有功能分析一下,給控件解耦,提取出一些獨立的功能,並給出一個與combox無關的控件設計模型.

一個控件模型可由以下一個或多個模型的組合而成
1.事件模型(event model)
具有事件模型的控件有添加事件監聽器,發送,和移除事件的能力.
給控件建立事件模型是很有意義的,外部可監聽控件一些感興趣的事件並利用事件進行通訊,如MVC模型的實現多是基於事件(消息)的驅動.
實現了事件模型的控件具有可擴性,因為事件可有多個監聽器,或者說通常意義上的回調,這個當然與單個回調效果不一樣了.
有必要說說HTML事件模型與自定的不同,HTML受限於HTML結點而不是控件的事件,並且外界並不能向結點發送事件.

2.選擇模型(selection model)
具有選擇模型的控件具有單選,多選,並給合鍵盤導航選擇等功能.

3.加載模型(loading model)
加載模型使得控件有自動Ajax加載並組裝數據的能力

4.裝飾模型(decoration model)
裝飾模型與前面的幾個模型不同,前面的通常是控件自身就支持,或是控件組成的不可或缺部分,而裝飾模型不是控件自身就有的,它顯得可有可無,只起來裝飾效果,
而裝飾時充分利用了其它的幾個模型,例如在加載的時候給控件裝飾一個」加載中」圖標,利用事件模型作監聽,利用加載模型加載前觸發,在加載後移除效果.

此外不同應用還可獨立出不同的模型,這裡就不多說了.

通用的控件建好模型後,利用這些設計一個通用而功能齊全的combox控件.

combox控件根據視圖劃分為觸發部分和下拉部分,其中下拉部分作為一個外部控件引入.
為了支持下拉的靈活實現,並且要求不同實現要具有一致的行為,下拉部分這控件必須支持上面所說的幾個模型.
這樣一來,Combobox就具有了大部分功能,並且行為始終保持一致.

實現參考:

http://www.bgscript.com/bgjs/samples/combo.html

講一下實現參考例子裡的內容:
裡面的combox的下拉控件都實現了以上幾種模型,
下拉框作為selector引入到combox,
selector在裡面的分別是組控件,樹型控件和小視圖分組控件,
它們在combox中都表現出一致的行為,不加修改就可放到combox中.
下拉時出現loading圖標和樹型控件的loading圖標是裝飾模型實現後引起的效果,
它監聽由加載模型觸發的open,final事件並作出相應的處理.

聲明: 轉載請註明轉自 背光腳本 - www.bgscript.com
原文出處:通用Combobox(Select)以至一般控件的设计与实现 » bgscript.com - JavaScript脚本编程与WEB应用开发 | JavaScript前端开发 WEB前端技术 用户体验

內容圖示
url email imgsrc image code quote
樣本
bold italic underline linethrough   












 [詳情...]
validation picture

注意事項:
預覽不需輸入認證碼,僅真正發送文章時才會檢查驗證碼。
認證碼有效期10分鐘,若輸入資料超過10分鐘,請您備份內容後,重新整理本頁並貼回您的內容,再輸入驗證碼送出。

選項

Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|