中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

三層分離道理很簡單，但是要用例子來說清楚也不易。今天優化“搜索”功能時突然想到，這便是個很典型的示范。從頭開始，我一般會選擇如下代碼作為搜索錄入框原型，以前做的HTML原型都用這個：

<input size=15 type=”text”?name=”search_key” style=”color:#bbb;” value=”志號、名稱” onfocus=”if(this.value==’志號、名稱’){this.value=”;this.style.color=’#333333′;}” onblur=”if(this.value==”){this.value=’志號、名稱’;this.style.color=’#bbbbbb’;}” />

用文字來描述交互：默認淡色#bbbbbb文字提示錄入字段，用戶點擊錄入時顏色會加深#333333正常，但當退格刪掉所錄內容input內值為空時，會恢復淡色默認提示。如下圖：

產品使用過程中，往往通過定義外層搜索模塊.search來傳遞控制這個錄入框和按鈕的展示效果，如上我還定義了個.text用于統一控制表單的文本錄入框如如此從三層分離的角度看，目前只做到了結構、表現分離，而結構、行為是綁到一起的，并不符合Web Standard設計思想。改造思路是把行為剝離，因為本站在使用jQuery類庫，因此考慮用jQuery語句來實現。通過name的值search_key做綁定，代碼如下：

<script type=”text/javascript”/>
jQuery(function($){
$(‘.search?input[name=search_key]‘).focus(function(){
if($.trim(this.value)===’志號、名稱’){
this.value=”;
$(this).addClass(‘focus’);
}
}).blur(function(){
if($.trim(this.value)===”){
this.value=’志號、名稱’;
$(this).removeClass(‘focus’);
}
});
});
</script/>

剩下的HTML結構如下，無style也無script很干凈：

<input size=”15″ type=”text” name=”search_key” value=”志號、名稱” />

最后綁定表現，美化是我們的目地，但別忘了還有個基礎要求是兼容性要好。加分題，考慮在激活錄入框時提示，如同safari瀏覽器錄入表單的shadow效果，可惜IE不支持。效果和交互如圖：

到此其實還沒完，還有優化余地。比如瀏覽器如果不支持腳本，觸發錄入框不能自動清空，雖然不至于功能失效，但也會給用戶造成困惑。另外，如果考慮進一步簡化，可以整合或隱藏按鈕回車提交，我考慮“集郵冊”用戶群沒有這么高端?；緝灮瓌t，是所有功能表現在同一水準線，模塊化迭代式前進。

來源：源地址：http://blog.jiyouce.com/?p=156