[jquery] jquery 橫向頁籤
男丁格爾大大的一些網誌看多了，也像自己寫看看分頁XDDDDD
DEMO:
http://jsbin.com/xekes/3
效果如下圖
支援範圍
IE 7+、CHROME、FF 其他沒測過
Jquery版本記得選擇1.X
2.X支援範圍是IE9+
base64img在IE上支援比較不足，但是我測試是沒問題的.!
原始碼不解釋，請學會看註解...
<!DOCTYPE html>
<html>
<head>
<title>橫向分頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style>
.controller{
/*控制項*/
display: inline-block;
width: 200px;
height: 400px;
vertical-align: top;
z-index: -2;
/* inline-block ie7 HACK */
zoom: 1;
*display: inline;
}
.content{
/*內容*/
display: inline-block;
width: 800px;
height: 400px;
vertical-align: top;
margin-left: -5px;
/* inline-block ie7 HACK */
zoom: 1;
*display: inline;
*margin-left: 0;
}
.showData{
/* 內容的內容...?
顯示資料的部分
*/
width: 600px;
min-height: 350px;
margin-top: 5px;
background-color: #FFFFFF;
/*圓角*/
-moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
border-radius: 0 5px 5px 5px;
border: 1px solid #ddd;
/* 漸層圖 使用base64編碼*/
background-image: url('data:image/png;base64,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');
background-repeat: no-repeat;
}
.unchoice{
/*選項未被選擇*/
position:relative;
display: block;
width: 140px;
border: 1px solid #ddd;
background-color: #DBDBDB;
height: 32px;
cursor: pointer;
border-radius: 5px 0 0 5px;
margin-top: 5px;
margin-left: 60px;
}
.choice{
/*選項被選擇*/
position:relative;
display: block;
width: 150px;
border: 1px solid #ddd;
border-right: 0px;
background-color: #CACACA;
height: 32px;
cursor: pointer;
border-radius: 5px 0 0 5px;
margin-top: 5px;
margin-left: 50px;
}
h1{
margin-left: 30px;
}
</style>
<body>
<div>
<!--控制項-->
<div id="controller" class="controller">
<input class="choice" type="button" value="▶pageA" alt="1"/>
<input class="unchoice" type="button" value="▶pageB" alt="2"/>
<input class="unchoice" type="button" value="▶pageC" alt="3"/>
<input class="unchoice" type="button" value="▶pageD" alt="4"/>
</div>
<!--內容-->
<div class="content">
<div id="contentdata" class="showData">
<h1>page1</h1>
</div>
</div>
</div>
<script src="js/jquery/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input[type=button]').on("click", function(e) {
//移除其他選項中有被選擇的樣式
$(this).parent('div').find("input").each(function() {
$(this).removeClass('choice');
$(this).addClass('unchoice');
});
//設定當前按鈕為選擇時的樣式
$(this).removeClass('unchoice');
$(this).addClass('choice');
//內容 可自行改成ajax 或其他任何你想呈現的部分
var html = "";
switch ($(this).prop('alt')) {
case "1":
html = "<h1>page1</h1>";
break;
case "2":
html = "<h1>page2</h1>";
break;
case "3":
html = "<h1>page3</h1>";
break;
case "4":
html = "<h1>page4</h1><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>123<br/>";
break;
default :
html = "<h1>page1</h1>";
break;
}
$('#contentdata').html(html);
});
});
</script>
</body>
</html>
