|
還是邁向1.0beta：
這個(gè)zSelect要適應(yīng)zcms平臺(tái)復(fù)雜的壞境，無疑還要進(jìn)一步修改，我們發(fā)現(xiàn)在ie6下替換select會(huì)造成窗口閃爍，經(jīng)測(cè)試發(fā)現(xiàn)在ie6下，當(dāng)原生的select控件被replace或delete，將會(huì)有極短時(shí)間的整個(gè)頁面變空白（猜想可能是ie6下窗口級(jí)別的控件被刪除會(huì)讓頁面重渲染）。
雖然這種頁面變白的時(shí)間很短，并且只出現(xiàn)在ie6內(nèi)，但是對(duì)于精益求精的我們來說，任何可能讓使用者感覺不穩(wěn)定不可靠的bug都是不允許的，于是我們最終放棄了用非侵入式的js替換原生select控件的方案，
我們決定使用新的zSelect標(biāo)簽，為了減少對(duì)界面設(shè)計(jì)的約束，我們有自己的風(fēng)格。請(qǐng)參考程序員的一篇帖子《一種簡(jiǎn)約可行的后臺(tái)界面UI開發(fā)方案》。
在我們的框架下，如果要把原有的select控件替換為新的zSelect控件，只需要在原select控件外加上jsp Tag<z:select>，在頁面里一個(gè)zSelect控件的html如下。
<z:select>
<select id="select1" name="select1" style="widht:150px;">
<option value="1" selected>政府門戶類演示站</option>
<option value="2">新聞門戶類演示站</option>
<option value="3">企業(yè)形象類演示站</option>
<select>
</z:select>
這樣在dw里插入及編輯select控件的方式和原來完全一樣，只需要用<z:select>把原來的<select>標(biāo)簽包住即可，所以對(duì)原有代碼的修改非常少，系統(tǒng)的升級(jí)也是非常方便的。 上面是使用了jsp tag，而經(jīng)過后臺(tái)處理后的<z:select>輸出到瀏覽器上的HTML如下:
<div ztype="zSelect" id="select1" name="select1" class="zSelect" style="widht:150px;">
<span value="1" selected>政府門戶類演示站</span>
<span value="2">新聞門戶類演示站</span>
<span value="3">企業(yè)形象類演示站</span>
</div>
也就是說如果不想使用<z:select>標(biāo)簽的話，用上面的結(jié)構(gòu)代替和使用<z:select>是等同的效果。
在我們ZCMS平臺(tái)中，這個(gè)select控件（以下稱為zSelect）還有以下要求：
1、因?yàn)槠脚_(tái)的彈出層（Dialog）里用到了iframe，那么要求下拉列表不被iframe（或原生的select或flash）阻擋，要解決這個(gè)問題的思路還是很簡(jiǎn)單的，我們把下拉列表移到頂級(jí)窗口（window.top）并給一個(gè)適當(dāng)?shù)膠-index值，這樣就不受iframe邊框的束縛了。只是這樣就增加了許多其他的工作，比如跨越iframe的位置計(jì)算、下拉列表彈出后如果iframe內(nèi)容滾動(dòng)時(shí)的處理、下拉列表靠近頂級(jí)窗口底部時(shí)位置的調(diào)整。代碼量增加了不少。
2、下拉列表下的列表項(xiàng)可以更豐富，可以是列表、樹甚至是表格。
解決這個(gè)問題的思路更簡(jiǎn)單，我們給zselect控件一個(gè)url屬性，如果這個(gè)屬性存在，下拉列表內(nèi)的iframe的地址就是一個(gè)指向這個(gè)url，這樣，不要說是樹型、表格，還是日期選擇、顏色選擇，只要有需要都可以通過引用不同的頁面來實(shí)現(xiàn)不同形式的下拉內(nèi)容，而且編輯起來又很直觀。
完整版的zSelect代碼有近700行，而且一些許多公共方法的調(diào)用（如$E.getPosition()），在這兒就不再給出完整代碼示例了，各位有興趣的話可以去我們的網(wǎng)站（http://www.zving.com）下載我們的ZCMS研究，里面還有一些好用又有趣的東西,比如簡(jiǎn)潔易用的數(shù)據(jù)表格（zDataGrid）、良好用戶體驗(yàn)的時(shí)間選擇控件（zTimeSelector）、高效的即時(shí)語法加亮編輯器（zScriptEditor）、基于AJAX的進(jìn)度條控件（zProgress）……
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2933000-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/6794.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 分享我們的select控件設(shè)計(jì)過程 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 分享我們的select控件設(shè)計(jì)過程 [3]
