2015年3月25日

[教學] jQuery學習筆記 第六堂(製作下拉式選單效果)



在這堂課中,我們會學到如何建立下拉式選單的效果,也就是當滑鼠移過去時,就會自動產生次選單的內容。

製作出來的結果就像這樣子。
這堂課我們會學習到的語法包含:

HTML和CSS語法
<ul>:無順序性表單(unordered list)
<li>:清單(list)
float:浮動
margin:邊界
padding和margin的差別(margin是調整內容以外的邊界;padding是調整內容以內的邊界)
list-style-type:設定標點類型

jQuery語法
$(selector).length:計算selector有幾個元素
.slideUp( ) / .slideDown( ) / .slideToggle
.text( )
$(":not(selector)")
mouseover和mouseenter的差異
mouseout和mouseleave的差異

這類行的下拉式選單現在很常見,像是商業週刊的網站,每移到一個選單後,它就會自動挑出選項。


方法如下:

建立一般清單

一開始我們要把我們的清單規劃如下:
每一個主選單是一個區塊,每一個次選單也是一個區塊

接著,為每個div命名,這裡可以複習一下,class(.)可以重複,id(#)不能重複。

網站之後的安排長的大概就樣這樣子

接著我們把主選單和次選單的內容填入,<ul>表示的是無順序性清單(unordered list),也就是標頭不會有12345,<li>則是可以輸入清單裡面的內容。

這裡預覽的結果如下:

CSS裝飾

接下來,我們要把我們的清單修飾一下外觀,要把它長成像是商業週刊那樣

一開始我們先把所有的標籤都還原成預設值,*:所有的標籤。

用先前所學的CSS樣式


上面的地方,我們會發現主選單並沒有被垂直置中,這時候有一個簡單的辦法,就是利用line-height(行高),把行高(line-height)設成和外框的高度(height)就可以達到垂直置中的效果,但這麼做有一個缺點,就是當我們的文字超過一行以上時,就會沒辦法使用。
其他垂直置中的方法可以參考:CSS達成DIV垂直置中的方法


這時候我們的版面就已經長得有模有樣了吧!

再來我們把它轉成水平的頁面:

要把它轉成水平的頁面,我們要利用div把main和sub包在一起


把這個div取名叫item


接著要設定寬度,總寬度(menu)要等於主選單的寬度*主選單的數目,這裡我們的主選單的寬度(main)寬度是100px,共有3個,因此總寬度(menu)要設成100*3。

這時候,我們只要用float這個指令,讓這些item由左向右排好,它就可以變成水平的了。
float的用法可以參考這裡


結果如下:

 但是這樣每次將一個欄位就要重新計算實在太麻煩了,我們可以利用jQuery的語法,讓它自己幫我們計算menu的寬度。
這裡會用到.css( ).length( )這兩個指令。

再來要記得把上面menu原本設定的寬度拿掉

 這時候我們menu的寬度就會根據我們main的數目自動增加了


上面的圖片中,我們會看到list當中的標點還在,我們可以透過list-style-type語法把它拿掉,list-style-type是用來設定前面標點的類型。


版面到這裡就差不多大功告成了!

插入jQuery語法

接下來,我們可以開始寫jQuery語法了

當滑鼠點下時,請幫我滑入、滑出

滑上、滑下的語法是slideUp、slideDown、slideToggle

因為我們有很多的main,不用一一寫,用回圈的方式就可以

再來要把回圈的變數i,帶入click這個函式中使用(這裡的id、e都是可以自己取的變數,data則是關鍵字)


這時候,一打開網頁時,所有的次選單(sub)都是展開的,我們希望的是網友去點擊時才展開,所以我們要在新增一段語法。

這裡slideUp後面的0,是表示設為0秒,等於是網友看不到一進入網頁時,次選單收起的動畫


點選某一個選單時,其他選單收合

這裡回學到一個新的語法是not,我們希望電腦幫我們做的事是當我點選某一個選單時,其他的選單都收合起來。


$(":not(selector)")語法加進去,意思是,當我點擊時,所有的sub都要向上滑,除了我所點擊的那個除外


滑鼠移入移出使啟動滑動效果

這裡要區別一下mouseover / mouseout 和mouseenter / mouseleave

這裡我們用mouseover

滑鼠移入時切換文字
我們要用陣列的方式來切換文字,當滑鼠移過時,把中文換成英文

再來要用到text這個函式

原整的程式語法如下:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉式選單製作</title>
    <style>
        *{
            margin:0px ;
            padding:0px;
        }
        #menu{
            margin: auto;
        }
        .main{
            background-color:#e33535;
            color:white;
            font-family:微軟正黑體;
            font-weight:bold;
            font-size:20px;
            cursor:pointer;
            text-align:center;
            height:35px;
            line-height:35px;
            width:100px;
        }
        .main:hover{
            background-color:#4d4949;
        }
        .sub{
            cursor:pointer;
            background-color:#4d4949;
            color:white;
            font-family:微軟正黑體;
            text-align:center;
            font-weight:bold;
            width:100px;
        }
        .sub li{
            list-style-type:none;
            line-height:25px;
        }
        .item{
            float:left;
        }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        $(document).ready(function(){
            
            var oldtext=['今日總覽','成功者故事','財經','時事','職場力']
            var newtext=['Today','Success','Business','News','Career']
            $(".sub").slideUp(0)
            for(i=0;i<$(".main").length;i++){
                $(".main:eq("+i+")").mouseover({id:i},function(e){
                    n=e.data.id
                    $(".main:eq("+n+")").text(newtext[n])
                    $(".sub:eq("+n+")").slideToggle()
                    $(".sub:not(:eq("+n+"))").slideUp()
                })
                $(".main").mouseout({id:i},function(e){
                    n=e.data.id
                   // $(".sub").slideUp(200)
                    $(".main:eq("+n+")").text(oldtext[n])
                })
            }
            $("#menu").css("width",$(".main").length*100)
        })
    </script>
</head>
<body>
<div id="menu">
<!-- 第一組清單   -->
    <div class="item">
    <div class="main">今日總覽</div>
    <div class="sub">
        <ul>
            <li>今日最新</li>
            <li>熱門排行</li>
            <li>特別企劃</li>
        </ul>
    </div>
    </div>    
<!-- 第二組清單   -->
    <div class="item">
    <div class="main">成功者故事</div>
    <div class="sub"></div>
    </div>
<!-- 第三組清單   -->
    <div class="item">
    <div class="main">財經</div>
    <div class="sub">
        <ul>
            <li>產業動態</li>
            <li>趨勢報導</li>
            <li>地產風雲</li>
            <li>投資焦點</li>
            <li>個人理財</li>
        </ul>
    </div>
    </div>
<!-- 第四組清單   -->
    <div class="item">
    <div class="main">時事</div>
    <div class="sub">
        <ul>
            <li>國際</li>
            <li>兩岸</li>
            <li>新聞</li>
        </ul>
    </div>
    </div>
<!-- 第五組清單   -->
    <div class="item">
    <div class="main">職場力</div>
    <div class="sub">
        <ul>
            <li>經營創業</li>
            <li>管理心法</li>
            <li>職場修練</li>
            <li>心靈成長</li>
        </ul>
    </div>
    </div> 
    
</div>


</body>
</html>

最後的結果就像這樣子



以上內容均為本人在馬老師雲端研究室學習所整理之筆記

0 意見:

張貼留言