JS 控制項的狀態和屬性

2022-03-08 18:38:06 字數 2190 閱讀 6762

寫乙個簡單的控制項,只要能夠完成其功能就ok了,但是寫乙個控制項庫,特別是以類的繼承的方式實現的控制項庫,概念的統一更為重要,本節我試圖定義控制項的共有屬性。

乙個控制項庫有多個控制項,各個控制項的行為各異,但是控制項的各種狀態是一致的。如:

選中狀態、展開狀態、禁用狀態、獲取焦點等等很多狀態,有些狀態的概念很好統一,但是有些狀態的概念不好統一,容易產生誤解,下面一一講解:

selected 選中狀態

選中是控制項最常見得狀態,分為單選和多選2種選擇型別,還需要控制控制項是否可以選中,所以我們可以抽象出以下屬性:

1.selected 是否選中

2.multipleselect 是否多選

3.selectable 是否可以選中

active 啟用狀態

點選控制項時,滑鼠的 mousedown 和 mouseup之間我們定義乙個active事件,這個事件在很多時候非常有用,例如拖拽時,可以定義出以下屬性:

1.active : 是否啟用

2.activeable : 是否可以啟用

hover 滑鼠進入狀態

滑鼠進入控制項時,控制項需要高亮顯示,所以我們定義乙個屬性:

1.highlighted: 高亮顯示

之所以不定義hovered屬性的原因是,高亮顯示有可能由於其他原因產生

focus 獲取焦點狀態

當我們使用鍵盤和滑鼠時表單元素或者

設定 tabindex的元素會產生獲取焦點的狀態,不同的瀏覽器有不同的表現形式,控制項如果要支援鍵盤事件必須考慮這個狀態,由此我們定義出:

1.focused :是否獲取焦點

2.focusable:是否可以獲取焦點

open開啟狀態

展開和開啟狀態這裡使用2個名稱, expand和open,這是因為我們在實現控制項過程中,有2種型別的展開,

1.一種(expand)是展開的部分屬於此控制項,例如樹控制項,展開的子節點也屬於樹控制項;

2.另一種(open)是,展開的部分不屬於控制項本身,這種展開是控制項的非常態,例如

上下文選單,選單項和子選單之間不存在所屬關係。

open 展開狀態是說展開的部分不屬於控制項,看下面的例子:

**的選單與表頭沒有所屬關係,但是在操作選單的過程中,表頭要處於open的狀態,此時使用expand 是不合適的。所以我們這一有以下屬性:

1.open : 是否開啟

expand 展開狀態

展開狀態是展開部分屬於控制項的內容(dom結構或者子控制項),例如多級選單、樹都屬於這一種,看下面的例子:

這裡的選單項包含子選單時,有展開摺疊2中狀態,因此我們這裡有以下屬性:

1.collapsible 是否可以摺疊

2.collapsed 是否摺疊

這裡我們使用collapsed的原因是,collapsed的表意更為清晰,便於使用,另一方面,大部分前端控制項庫的樹形結構都是使用collpased屬性。

visible 可見狀態

顯示和隱藏是控制項必有得狀態,而顯示和隱藏又有2種形式:

1.visibility: visible 和 hidden

2.display: block(inline ,inline-block等) 和 none

所以我們這裡定義一下屬性:

1.visiblemode: 顯示的方式

2.visible:是否顯示

disabled 禁用狀態

禁用控制項可以影響控制項的大部分其他狀態,在禁用狀態下,選中、啟用、焦點、展開狀態都無效。我們這裡有屬性:

1.disabled

本節從控制項的共有狀態出發,整理出控制項的常見屬性,當然這些屬性不是所有控制項都有,比如open和collapsed只有在需要展開其他內容時需要。禁用狀態會影響其他狀態屬性的使用。

但是僅僅這些屬性,還不足以使我們的控制項有完善的功能,而且js的語言特性決定了,屬性固有的缺點:

1.屬性改變時不能自動同步跟屬性相關的操作

2.不能監聽屬性改變

3.無私有屬性,屬性容易被覆蓋

4.作用域內的私有變數和原型鏈上的公有變數各有問題

為了克服以上缺點,接下來我要講解

控制項的事件和屬性機制。

JS 日期控制項用到的屬性

client width offset widthy 以上獲得控制項的寬度 滾動條和非滾動條的情況 高度 clientheight scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物...

dorado前台控制項屬性js技巧

1.前台取系統時間 設定序列oracle.sequence oms sequence 前台取session的值 取request的值 2.label,texteditor,label,element renderer等 fieldlabel的id為 formname fieldlabel field...

VLC控制項 屬性和方法

vlc調研 vlc控制項支援的引數和方法 vlc物件列表 vlc plugin object的方法 l versioninfo 成員,返回版本資訊的字串 l vlc.versioninfo 方法,返回版本資訊的字串 audio object的屬性 讀寫 l vlc.audio.mute 靜音和非靜音...