1-1 index.html
2. jquery六大工具(上)
一、jquery六大工具包
1.官方網站：http://flowplayer.org/tools/
2.底下所有程式都需要加入這幾行：
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
二、Tabs標籤包
1.基本架構：
放在<head>中
<script type="text/javascript">
$(function() {
$("ul.tabs").tabs("div.tabs_content > div");
});
</script>
<link rel='stylesheet' type='text/css' href='tabs/tabs.css' />
放在<body>中
<!-- 頁籤 -->
<ul class="tabs">
<li><a href="#">Tabs 標籤包</a></li>
<li><a href="#">ToolTip 提示包</a></li>
</ul>
<!-- 頁籤對應的內容 -->
<div class="tabs_content">
<div>這是「Tabs 標籤包」要呈現的內容</div>
<div>這是「ToolTip 提示包」要呈現的內容</div>
</div>
2.用 .history() 可以紀錄點選標籤的順序。
3.加入 {event: 'click'} 可指定頁籤牽換方式，如：dblclick、mouseover
4.內建特效包括：default、fade、slide、ajax 及 horizontal
$("ul.tabs").tabs("div.tabs_content > div", {effect: 'slide'});
$("ul.tabs").tabs("div.tabs_content > div", {effect: 'fade',fadeInSpeed: '100'});
三、ToolTip提示包
放在<head>中
<script type="text/javascript">
<script type="text/javascript">
$(function() {
$("img[title]").tooltip('#demotip');
});
</script>
<style>
#demotip {
display:none;
border:1px solid black;
font-size:12px;
padding:10px;
color:#FFFFFF;
rgb(102,204,204);
}
</style>
放在<body>中
<div id="demotip"> </div>
<img src="圖檔" title="這裡就是放說明的地方">
