標籤

4GL (1) 人才發展 (10) 人物 (3) 太陽能 (4) 心理 (3) 心靈 (10) 文學 (31) 生活常識 (14) 光學 (1) 名句 (10) 即時通訊軟體 (2) 奇狐 (2) 爬蟲 (1) 音樂 (2) 產業 (5) 郭語錄 (3) 無聊 (3) 統計 (4) 新聞 (1) 經濟學 (1) 經營管理 (42) 解析度 (1) 遊戲 (5) 電學 (1) 網管 (10) 廣告 (1) 數學 (1) 機率 (1) 雜趣 (1) 證券 (4) 證券期貨 (1) ABAP (15) AD (1) agentflow (4) AJAX (1) Android (1) AnyChart (1) Apache (14) BASIS (4) BDL (1) C# (1) Church (1) CIE (1) CO (38) Converter (1) cron (1) CSS (23) DMS (1) DVD (1) Eclipse (1) English (1) excel (5) Exchange (4) Failover (1) Fedora (1) FI (57) File Transfer (1) Firefox (3) FM (2) fourjs (1) Genero (1) gladiatus (1) google (1) Google Maps API (2) grep (1) Grub (1) HR (2) html (23) HTS (8) IE (1) IE 8 (1) IIS (1) IMAP (3) Internet Explorer (1) java (4) JavaScript (22) jQuery (6) JSON (1) K3b (1) ldd (1) LED (3) Linux (120) Linux Mint (4) Load Balance (1) Microsoft (2) MIS (2) MM (51) MSSQL (1) MySQL (27) Network (1) NFS (1) Office (1) OpenSSL (1) Oracle (131) Outlook (3) PDF (6) Perl (60) PHP (33) PL/SQL (1) PL/SQL Developer (1) PM (3) Postfix (2) postfwd (1) PostgreSQL (1) PP (50) python (5) QM (1) Red Hat (4) Reporting Service (28) ruby (11) SAP (234) scp (1) SD (16) sed (1) Selenium (3) Selenium-WebDriver (5) shell (5) SQL (4) SQL server (8) sqlplus (1) SQuirreL SQL Client (1) SSH (3) SWOT (3) Symantec (2) T-SQL (7) Tera Term (2) tip (1) tiptop (24) Tomcat (6) Trouble Shooting (1) Tuning (5) Ubuntu (37) ufw (1) utf-8 (1) VIM (11) Virtual Machine (2) VirtualBox (1) vnc (3) Web Service (2) wget (1) Windows (19) Windows (1) WM (6) Xvfb (2) youtube (1) yum (2)
顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

2014年7月17日 星期四

利用jQuery and CSS 做到放大境效果 (jQZoom 插件)

1.
在 <head> </head> 之間放入

<script type="text/javascript" src="/js/jquery.jqzoom-core.js"></script>
<link rel="stylesheet" href="/css/jquery.jqzoom.css" type="text/css" media="screen" />

2.
在 <head> </head> 之間放入
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function(){
    var options = {
        zoomType: 'standard',
        lens:true,
        preloadImages: true,
        alwaysOn:false,
        zoomWidth: 350,
        zoomHeight: 290,
        //xOffset:90,
        //yOffset:30,
        position:'right'
        //...MORE OPTIONS
    };
    $('.product_zoom').jqzoom(options);
    //取得css物件
    });
-->
</script>

3.
選定圖案做放大效果,class是放在外層的<a></a>
<a class='product_zoom' id='product_zoom_id' href='onpylu.jpg' title='75 %藥用酒精( 安皮露75%酒精液)' rel='gal1'><img src='onpylu.jpg' width='360' border='0' name='box_img_name' title='75 %藥用酒精( 安皮露75%酒精液)'></a>

2014年6月5日 星期四

跑馬燈 + hover 暫停

<?php
if ( !isset($_SESSION) ) { session_start(); }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="化學,酒精,化工,chemical,alcohol,echo,化學原料,化工原料,乙醇,食用酒精,ACROS,Aldrich,ALFA,ChemService,Duchefa,FISHER,FLUKA,frinton,MATRIX,MATRIX,MP,Polyscience,SIGMA,STREM,SynChem,TCI,TRC,Alfa Aesar,ThermoFisher,Lancaster,fluka,Showa,乾洗手,DIY,MSDS" />
<meta name="description" content="景明化工 以專業團隊提供快速、優質的服務,滿足您的需求,是景明永續追求的目標" />
<meta name="verify-v1" content="KxNAS5zcatSQci46PlwIcjiegi79TPLIEV4kMJaJpa4=" >
<META name="y_key" content="84ac5ce93437152b">
<title>景明化工</title>

<script type="text/javascript" src="js/jquery-1.8.0.min.js?v=1"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js?v=1"></script>
<script type="text/javascript" src="js/mouseImage-min.js?v=1"></script>
<script type="text/javascript" src="js/menu-min.js?v=1"></script>
<script type="text/javascript" src="js/window-main-min.js?v=1"></script>
<script type="text/javascript" src="js/index-back-min.js?v=1"></script>
<script type="text/javascript" src="js/custom-min.js?v=1"></script>

<link href="css/style_new.css?v=1" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function(){
  $(function(){
   // 先取得 .abgne-news-scroll ul, 並設定淡入及輪播時間
   var $news = $('#scroll ul'),
   fadeInSpeed = 1000,
   timer, speed = 3000;
   _stop = false;
 
   // 若按鈕使用中,計數器暫停並歸零
   $('#scroll img').hover(
        function(){
          _stop = true;
          clearTimeout(timer);
        },
        function(){
          _stop = false;
          timer = setTimeout(newsScroll, 3000);
        }
    );
  
    $('.brand_form_logo').hover(
        function(){
          _stop = true;
          clearTimeout(timer);
        },
        function(){
          _stop = false;
          timer = setTimeout(newsScroll, 3000);
        }
    );
 
   // 用來控制輪播用
   function newsScroll(){
    // 先找出最後一個 li
    var $last = $news.find('li:last');
    // 複製一份並先隱藏起來
    // 接著把它加到 .abgne-news-scroll ul 中的第一個項目
    // 最後用淡入的方式顯示, 當顯示完後繼續輪播
    $aaa = $last.clone();
    $aaa.hover(
        function(){
          _stop = true;
          clearTimeout(timer);
        },
        function(){
          _stop = false;
          timer = setTimeout(newsScroll, 3000);
        }

     );
    
    $aaa.hide().prependTo($news).fadeIn(fadeInSpeed, function(){
      if (!_stop) {
        timer = setTimeout(newsScroll, speed);
      }
    }).css("class","brand_form_logo");
    // 把 $last 移除掉
    $last.remove();
   }
 
   // 啟動輪播計時器
   if (!_stop) timer = setTimeout(newsScroll, speed);
   //newsScroll();
 
   $('a').focus(function(){
            this.blur();
    });

  });    
});
</script>

<style>
.nodisplay { display:none;}
</style>

</head>

<body>
<div id="coverwrap"></div>
<div id="body">
 
  <!--header_start-->
  <div id="header">
  <?php require_once('header.php'); ?>
  </div>
  <!--header_end-->

  <!--menu_start-->
  <?php require_once('side.php'); ?>
  <!--menu_end-->

  <!--footer_start-->
  <div id="footer">
  <?php require_once('footer.php'); ?>
  </div>
  <!--footer_end-->

  <!--main_start-->
  <div id="main">
    <div id="index">
      <!--下排資料_start-->
      <div id="index_bottom">
        <!--MV_start-->
        <div class="index_inner" style="width:25%">
          <img src="images/index_mv_title_min.png?v=1" border="0" /><br />
          <iframe width="230" height="135" src="https://www.youtube.com/embed/lnzlA8AS4H4" frameborder="0" allowfullscreen></iframe>
        </div>
        <!--MV_end-->

<?php
#get news
require_once('controller/conn_news.php');

$news_db = new echo_news;
$news_db->connect();

$news_objs = $news_db->get_latest_news(4);
while( ($news_list[] = $news_objs->fetch_assoc()) || array_pop($news_list) );
?>
        <!--news_start--><!--僅show最新4則,限字數不換行-->
        <div class="index_inner" style="width:25%">
          <img src="images/index_news_title_min.png?v=1" border="0" />&emsp;
          <?php foreach($news_list as $news):?>
          <div class="index_news">
            <div class="index_day"><?=date("Y-m-d", strtotime($news["created_on"]))?></div>
            <div class="index_word"><a href="news/detail.php?id=<?php echo $news['auto_sn']; ?>">.<?=$news["news_title"]?></a></div>
          </div>
          <?php endforeach;?>
        </div>
        <!--news_end-->
      </div>
      <!--下排資料_end-->
      <div id="index_unit01">
        <div id="banner_change">
          <ul>
            <li><div class="nodisplay">景明 酒精事業部</div></li>
            <li><div class="nodisplay">景明 化學事業部</div></li>
            <li><div class="nodisplay">景明 食用酒精</div></li>
            <li><div class="nodisplay">景明 酒精 包裝</div></li>
            <li><div class="nodisplay">景明 AENCORE 代理</div></li>
          </ul>
        </div>
      </div>
       <div class="abgne-news-scroll" id="scroll">
         <a href="/brand"><img src="../images/indexbrandtitle.jpg" id="indexbrandtitle" alt="景明 代理品牌" title="暫停跑馬燈"></a>
         <ul>
           <li id="brand01" class="brand_form_logo"><a target="_blank" href="http://abcr.lookchem.com/"><img alt="景明 代理 ABCR" src="../images/brand_01.jpg" width="159" height="60" border="0" /></a>
           <br>ABCR GmbH & Co. KG:來自於德國。<br>提供各式含氟化合物。</li>
           <li id="brand02" class="brand_form_logo"><a target="_blank" href="http://www.acros.com/"><img alt="景明 代理 ACROS" src="../images/brand_02.jpg" width="160" height="60" border="0" /></a>
           <br>ACROS:產地比利時<br />各式的有機合成中間體起始物,另有生化合成專用藥品。另外也提供高純度的無機金屬。</li>
           <li id="brand25" class="brand_form_logo"><a target="_blank" href="http://aencore.com/"><img alt="景明 代理 AENCORE" src="../images/brand_25.jpg" width="140" height="104" border="0" /></a>
           <br>AENCORE:來自澳洲。<br>酸液製造商,長期提供澳洲檢驗單位使用。主要提供 無機鹽、材料/金屬鹽和高分子化合物</li>
           <li id="brand03" class="brand_form_logo"><a target="_blank" href="http://www.alfa.com/"><img alt="景明 代理 ALFA AESAR" src="../images/brand_03.jpg" width="160" height="60" border="0" /></a>
           <br>ALFA AESAR:產地美國。<br />與英國LANCASTER合併,主要提供金屬和氟化物;金屬產品主要延續Johnson Matthey 符合最高純度及最高品質特點,除此之外也提供奈米等級、 太陽能、燃料電池相關產品。</li>
           <li id="brand04" class="brand_form_logo"><a target="_blank" href="http://www.dowelectronicmaterials.com/"><img alt="景明 代理 AZ electronic materials" src="../images/brand_04.png" width="140" height="50" border="0" /></a>
           <br>簡稱 AZ。景明主要代理銷售全省學校實驗室及國家各類研究機構。為專業光阻劑供應商。</li>
           <li id="brand05" class="brand_form_logo"><a target="_blank" href="http://www.chriskev.com/"><img alt="景明 代理 CHRISKEV" src="../images/brand_05.gif" width="160" height="45" border="0" /></a>
           <br>CHRISKEV:產地美國。<br />提供各式Polyimide (PI)單體、diamine及dianhydride。光電特用化學品主要供應來源。</li>
           <li id="brand06" class="brand_form_logo"><a target="_blank" href="http://www.isotope.com/"><img alt="景明 代理 CIL Cambridge Isotope Laboratories" src="../images/brand_06.jpg" width="50" height="100" border="0" /></a>
           <br>CIL:產地美國。<br />主要供應NMR使用的氘化溶劑 ( D-SOLVENT )。</li>
           <li id="brand07" class="brand_form_logo"><a target="_blank" href="http://www.duchefa-biochemie.com/"><img alt="景明 代理 DUCHEFA" src="../images/brand_07.jpg" width="160" height="60" border="0" /></a>
           <br>DUCHEFA:來自荷蘭。<br />植物細胞及組織培養生化用的培養基及相關試藥。</li>
           <li id="brand08" class="brand_form_logo"><img src="../images/brand_08.png" width="160" height="40" border="0" />
           <br>ECHO CHEMICAL:公司自有品牌<br />與世界大廠合作穩定供應各種等級的溶劑,如HPLC /ACS/工業級。</li>
           <li id="brand09" class="brand_form_logo"><a target="_blank" href="http://www.fishersci.com/ecomm/servlet/cmstatic?storeId=10652&ddkey=http:cmstatic"><img alt="景明 代理 FISHER CHEMICAL" src="../images/brand_09.png" width="160" height="60" border="0" /></a>
           <br>FISHER CHEMICAL:來自美國。<br />全球首屈一指的分析實驗室溶劑(試劑)製造商。主要提供最高純度最高品質的產品給全球最頂尖的學府、藥廠、政府檢驗單位、研究單位以及生技公司。</li>
           <li id="brand10" class="brand_form_logo"><a target="_blank" href="http://www.generalchemical.com/"><img alt="景明 代理 GENERAL CHEMICAL" src="../images/brand_10.jpg" width="160" height="60" border="0" /></a>
           <br>GENERAL CHEMICAL:來自美國。供應各種電子級溶劑。</li>
           <li id="brand11" class="brand_form_logo"><a target="_blank" href="http://www.grandkem.com/"><img alt="景明 代理 GRAND CHEMICAL" src="../images/brand_11.jpg" width="160" height="60" border="0" /></a>
           <br>GRAND CHEMICAL:供應各種特殊溶劑。</li>
          <!--<li id="brand12" class="brand_form_logo"><img src="../images/brand_12.jpg" width="159" height="70" border="0" /></li>-->
          <!--<li class="brand_form_brand">GELEST:來自於美國。提供各式含矽特化合物。</li>-->
           <li id="brand13" class="brand_form_logo"><a target="_blank" href="http://www.maybridge.com/"><img alt="景明 代理 MAYBRIDGE" src="../images/brand_13.jpg" width="93" height="100" border="0" /></a>
           <br>MAYBRIDGE:來自於英國。<br />目前ACROS、FISHER及MAYBRIDGE已經合併,其Maybridge系列提供藥廠最多元化和最高水準藥物中間體加速新藥品的開發效能。</li>
           <li id="brand14" class="brand_form_logo"><a target="_blank" href="http://www.mpbio.com/?country=206"><img alt="景明 代理 MP MPBIO" src="../images/brand_14.jpg" width="110" height="70" border="0" /></a>
           <br>MPBIO:簡稱 MP。來自美國。<br />供應各種生化試劑,特別為動物飼料並可依客戶需求而提供客製化服務。</li>
           <li id="brand15" class="brand_form_logo"><a target="_blank" href="http://www.pharmcoaaper.com/"><img alt="景明 代理 PHARMCO-AAPER" src="../images/brand_15.jpg" width="160" height="40" border="0" /></a>
           <br>PHARMCO-AAPER:來自美國。<br />生產及製造世界上最高純度製藥及分析等級品質乙醇的首選廠商。實施最嚴格的品管系統,並全面整合至專屬的製造流程,已達成一連串從原料到成品的品質監控及管制。<br />
主要提供生物業、製造業、醫療業及其他關鍵工業應用之高純度乙醇、世界級cGMP等級溶劑、無菌產品及客製化混合配方。<br />
其供應產品經過FDA、ISO及Kosher認證,符合並凌駕cGMP與HACCP規範及其他國際性的品管標準。</li>
           <li id="brand16" class="brand_form_logo"><a target="_blank" href="http://www.purac.com/"><img alt="景明 代理 PURAC" src="../images/brand_16.jpg" width="160" height="66" border="0" /></a>
           <br>PURAC:來自於荷蘭。<br />世界上最大也是最有經驗的天然乳酸、乳糖醇、聚丙酸和聚乳酸的生產菌,所有產品均有生物可分解的特性。</li>
           <li id="brand17" class="brand_form_logo"><a target="_blank" href="http://www.scharlab.com/"><img alt="景明 代理 Scharlab Scharlau" src="../images/brand_17a.jpg" width="160" height="60" border="0" />&emsp;<img src="../images/brand_17b.jpg" width="160" height="60" border="0" /></a>
           <br>Scharlab (Scharlau):來自西班牙。<br />主要供應實驗室試藥、無機物和微生物培養皿等生技產品;以最高品質和最合理的價格結合最出色的歐系高規並符合EP / USP規格品牌。</li>
           <li id="brand18" class="brand_form_logo"><a target="_blank" href="http://seed-chem.com/"><img alt="景明 代理 SEEDCHEM" src="../images/brand_18.jpg" width="80" height="80" border="0" /></a>
           <br>SEEDCHEM:來自澳洲。<br />主要依客戶需求提供特殊包裝以及客製化產品服務。</li>
           <li id="brand19" class="brand_form_logo"><a target="_blank" href="http://www.showa1.com/en/"><img alt="景明 代理 SHOWA" src="../images/brand_19.jpg" width="160" height="60" border="0" /><a>
           <br>SHOWA 昭和化學株式会社:產地日本。<br />秉持著日本人的認真態度,對產品上高度要求的執著;提供業界最高品質的無機鹽和化學試藥以供研發和實驗進步和創新。</li>
           <li id="brand20" class="brand_form_logo"><a target="_blank" href="http://scientificpolymer.com/"><img alt="景明 代理 SP2 scientific polymer" src="../images/brand_20.jpg" width="160" height="40" border="0" /></a>
           <br>Sp2:專業製造高分子,高分子單體與高分子標準品。</li>
           <li id="brand21" class="brand_form_logo"><a target="_blank" href="http://www.strem.com/"><img alt="景明 代理 STREM" src="../images/brand_21.jpg" width="160" height="60" border="0" /></a>
           <br>STREM:產地美國。<br />主要供應高純度金屬及各種有機金屬、MOCVD材料、奈米材料及觸媒。</li>
           <li id="brand22" class="brand_form_logo"><a target="_blank" href="http://www.synthon-chemicals.com/"><img alt="景明 代理 SYNTHON" src="../images/brand_22.jpg" width="164" height="80" border="0" /></a>
           <br>SYNTHON CHEMICALS:來自德國。<br />主要提供各式液晶中間體及特化合成用中間體。</li>
           <li id="brand23" class="brand_form_logo"><a target="_blank" href="http://www.tcichemicals.com/zf/tw/index.html"><img alt="景明 代理 TCI" src="../images/brand_23.jpg" width="119" height="80" border="0" /></a>
           <br>TCI(東京化成):來自於日本。<br />主要提供有機中間體,產品種類多,其包裝最適合實驗室分析研究,也提供完美客製化服務,產品線齊全且交期快!</li>
           <li id="brand24" class="brand_form_logo"><a target="_blank" href="http://www.tedia.com/"><img alt="景明 代理 TEDIA" src="../images/brand_24.png" width="160" height="60" border="0" /></a>
           <br>TEDIA:來自於美國。<br />生產製造最多種類的高純度溶劑,提供GC、HPLC、QC及合成等所需各等級溶劑,且備有各式庫存。</li>
         </ul>
       </div>
    </div>
  </div>
  <!--main_end-->

</div>
</body>

</html>


--------------------------------------------------------------------------------------------------------------------------


/*代理品牌跑馬燈設定*/
.abgne-news-scroll ul {
 margin: 0;
 padding-top: 40px;
 list-style: none;
}
.abgne-news-scroll {
 width: 190px;
 height: 590px;
 overflow: hidden;
 float: left;

 border:10px solid #eeeeee;
 background:#fefae4;
 box-shadow:0 3px 5px rgba(0%,0%,0%,0.3);
}
.abgne-news-scroll li {
 /*background: url(arr.jpg) no-repeat 5px 10px;*/
 padding: 40px 0px 0px 0px;
 margin-left: -20px
}
#indexbrandtitle {
    position: relative;
    float: left;
    top:  8px;
    left: 0px;
    padding-right: 11px;
}

利用 jQuery 來製作網頁頁籤(Tab)

http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html

在網路知識爆炸的 Web 2.0 時代,一個頁面上要顯示的資訊越來越多,但總不可能把全部的內容都一次顯示出來塞滿整頁吧!所以就出現了頁籤(Tab)這樣的展示方式。



每個標籤都有相對應的內容區塊,這樣只要一個小小的位置能放置的資訊就會比原先的更多,就像是原本只是一層矮平房,現在把它蓋成 101 大樓一樣!

廢話不多說,讓我們先來看看 HTML 的部份吧:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
 <div class="abgne_tab">
  <ul class="tabs">
   <li><a href="#tab1">男丁格爾</a></li>
   <li><a href="#tab2">jQuery</a></li>
  </ul>
 
  <div class="tab_container">
   <div id="tab1" class="tab_content">
    <h2>關於作者</h2>
    <p>目前工作是網頁開發為主,因此針對了 HTML, JavaScript, CSS 等知識特別深入研究。若有任何問題,歡迎直接留言或是透過 Mail 討論。</p>
   </div>
   <div id="tab2" class="tab_content">
    <h2>jQuery is a new kind of JavaScript Library.</h2>
    <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript</p>
   </div>
  </div>
 </div>
</body>
.abgne_tab 區塊是用來包覆我們的頁籤區塊,而 ul 及 li 是用來當標籤,其中的超連結是利用錨點(Anchor)的方式來設定,對應到指定的 id 元素。除了可以讓 jQuery 來直接取到元素之外,當 JavaScript 被停用時,至少還能用原本錨點(Anchor)的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
ul, li {
 margin: 0;
 padding: 0;
 list-style: none;
}
.abgne_tab {
 clear: left;
 width: 400px;
 margin: 10px 0;
}
ul.tabs {
 width: 100%;
 height: 32px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
}
ul.tabs li {
 float: left;
 height: 31px;
 line-height: 31px;
 overflow: hidden;
 position: relative;
 margin-bottom: -1px; /* 讓 li 往下移來遮住 ul 的部份 border-bottom */
 border: 1px solid #999;
 border-left: none;
 background: #e1e1e1;
}
ul.tabs li a {
 display: block;
 padding: 0 20px;
 color: #000;
 border: 1px solid #fff;
 text-decoration: none;
}
ul.tabs li a:hover {
 background: #ccc;
}
ul.tabs li.active  {
 background: #fff;
 border-bottom: 1px solid#fff;
}
ul.tabs li.active a:hover {
 background: #fff;
}
div.tab_container {
 clear: left;
 width: 100%;
 border: 1px solid #999;
 border-top: none;
 background: #fff;
}
div.tab_container .tab_content {
 padding: 20px;
}
div.tab_container .tab_content h2 {
 margin: 0 0 20px;
}
當設定好 CSS 排版之後,大概就能看到基本的畫面了:



筆者的想法是,在未加上程式之前把內容都先顯示出來,預設讓 JavaScript 被停用或是載入失敗時還能看到內容。接著沒問題之後,就是加上 jQuery 來實做出完整的頁籤效果囉:
檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
 // 預設顯示第一個 Tab
 var _showTab = 0;
 var $defaultLi = $('ul.tabs li').eq(_showTab).addClass('active');
 $($defaultLi.find('a').attr('href')).siblings().hide();
 
 // 當 li 頁籤被點擊時...
 // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
 $('ul.tabs li').click(function() {
  // 找出 li 中的超連結 href(#id)
  var $this = $(this),
   _clickTab = $this.find('a').attr('href');
  // 把目前點擊到的 li 頁籤加上 .active
  // 並把兄弟元素中有 .active 的都移除 class
  $this.addClass('active').siblings('.active').removeClass('active');
  // 淡入相對應的內容並隱藏兄弟元素
  $(_clickTab).stop(false, true).fadeIn().siblings().hide();
 
  return false;
 }).find('a').focus(function(){
  this.blur();
 });
});
一開始可以設定是要先顯示第幾個標籤的內容,接著就是把不顯示的部份給隱藏起來。當完成顯然及隱藏的步驟之後,就能看到完整的效果畫面了:



當點擊其它的頁籤時會立即的切換顯示相對應的內容。若想用滑鼠的滑入來觸發頁籤切換的話,只要把 click 事件改成 mouseover 事件就可以囉。

雖然完成了一個頁籤區塊,但有時可能一個頁面上就會放了2-3個頁籤區塊。若每個頁籤區塊的結構都差不多的話,我們就不用一一的為每個區塊來寫程式,只要善用 jQuery 的 each() 就能快速的完成 N 個頁籤區塊的設定:
檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){
 // 預設顯示第一個 Tab
 var _showTab = 0;
 $('.abgne_tab').each(function(){
  // 目前的頁籤區塊
  var $tab = $(this);
 
  var $defaultLi = $('ul.tabs li', $tab).eq(_showTab).addClass('active');
  $($defaultLi.find('a').attr('href')).siblings().hide();
 
  // 當 li 頁籤被點擊時...
  // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
  $('ul.tabs li', $tab).click(function() {
   // 找出 li 中的超連結 href(#id)
   var $this = $(this),
    _clickTab = $this.find('a').attr('href');
   // 把目前點擊到的 li 頁籤加上 .active
   // 並把兄弟元素中有 .active 的都移除 class
   $this.addClass('active').siblings('.active').removeClass('active');
   // 淡入相對應的內容並隱藏兄弟元素
   $(_clickTab).stop(false, true).fadeIn().siblings().hide();
 
   return false;
  }).find('a').focus(function(){
   this.blur();
  });
 });
});
這樣出來的頁籤(Tab)效果就已經蠻實用的,若美術設計能力夠的話,還能改用圖片的標籤來美化呢!

2014年5月15日 星期四

jQuery.dataTables 自定义排序

http://wuchong.me/blog/2014/02/25/jquery-datatable-sort-plugin/

最近在项目中用到了 jQuery.dataTables, 这是一个很强大的 jQuery 插件,调用方便,支持回调对数据进行排序、查询、分页等操作,并且 bootstrap 框架也有对其封装,省了我们界面设计的活。dataTables 自带了string,date,numeric 的排序,但当遇到比较特殊的排序需求时,就得另寻出路了。
这几天正好碰到了这么个需求,一个统计表格中的有几列的单元格是百分数,而且还带有 html 的标签。需要针对这几列的百分数排序。
单元格中的 html 代码是这样的。
1
2
<span class="label label-important">
<i class="icon-caret-up"></i>&nbsp;&nbsp;100.0%</span>
表格大概是长这样的。

而 dataTables 的自带排序会将这一列视为 string 排序。 显然是不满足我们需求的。一开始以为要大动干戈,后来看了API文档后发现,dataTables 的第三方扩展支持还是很灵活的。官方文档中提供了两种方法: (1) Type based column sorting ; (2) Custom data source sorting
。我使用的是第一种方法。主要思路就是将单元格内容转成可排序的 float 类型。
  1. 首先创建一个文件叫dataTables.sort.plungin.js,加入以下代码。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    jQuery.extend(jQuery.fn.dataTableExt.oSort, {
        "html-percent-pre": function (a) {
            var x = String(a).replace(/<[\s\S]*?>/g, "");    //去除html标记
            x = x.replace(/&nbsp;/ig, "");                   //去除空格
            x = x.replace(/%/, "");                          //去除百分号
            return parseFloat(x);
        },
    
        "html-percent-asc": function (a, b) {                //正序排序引用方法
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
    
        "html-percent-desc": function (a, b) {                //倒序排序引用方法
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });
    
  2. 在前台页面中加入以下的 js 引用。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    <script type="text/javascript" src="jquery.dataTables.js"></script>
    <script type="text/javascript" src="dataTables.numericComma.js"></script> 
    <script type="text/javascript">
                var oTable1 = $('#table_report').dataTable({
                    "aoColumnDefs": [
                        { "sType": "html-percent", "aTargets": [8] },    //指定列号使用自定义排序
                    ],
                    "bLengthChange": true, //开关,是否显示每页大小的下拉框
                    "aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "所有"]],
                    'iDisplayLength': 25, //每页显示10条记录
                    'bFilter': true,  //是否使用内置的过滤功能
                    "bInfo": true, //开关,是否显示表格的一些信息
                    "bPaginate": true //开关,是否显示分页器
                });
            });
    </script>
    
  3. 完成。

2014年4月27日 星期日

DataTable number-comma sorting

<script type="text/javascript" charset="utf-8" src="js/jquery-min.js?version=1"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.dataTables-min.js?version=1"></script>
  <script type="text/javascript" charset="utf-8" src="js/dataTables.numericComma-min.js?version=1"></script>
  <script type="text/javascript" charset="utf-8" src="js/FixedColumns-min.js?version=1"></script>
 
  <script type="text/javascript" charset="utf-8">
            $(document).ready( function () {
                var oTable = $('#example').dataTable( {
                    "sScrollX": "100%",
                    //"sScrollXInner": "110%",
                    //"sScrollXInner": "400px",
                    //"bScrollCollapse": true,
               "sPaginationType": "full_numbers",
               "aoColumns": [
                             null,null,null,null,null,
                             { "sType": "numeric-comma" },
                             { "sType": "numeric-comma" },
                             { "sType": "numeric-comma" },
                             { "sType": "numeric-comma" },
                             { "sType": "numeric-comma" },
                             { "sType": "numeric-comma" },
                             { "sType": "numeric-comma" },
                             null
                            ]
                } );
                new FixedColumns( oTable, {
                    "iLeftColumns": 1,
                    "iLeftWidth": 160
                } );
            } );
  </script>


dataTables.numericComma.js
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "numeric-comma-pre": function ( a ) {
        a = (a==="&nbsp;") ? 0 : a.replace( /[^\d\-\.]/g, "" );
        //a = a.replace( /[^\d\-\.]/g, "" );
        return parseFloat( a );
    },
    
    "numeric-comma-asc": function(a,b) {
        return a - b;
    },

    "numeric-comma-desc": function(a,b) {
        return b - a;
    }
} );

2014年4月24日 星期四

datepicker設定日期


  <script type="text/javascript">
    $(function() {
        $('#sdate').datepicker('option', {dateFormat: 'yy-mm-dd'});
        $('#edate').datepicker('option', {dateFormat: 'yy-mm-dd'});
        <?php
          if (isset($sdate)) {
            echo "$('#sdate').datepicker().datepicker('setDate',new Date(\"".$sdate."\"));";
          }
          if (isset($edate)) {
            echo "$('#edate').datepicker().datepicker('setDate',new Date(\"".$edate."\"));";
          }
        ?>
    });

  </script>