線上書籍

Home

[982]PHP網站開發 進階應用技巧

一、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">&nbsp;</div>
<img src="圖檔" title="這裡就是放說明的地方">