Css:制作一個更漂亮一些的多選列表框_Web標準教程
我認為多選列表具有完美的功能——只需按下Ctrl鍵,同時點擊鼠標從列表中選擇多個項目。以下是一個典型的多選列表框:
選出你最喜愛的快餐:
上面那個列表框的代碼如下:
以下為引用的內(nèi)容:
<form method="get" action="">
<b>Check your favorite fast food:</b><br/>
<SELECT MULTIPLE SIZE=5 name="favorites">
<OPTION VALUE="McDonalds">McDonald's</option>
<OPTION VALUE="BurgerKing">Burger King</option>
<OPTION VALUE="Wendys">Wendy's</option>
<OPTION VALUE="JackInTheBox">Jack in the Box</option>
<OPTION VALUE="KFC">KFC</option>
<OPTION VALUE="TacoBell">Taco Bell</option>
</SELECT>
<br/><input type="submit" value="Choose">
</form>
事實上,即使你在頁面中添加了用法說明,仍然有用戶不知道如何使用多選列表框。另外,給每個項目增加額外的標題確實會有幫助,但用一個普通的多選列表框能否達到那個目的,我還不能確定。
不過,我確實清楚知道,用一些CSS和一小段JavaScript,你就能生成一個更漂亮一點的多選列表框,并且還可以建立一個等同于普通多選列表框的URL。那樣,你就不用修改處理列表框的后端代碼——而只需要美化前端即可。
你首先從CSS開始,建立一個新多選列表框在其中滾動的小區(qū)域。我們還可以建立懸浮效果,當(dāng)鼠標移動到一個項目上時,背景色就會改變,以突出當(dāng)前選擇。
以下為引用的內(nèi)容:
<style>
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 10em;
overflow: auto;
width: 20em;
}.checklist, .checklist li { margin: 0; padding: 0; }
.checklist label {
display: block;
padding: 0 0.2em 0 25px;
text-indent: -25px;
}
.checklist label:hover { background: #777; color: #fff; }
* html .checklist label { height: 1%; }
</style>
至于JavaScript,你基本上只希望建立一個等同于常規(guī)多選列表框的URL。以上面的多選列表框為例,其查詢字符串如下:
?favorites=Wendys&favorites=KFC
那就是我們希望仿效的地方。這段腳本只是利用外觀(form)對象,循環(huán)所有檢驗欄(checkbox)的thru looking,并為那些選中的項目建立URL。很明顯,這段腳本只應(yīng)用于所有檢驗欄元素都位于新多選列表框的情況。
以下為引用的內(nèi)容:
<script type="text/javascript">
function submitForm(f) {
var cb = f.getElementsByTagName("input");
var favorites = "favorites=";
var isFirst = true;for (var i = 0; i < cb.length; i++) {
var curr = cb[i];
if (curr.type == "checkbox") {
// window.alert(curr.name + ": " + curr.type);
if (curr.checked) {
if (isFirst) {
favorites = "favorites=" + curr.name;
isFirst = false;
} else {
favorites = favorites + "&favorites=" + curr.name;
}
}
}
}
window.location = f.action + "?" + favorites;
}
</script>
最后,經(jīng)過簡單改進的新多選列表框的代碼如下:
以下為引用的內(nèi)容:
<form method="get" action="">
<b>Check your favorite fast food:</b><br/>
<ul class="checklist">
<li><label><input type="checkbox" name="McDonalds" /><b>McDonalds</b><br/>I'm lovin' it</label></li>
<li><label><input type="checkbox" name="BurgerKing" /><b>Burger King</b><br/>Have it your way</label></li>
<li><label><input type="checkbox" name="Wendys" /><b>Wendy's</b><br/>Always fresh, never frozen</label></li>
<li><label><input type="checkbox" name="JackInTheBox" /><b>Jack in the Box</b><br/>If it doesn't get all over the place, it doesn't belong in your face</label></li>
<li><label><input type="checkbox" name="KFC" /><b>KFC</b><br/>Finger lickin' good</label></li>
<li><label><input type="checkbox" name="TacoBell" /><b>Taco Bell</b><br/>Think outisde the bun</label></li>
</ul>
<input type="button" value="Choose" onclick="submitForm(this.form);">
</form>
不幸的是,TechRepublic網(wǎng)站大量應(yīng)用CSS,因此當(dāng)我在博客中試用這段樣本代碼時,它顯得非常難看。我可不希望為避免沖突而把代碼修改得一團糟——這里我只是努力想說明其中的基本理論。
因此,我在自己的個人網(wǎng)站上用這段代碼發(fā)布了一個簡單的文件,你可以通過它了解代碼的用法。
- 相關(guān)鏈接:
- 教程說明:
Web標準教程-Css:制作一個更漂亮一些的多選列表框。