早期 Web 控制項的嘗試

2021-05-05 19:58:53 字數 2288 閱讀 9746

選項卡,又稱「標籤頁」,英文中有統一名稱,謂之 tab。tab 是一種常見的控制項,能夠有效地利用空間而廣泛使用。

開發過程中遇到的問題。

如果候選欄出現下面的錯位,那麼請在 tab 容器前面加入乙個換行符

因為 tabs 是乙個 dom 佇列,所以必須保證佇列間不能插入非 tab 標籤,即使 也不行,否則會渲染出錯。

dhtml回頭看:一步一步之瀏覽器的 scroller 滾動

首先說說怎麼讓瀏覽器出現滾動條?最普遍的一種的描述是,內容足夠長的話,瀏覽器便會自動出現滾動條,也就是說,內容長度與容器長度是有密切關係的,一旦容器高度小於實際內容長度(高度)的時候,瀏覽器應該出現滾動條,以便讓使用者翻滾內容,——無論是 x 方向抑或 y 的方向。控制容器高度,可以是通過拖放容器控制項來決定,也就是 resize  事件;另外一種便是寫死容器的高度,譬如某個 div,我定義其 height : 200px 高度,而實際內容超出 200px, 很自然要出現滾動條。滾動條是一旦內容超長的話便會出現的——如果要控制滾動條不出現這樣需求的需求怎麼辦?很簡單,就是讓 overflow 樣式屬性為 hidden ,表示絕對禁止滾動條出現。如果 overflow 為 auto,表示內容不長的話便不出現滾動條,長了就出現。 

使用者自己控制滾動條是最普遍的情形,那麼,我說,我們程式設計師寫**來控制滾動條移動是否可以?答案當然是可以。接下來介紹的這個 scrolltop/scrollleft 屬性便是辦這件事情的。它們乙個是向下方滾動,另外乙個是向右滾動,可以說當搞清楚了 top 方向自然曉得 left 方向。為方便咱敘述,咱挑乙個 scrolltop 說就行。scrolltop 是關於可見內容與其容器最頂端之間的距離,它是可讀可寫的屬性,接受型別為number,怎麼理解這個「可讀可寫」?當讀取 scroll 的時候,就是獲取當前距離是多少;對 scrolltop 寫入的時候,就是設定內容進行「滾動」,滾動多少便是數值的大小。scrolltop 初識值是 0,極值是所處容器的高度,步進值就是咱賦予 scrolltop 的值,一次移動多少,那麼這時候就是寫入 scrolltop 的時候。如果 el.scrolltop = 10 就是「滾動」到刻度為10的那個位置上,測試一下這個例子 1.1:

看到滾動條有變化了吧?第乙個例子通常比較簡單的,以便順利入門:我們只是在 onclick 事件中寫了一句:

document.getelementbyid('test_1').scrolltop = 10;
意思是滾動的幅度為10畫素。因為 scrolltop 初始值是 0,所以可以直接使用 += 運算子,這樣的話,多次按下按鈕的作用就是進行連續滾動,請見例子 1.2:

如當前我們制定步幅為20那樣,第一次滾動20個畫素,再按一次,40,第三次就是60……到了極值之後再按都不會滾動了。

作為筆者的我也不得不表示,毫無難度。

/**

* 固定位置元素(簡單版)。

*/function ******couplet(el) , 2);

}/**

* couplet that moves with the screen scroll.

* @argument el the id of element

*/couplet = function(_el)

var _percent = 0.1 * (document.documentelement.scrolltop - arguments.callee.count);

var percent = _percent > 0 ? math.ceil(_percent) : math.floor(_percent);

this.settop(this.gettop() + percent);

arguments.callee.count += percent;

};//todo try to use "window.onscroll"

setinterval(movefn.createdelegate(ext.get(_el).setstyle('position', 'absolute')), 2);

};

WEB控制項

新年,把自己剛做的乙個控制項拿出來給大家分享,給自己動手做控制項的朋友切磋切磋。現在在山西長治帶一幫童子軍做乙個警用地理資訊系統,前期一直在做設計,現在專案剛剛進入編碼階段。一日有組員做乙個資料錄入介面,有日期輸入字段。該老弟直接用乙個textbox就完事了,我批評說應該使用日曆控制項讓使用者可以選...

WEB控制項

web控制項 我想了半天也不知道如何定義這個web控制項,它比html控制項難於理解,畢竟html太像原來我們熟悉的東東了。而web控制項確與我們平常見到的有很大的出入,不知道大家還記不記得我說過的一句話,那就是asp.的程式就像是寫vbvc中的視窗,先再這些視窗中加入我們的需要的控制項,然後再對這...

WEB控制項

web控制項 我想了半天也不知道如何定義這個web控制項,它比html控制項難於理解,畢竟html太像原來我們熟悉的東東了。而web控制項確與我們平常見到的有很大的出入,不知道大家還記不記得我說過的一句話,那就是asp.net的程式就像是寫vbvc中的視窗,先再這些視窗中加入我們的需要的控制項,然後...