DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery結合CSS制作漂亮的select下拉菜單
jQuery結合CSS制作漂亮的select下拉菜單
編輯:JavaScript綜合知識     

   對於我來說,標准的HTML元素(Select)已經讓我感到討厭。它不能夠正常的在IE浏覽器上顯示。還有一點就是他並不僅僅包含簡單的文本。本實例將完全摒棄select元素,通過JQuery和CSS來構建DropDown元素。

  我們在進行表單設計時,可能要用到select下拉選項控件,遺憾的是,IE浏覽器默認的select控件外觀非常丑陋,而且不能用樣式來控制,不能在選項中添加圖片等信息。今天我將通過實例來講解如何用CSS和jQuery來制作漂亮的下拉選項菜單。

  XHTML

  ?

1 2 3 4 5 6 7 8 9 10 <div id="dropdown"   <p>請選擇城市</p   <ul     <li><a href="#">長沙</a></li     <li><a href="#">北京</a></li     <li><a href="#">南京</a></li     <li><a href="#">堪培拉</a></li     <li><a href="#">多倫多</a></li   </ul </div>

  可以看出,我們使用div來替換下拉選項控件原生的select標簽。

  CSS

  ?

1 2 3 4 5 6 7 8 9 #dropdown{width:186px; margin:80px auto; position:relative #dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat right 4px color:#807a62; cursor:pointer #dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2 position:absolute; display:none #dropdown ul li{height:24px; line-height:24px; text-indent:10px #dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none #dropdown ul li a:hover{background:#c6dbfc; color:#369}

  樣式不要多講,你可以修改CSS中的背景色和字體顏色,甚至其他任意定義的樣式。有一個下拉箭頭的小圖標,已經打包在附件裡了。

  jQuery

  首先,當單擊“請選擇城市”時,判斷下拉的層“ul”是否處於顯示狀態,如果是則隱藏下拉選項,否則則打開(下滑)下拉選項

  ?

1 2 3 4 5 6 7 8 $("#dropdown p").click(function(){    var ul = $("#dropdown ul");    if(ul.css("display")=="none"){      ul.slideDown("fast");    }else     ul.slideUp("fast");     });

  然後,當單擊下拉選項時,獲取選項內容,將選項內容寫入到

標簽中,同時隱藏下拉選項。

  ?

1 2 3 4 5 $("#dropdown ul li a").click(function(){    var txt = $(this).text();    $("#dropdown p").html(txt);    $("#dropdown ul").hide();  });

  這樣就完成了一個簡單的下拉選項的操作,是不是很簡單啊。

  當然,如果與後台交互,需要獲取選項的value值,那就需要先定義XHTML。

  ?

1 2 3 4 5 6 7 8 9 10 11 <div id="dropdown"   <p>請選擇城市</p   <ul     <li><a href="#" rel="1">長沙</a></li     <li><a href="#" rel="2">北京</a></li     <li><a href="#" rel="3">南京</a></li     <li><a href="#" rel="4">堪培拉</a></li     <li><a href="#" rel="5">多倫多</a></li   </ul </div <div id="result"></div>

  從代碼中可以看出,在給a標簽加個rel屬性,並賦值,就相當於select的option標簽的value值。接下來就是通過jQuery獲取rel值,請看代碼:

  ?

1 2 3 4 5 6 7 $("#dropdown ul li a").click(function(){    var txt = $(this).text();    $("#dropdown p").html(txt);    var value = $(this).attr("rel");    $("#dropdown ul").hide();    $("#result").html("您選擇了"+txt+",值為:"+value);  });

  這樣就完成了一個完整的下拉選項的操作。

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved