js 網頁開發

jQuery教學-自動縮排斜角頁籤選單

2010/01/07

梅問題 -jquery教學-自動縮排斜角頁籤選單

  這個頁籤選單要特別感謝二位好友,分別是男丁格爾以及內湖孫夫人, 有男丁的相助下,幫梅干修正了不少的bug,在一切都快完成時,才發現這頁籤只可在IE8上運作,最後梅干只好個別針對IE6、IE7作調整,好在有內湖孫夫人讓梅干終於會算排列數,現在總算可在各瀏覽器正常的運作,頁籤選單到不是什麼新玩意 ,但像這種二面斜的頁籤選單,梅干到是頭一遭,看似簡單但卻殺了梅干不少的腦細胞,這個頁籤選單最好玩的地方就在於,當改變視窗大小時,頁籤就會自動排列, 真的挺好玩的,且圖片不用再切的西八爛,只要四張按鈕底圖就可搞定。


btn.png
這邊得先準備四張按鈕底圖,上面二張是頁籤的底圖,會準備二張的原因就在於,當頁籤為第一個時,那斜角前就變透明,而下方則是滑鼠滑上時變換的圖片,當按鈕為最後一筆後,就把後方的藍色區塊刪除。

梅問題 -jquery教學-自動縮排斜角頁籤選單
放在<head>…..</head>之間(javascript):
<script src=“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type=“text/javascript”>
$(function(){
    var num;
    var getUly=$(“.tabmenu”).offset().top-7;//取得ul與瀏覽上方的間距
    var ver=Math.floor($.browser.version);//取得IE版本
var totalrul; //取得行數 var Item_total; //取得一排有幾個
function setting(){
    var $li = $(".tabmenu li");
    var li_total=$li.length;
    Item_total=Math.floor($("ul").width()/110);
    totalrul=Math.floor(li_total/Item_total);
    $li.removeClass("end str").children("a").removeClass("onend");
    $li.eq(0).addClass("str").end().eq(li_total-1).addClass("end"); 
    for(i=1; i&lt;totalrul+1; i++){
        $("li").eq(Item_total*i).addClass("str");
        $("li").eq(Item_total*i-1).addClass("end");
    }
    $("li.end").children("a.on").addClass("onend"); 

    //設定起始on的y座標,取得自已的索引數   
    IEhack($(".tabmenu li").index($("a.on").parent())+1);       
}

function IEhack(i){
    var getlilist=i/Item_total;
    var Remainder=Math.floor(i%Item_total);//取餘數
    //當取得餘數不為0商+1
    num=Math.floor(getlilist);
    (Remainder!=0)?num+=1:num;

    var _y=(36*(num-1))+getUly;
    if(ver == 6 || ver ==7){
      $(".on").css("top",_y);
    }
}

setting();
//當視窗大小改變時呼叫setting函式
$(window).bind("resize", setting);

$(".tabmenu a").hover(function(){
    $(".tabmenu a").removeClass("on onend");
    $(this).addClass($(this).parent("li").hasClass("end") ? "on onend" : "on");     
    IEhack($(".tabmenu li").index($(this ).parent())+1); //取得自已的索引數 

    return false;
}).focus(function(){
    $(this).blur(); 
}); 

}); </script>


放在<head>…..</head>之間(css):
a {
    font-size:12px;
    text-decoration: none;
    color:#FFFFFF;
}
ul.tabmenu {
    list-style-type: none;
}
ul.tabmenu li{
    float:left;
    display:block;
    width:110px;
    height:36px;
    line-height:36px;
    text-align:center;
    position:relative;
*position:auto; background:url(images/btn.png) no-repeat left top; _background:url(images/btn.gif) no-repeat left top;
} ul.tabmenu li.str{ background:url(images/btn.png) no-repeat left -36px; _background:url(images/btn.gif) no-repeat left -36px;}

ul.tabmenu li a{display:block;}

ul.tabmenu a.on{ position:absolute; bottom:0; *bottom:auto; *top:7px;
z-index:1000; display:block; width:128px; height:43px; line-height:43px; background:url(images/btn.png) no-repeat left -72px; _background:url(images/btn.gif) no-repeat left -72px; color:#333; *margin-left:-55px; }

ul.tabmenu a.onend{ position:absolute; display:block; width:115px; height:43px; line-height:43px; background:url(images/btn.png) no-repeat left -115px; _background:url(images/btn.gif) no-repeat left -115px; bottom:0; z-index:1000; color:#333; }


放在<body>…..</body>之間:

#html
<ul class=“tabmenu”>
  <li><a href=“#” class=“on”>選單1</a></li>
  <li><a href=“#”>選單2</a></li>
  <li><a href=“#”>選單3</a></li>
  <li><a href=“#”>選單4</a></li>
  <li><a href=“#”>選單5</a></li>
  <li><a href=“#”>選單6</a></li>
  <li><a href=“#”>選單7</a></li>
  <li><a href=“#”>選單8</a></li>
  <li><a href=“#”>選單9</a></li>
  <li><a href=“#”>選單10</a></li>
</ul>

  之所以會寫這一個頁籤選單,主要則是好友要用於手機中,但梅干已經沒用SmrtPhone了,所以也不知到底能不能在手機中運作,但管他手機能不能跑,現在能在各瀏覽器上運作,梅干就很開心了,在上方的註解地方,梅干還把計算的方式記錄下來,那是梅干的數學一向很差,就請各位見諒啦!為了算那排序數還真是苦了梅干。 
[範例下載]