Inside My Mind: jQuery

顯示具有 jQuery 標籤的文章。顯示所有文章

2022/07/12

multiple checkbox filter for datatables

最近在練習 datatables 這個好用的工具，他可以搭配 jQuery 跟 Bootstrap 讓你可以很快的建立有 RWD 的表格，他有非常豐富的 API 可以客製內容，今天示範一下怎麼使用 checkbox 去 filter 出符合的內容。

使用正規式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            let data = [
                [
                    "Chan",
                    "basketball"
                ],
                [
                    "Phoebe",
                    "volleyball"
                ],
                [
                    "Lucas",
                    "tennis"
                ],
                [
                    "LBJ",
                    "basketball"
                ],
            ];
            let table = $('#data_table').DataTable({
                data: data
            });

            $(':checkbox').on('click', function() {
                let options = $(':checkbox:checked').map(function() {
                    return $(this).val()
                }).get();

                if (options.length === 0) {
                    table.columns(1).search('').draw();
                } else {
                    let regex = options.join('|');

                    table.columns(1).search(regex, true, false).draw();
                }
            });
        });
    </script>
</head>
<body>
<div>
    <label> basketball
        <input type="checkbox" value="basketball">
    </label>
    <label> volleyball
        <input type="checkbox" value="volleyball">
    </label>
    <label> tennis
        <input type="checkbox" value="tennis">
    </label>
</div>
<table id="data_table">
    <thead>
    <tr>
        <th>name</th>
        <th>hobby</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

使用 extension

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            let data = [
                [
                    "Chan",
                    "basketball"
                ],
                [
                    "Phoebe",
                    "volleyball"
                ],
                [
                    "Lucas",
                    "tennis"
                ],
                [
                    "LBJ",
                    "basketball"
                ],
            ];
            let table = $('#data_table').DataTable({
                data: data
            });

            $.fn.dataTable.ext.search.push(function(settings, data) {
                let options = $(':checkbox:checked').map(function() {
                    return $(this).val()
                }).get();

                if (options.length === 0) {
                    return true;
                }

                return options.indexOf(data[1]) !== -1;
            });

            $(':checkbox').on('click', function() {
                table.draw();
            });
        });
    </script>
</head>
<body>
<div>
    <label> basketball
        <input type="checkbox" value="basketball">
    </label>
    <label> volleyball
        <input type="checkbox" value="volleyball">
    </label>
    <label> tennis
        <input type="checkbox" value="tennis">
    </label>
</div>
<table id="data_table">
    <thead>
    <tr>
        <th>name</th>
        <th>hobby</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

上面使用交集的方法篩選，稍微改寫一下就可以變聯集了。

2015/09/16

jQuery Map And Get

我們常常會用到 jQuery 去 fetch 一段 DOM 以後拿到值來做事情，舉例來說今天有三個 input。

HTML

<input type="text" value="a">
<input type="text" value="b">
<input type="text" value="c">

我們想要 fetch DOM 把所有的 value 拿出來並且組成 a, b, c 這樣的字串該怎麼做，方法當然很多，一般來說會利用 $.each 來組。

$.each

var result = [];

$(':input').each(function() {
    result.push(this.value);   
});

result = result.join(',');

console.log(result); // a,b,c

如果理解更多的 jQuery API 的話，可以用一些特殊技巧用更少的行數達成某些結果。

$.map

var result = $(':input').map(function() {
    return this.value;   
}).get().join(',');

console.log(result); // a,b,c

map 加 get 是 jQuery 常拿來處理陣列的技巧，如果善加利用可以省去很多迴圈或是宣告的事情。

2015/06/09

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game</title>
    <link rel="stylesheet" href="game.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="game.js"></script>
</head>
<body>
<button type="button" id="start">start</button>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    float: left;
    margin: 2px;
}
.on {
    border: 2px solid pink;
}

JS

$(function() {
    var start = $('#start');
    var lis = $('li');

    start.on('click', function() {
        var rounds = 40 + Math.floor((Math.random() * lis.size()));

        $(this).prop('disabled', true);
        spin(lis.filter(':first'), rounds);
    });

    function spin(li, rounds) {
        var duration = rounds < 5 ? 1000 : 70;

        lis.clearQueue();
        li.delay(duration).queue(function() {
            var next = $(this).next('li');

            lis.removeClass('on');

            if (next.size() === 0) {
                next = lis.filter(':first');
            }

            li.addClass('on');

            if (rounds - 1 >= 0) {
                spin(next, rounds -1);
            } else {
                start.prop('disabled', false);
            }
        });
    }
});

Sample Code

2015/03/02

之前的案子若想要達成 ajax 撈取 content，並且擁有自己的網址以便使用者可以直接進入該連結的話，我們會使用 hashbang 的作法，也就是帶入 #!，在由 javascript 端解析 url 的部分並撈取實際的 content，這樣的缺點很多，除了網址相當醜以外，也會多送一些 request，也不支援上下頁，後來 HTML5 盛行後，由 Google 提出了 pushState 解決方案，可以保留原本的網址，又簡單克服上述的問題，今天使用 browserstate/history.js 來做一個示範。

history.php

<?php

$name = 'a';

if (isset($_GET['name'])) {
    $rand = rand(1, 3);
    sleep($rand);
    $name = $_GET['name'];
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="assets/jquery/jquery.history.js"></script>
    <script src="assets/js/history.js"></script>
</head>
<body>
<a href="history.php?name=a">a</a>
<a href="history.php?name=b">b</a>
<div id="content">I am <?php echo $name; ?></div>
</body>
</html>

history.js

$(function() {
    var content = $('#content');

    $('a').on('click', function(e) {
        History.pushState(null, $(this).text(), $(this).attr('href'));

        return false;
    });

    History.Adapter.bind(window, 'statechange', function() {
        var state = History.getState();

        content.html('loading...');

        $.get(state.url, function(response) {
            content.html($(response).filter('#content').html());
        });
    });
});

當我們第一次執行任何一個 PHP 頁面時，可以直接獲得該頁的正確資料，如果是透過超連結點選的話，我們透過 ajax 抓取該頁面，並且 filter 出我們要置換的內容，對瀏覽器來說 HTML 只是文字而已，所以沒有 render 的圖片部分便不會吃到頻寬，一舉數得，相容性的問題就交給套件解決吧。

2014/10/20

Request Many Ajax By Deferred Tip

jQuery Deferred 可以讓 user 達到同時使用許多 Ajax request 時，等待所有 request 完成後再執行功能的目的，大部分的範例都是這樣：

$.when($.ajax('xxx.php'), $.ajax('xxx.php'))
 .done(function() {
  cosnole.log('all done');
 });

程式會等到兩個 Ajax 都執行完畢後才觸發 console log，假設今天我們遇到的情況符合以下條件：

超過兩個以上的 ajax request
有一定的邏輯

我們不會希望有十個 request 就在裡面塞十次 code，可以利用一種寫法來達到這個目的

deferred.js

$(function() {
    load()
        .done(function() {
            console.log('all done');
        })

    function load() {
        var results = [];

        for (i = 1; i <= 3; i++) {
            result = $.get('ajax.php').done(function(i) {
                console.log(i + ' is done');
            });

            results.push(result);
        }

        return $.when.apply($, results);
    }
})

ajax.php

<?

sleep(2);
echo rand(1, 999);

js 的範例是指呼叫了 ajax.php 三次，當 array 完成時，回傳 $.when.apply 的結果，使用這個 function 會將所有完成的行為視為 deferred 物件傳回，所以 done 就會有所反應，當然也可以寫成這樣：

$(function() {
    var results = [];

    for (i = 1; i < 3; i++) {
        result = $.get('ajax.php').done(function(i) {
            console.log(i + ' is done');
        });

        results.push(result);
    }

    $.when.apply($, results).done(function() {
        console.log('all done');
    });
})

寫成 function 彈性比較大一點，得到的結果如下

923 is done
144 is done
all done

2014/03/21

jQuery Video Creator Plugin

這個 plugin 可以初始擁有 YouTube 或 Vimeo 的超連結點選之後將自己或指定的目標轉換成影片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.video_creator.js"></script>
    <script>
    $(function() {
        $('a').video_creator({
            width: 200,
            height: 100,
            target: '#video'
        });
    });
    </script>
</head>
<body>
<a href="https://www.youtube.com/watch?v=p6oaqY6flJg">Youtube</a>
<a href="http://vimeo.com/89495751">Vimeo</a>
<div id="video"></div>
</body>
</html>

(function() {
    $.fn.video_creator = function(options) {
        var params = {
            width: 640,
            height: 360,
            target: ''
        }

        var set = $.fn.extend(params, options);

        return this.each(function() {
            var url = $(this).prop('href'),
                id = '',
                matches = '',
                result = '';

            // Youtube
            if (-1 !== url.toLowerCase().indexOf('youtube')) {
                matches = url.match(/[\\?\\&]v=([^\\?\\&]+)/);
                id = matches[1];
                result = '<iframe width="' + set.width + '" height="' + set.height + '" src="//www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
            }

            // Vimeo
            if (-1 !== url.toLowerCase().indexOf('vimeo')) {
                matches = url.match(/\/\/(www\.)?vimeo.com\/(\d+)($|\/)/);
                id = matches[2];
                result = '<iframe src="http://player.vimeo.com/video/' + id + '?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=ffffff" width="' + set.width + '" height="' + set.height + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
            }

            $(this).on('click', function() {
                if ('' === set.target) {
                    $(this).replaceWith(result);
                } else {
                    $(set.target).html(result);
                }

                return false;
            });
        });
    }
}(jQuery));

2014/01/21

偵測內容改變警告

Facebook 有一個貼心的小功能，如果你有留下訊息，但在還沒有儲存的情況下意外的離開頁面時，Facebook 會給予警告，在討論區如果打了一堆字卻不小心按到回上頁，或者是不小心按到某個連結整頁直接跳走，而瀏覽器又沒有 cache 住你剛輸入的內容，只能用欲哭無淚來形容，怎麼實作這個功能呢。

HTML

Javascript

var isChanged = false;

$('select, input, textarea').on('change', function() {
        isChanged = true;
});

$(window).on('beforeunload', function() {
    if (true === isChanged) {
        return '您已經修改過內容，確定要離開嗎？';
    }
});

簡單來說，預設一個變數是叫 isChange 為 false，偵測該標單的 input、select、textarea 等物件內容改變時將 isChage 更改為 true，然後在 window 的 beforeunload 事件上判斷如果 isChange 為 true 時予以警告。

demo page

2013/10/31

Get For Loop Variable When Use Ajax Function

在案例中常常使用 jQuery 的 $.get 或 $.post 來取 ajax 的內容，例如說：

 $.post("ajax.php", function(response) {
  console.log(response);
 });

假設今天使用迴圈來跑此功能，常常要配合將相對應的內容作變動，假設今天有 10 個 div 要取值，要找到對應的 div 回傳的話，除了將順位由 server 端帶回來以外，有一種寫法可以使 ajax 抓到迴圈的變數。

 for (i = 0; i < 6; i++) {
  !function(i) {
   $.post("ajax.php", {param: i}, function (response) {
    $("div").eq(i).html(response);
   });
  }(i)
 }

2012/09/06

infinite scroll 實作

現在很多網站流行下拉卷軸後動態載入資料，用來取代分頁選單，其實除非是討論區型的網站，像是新聞之類的資料很少有人會去點選分頁到後面的內容，今天自己實作一下這樣的方式。

其實原理很簡單，偵測一下卷軸是否到底，到底的話偵測最後一筆資料的 id，ajax 去撈取大於此 id 的資料回傳 DOM 後塞入內容，若想要有緩衝不想到底的話，可以於判斷高度的公式扣除所需要的像素範圍即可。

scroll.html




    
    infinite scroll
    
    
    


    
        1
        2

scroll.js

$(function() {
    var $c = $('#container'),
        $id = null;

    // if the content is smaller than window's height
    //  run infinite function at beginning
    if ($c.height() <= $(window).height()) {
        infiniteScroll();
    }

    // check if scroll to the bottom
    $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            infiniteScroll();
        }
    });

    // dynamic load the data
    function infiniteScroll() {
        $id = $c.find('div:last').prop('id');
        $.post('scroll.php', {id: $id}, function($res) {
            $c.append($res);
        });
    }
});

scroll.php

$num = (int)$_POST['id'];

for ($i = 0; $i < 3; $i++) {
    $num++;
    echo ''.$num.'';
}

2012/01/11

Google Analytics Ajax 變更

Google Analytics Logo

目前很多網頁技術為了節省空間以及效能上的考量，會大量使用 Ajax 方式在同一個頁面撈取資料，頁籤尤其是最常使用的例子，Google 流量分析是絕大多數網站用來統計流量的工具，如何做到 Ajax 撈取資料時也可以同時列入 Pageview 呢，方式如下。

Google 範例

我們以 jQuery 的 Tabs 為例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tabs</title>
    <link media="all" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#tabs').tabs({
                select: function(ev, ui) {
                    window.location.hash = ui.tab.hash;
                    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
                    _gaq.push(['_trackPageview', window.location.href]);
                }
            });
        });
    </script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-XXXXX-X']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#content1">content 1</a></li>
            <li><a href="content2.html" title="content2">content 2</a></li>
            <li><a href="#content3">content 3</a></li>
        </ul>
        <div id="content1">content 1</div>
        <div id="content3">content 3</div>
    </div>
</body>
</html>

原理很簡單，當選取了 tabs 之後，再次觸發 GA 的 track 功能，我先將 anchor 還原回去 url，再將 url 變數塞進 trackPageview 的變數裡面，你或許不想將 anchor 放置於超連結頁面，但這也代表你每點選一次就要自己指定網址一次，所以讓他自己去抓取是最方便的，當然，已經加上 anchor 了照理說應該也不用塞網址進變數，但我怕會有 lag 情況，這樣可以買雙保險。

2011/12/06

跟隨鼠標的浮動視窗

要做出一個浮動視窗很簡單，但要加上判斷現在邊界在哪邊來因應相對位置就要下點功夫了，除了要抓出目前點選物件跟視窗的相對位置，還要加上對卷軸距離的判斷，否則就會出現像下圖的情況。

float div with cursor

Chrome Firefox Opera Safari

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=utf-8">
    <title>Cursor</title>
    <style type="text/css" media="screen">
    #floatdiv {
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid;
        width: 200px;
        height: 50px;
        display: none;
        background: #FFFF00;
        z-index: 100;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var $div = $('#floatdiv');

            $('[name="btn"]').click(function(e) {
                var $wH = $(window).height(),
                    $sT = $(window).scrollTop(),
                    $pT = $(this).position().top,
                    $dH = $div.height(),
                    $eY = e.pageY,
                    $wW = $(window).width(),
                    $sL = $(window).scrollLeft(),
                    $pL = $(this).position().left,
                    $dW = $div.width(),
                    $eX = e.pageX;

                $top = ($wH-$pT+$sT < $dH) ? ($eY-$dH) : $eY; 
                $left = ($wW-$pL+$sL < $dW) ? ($eX-$dW) : $eX; 

                $div
                    .css({left: $left, top: $top})
                    .show();
                return false;
            });

            $div.click(function(e) {
                // 點擊 div 本身不觸動消失
                e.stopPropagation();
            });

            $(document).click(function() {
                // 點擊任一物件使 div 消失
                $div.hide();
            });
        });
    </script>
</head>
<body>
    <div id="floatdiv"></div>
    <a href="#" name="btn">click me</a>
</body>
</html>

2011/11/06

動態載入 jQuery

現在很多瀏覽器都有 console 的功能~~（連很爛的 IE 都有了）~~，所以如果懂 DOM 又是 jQuery 熟手的話，透過 console 去處理一些事情會格外方便，但如果該網站預設並不是使用 jQuery 的話，我們可以試著動態的載入 jQuery 的內容使用。

var theHead = document.getElementsByTagName("head")[0]; 
var theJs = document.createElement('script');
theJs.type = 'text/javascript';
theJs.src= "http://code.jquery.com/jquery-1.7.min.js";
theHead.appendChild(theJs);

2011/09/27

表單檢查所有欄位不重複

假設今天要送出表單時，有一項欄位是名稱，規定不可以重複，該怎麼寫
寫法很多種，今天我用了 jQuery 提供的 utility $.unique 來做搭配

script 部份

html 部份

2010/12/25

手機版透樂程式

利用jQuery Mobile Framework嚐鮮做了測試的網站 :)

HTML

<link href=" css="" jquery.mobile-1.0a2.css"="" rel="stylesheet" type="text/css">












Lottery Program






程式說明
手機版樂透運算號碼程式


大樂透說明

威力彩說明

大樂透取號

威力彩取號






made by ChaN







大樂透取號






取號
    




made by ChaN







大樂透取號




取號
    




made by ChaN







大樂透說明


您必須從01~49中任選6個號碼進行投注。開獎時，開獎單位將隨機開出六個號碼加一個特別號，這一組號碼就是該期49選6大樂透的中獎號碼，也稱為「獎號」。您的六個選號中，如果有三個以上（含三個號碼）對中當期開出之六個號碼（特別號只適用於貳獎、肆獎和陸獎），即為中獎，並可依規定兌領獎金

            

                中獎方式
                獎項
            

                與當期六個獎號完全相同者
                頭獎
            

                對中當期獎號之任五碼+特別號
                貳獎
            

                對中當期獎號之任五碼
                參獎
            

                對中當期獎號之任四碼+特別號
                肆獎
            

                對中當期獎號之任四碼
                伍獎
            

                對中當期獎號之任三碼+特別號
                陸獎 NT$1,000
            

                對中當期獎號之任三碼
                NT$400
            






made by ChaN







威力彩說明


本遊戲之選號分為兩區， 您必須從第1個選號區中的01~38 的號碼中任選6個號碼， 並從第2個選號區中的01~08的號碼中任選1個號碼進行投注，這六個+一個號碼即為您的投注號碼。開獎時，開獎單位將從第1區01~38的號碼中隨機開出六個號碼，再從第2區01~08的號碼中隨機開出一個號碼，這一組六個+一個號碼，就是該期威力彩的中獎號碼，也稱為「獎號」。您第1區的選號中，如果對中當期第1區開出之任一個獎號，而第2區亦對中當期第2區開出之獎號，即為中獎(普獎)，並可依規定兌領獎金。

            

                中獎方式
                獎項
            

                第1區六個獎號全中，且第2區亦對中獎號
                頭獎
            

                第1區六個獎號全中，但第2區未對中
                貳獎
            

                第1區對中任五個獎號，且第2區亦對中獎號
                參獎
            

                第1區對中任五個獎號，但第2區未對中
                肆獎
            

                第1區對中任四個獎號，且第2區亦對中獎號
                伍獎
            

                第1區對中任四個獎號，但第2區未對中
                陸獎
            

                第1區對中任三個獎號，

且第2區亦對中獎號 
                柒獎
            

                第1區對中任二個獎號，

且第2區亦對中獎號 
                捌獎
            

                第1區對中任三個獎號，但第2區未對中
                玖獎
            

                第1區對中任一個獎號，

且第2區亦對中獎號 
                普獎
            






made by ChaN

中獎方式	獎項
與當期六個獎號完全相同者	頭獎
對中當期獎號之任五碼+特別號	貳獎
對中當期獎號之任五碼	參獎
對中當期獎號之任四碼+特別號	肆獎
對中當期獎號之任四碼	伍獎
對中當期獎號之任三碼+特別號	陸獎 NT$1,000
對中當期獎號之任三碼	NT$400

中獎方式	獎項
第1區六個獎號全中，且第2區亦對中獎號	頭獎
第1區六個獎號全中，但第2區未對中	貳獎
第1區對中任五個獎號，且第2區亦對中獎號	參獎
第1區對中任五個獎號，但第2區未對中	肆獎
第1區對中任四個獎號，且第2區亦對中獎號	伍獎
第1區對中任四個獎號，但第2區未對中	陸獎
第1區對中任三個獎號，且第2區亦對中獎號	柒獎
第1區對中任二個獎號，且第2區亦對中獎號	捌獎
第1區對中任三個獎號，但第2區未對中	玖獎
第1區對中任一個獎號，且第2區亦對中獎號	普獎

chan.js

// get rand lottery number
function getNumber($min, $max, $limit) {
	var $arr = new Array()

	while ($arr.length < $limit) {
		var $rnd = Math.floor(Math.random()*($max-$min+1))+$min;
		if ($.inArray($rnd, $arr) == -1) {
			$arr.push($rnd);
		}

	}
	return $arr.join(', ');
}

// page initial
function init() {
	var $opacity = 1;

	// big lottery button
	$('#btnBig').click(function() {
		$('#divBig').hide().html(getNumber(1, 49, 6)).fadeTo('slow', $opacity);
		return false;

	});

	// wally lotter button
	$('#btnWelly').click(function() {
		$('#divWelly').hide().html(getNumber(1, 38, 6)).fadeTo('slow', $opacity);
		$('#divWellyLast').hide().html(getNumber(1, 8, 1)).fadeTo('slow', $opacity);
		return false;

	});

}

chan.css

.lottery-table {
	border-collapse: collapse;
	border: 1px solid black;
	width: 100%;
}
.lottery-table tr, .lottery-table th, .lottery-table td {
	border: 1px solid black;
	padding: 4px;
}

2010/03/26

文章內容圖片大小控制功能

很多人PO圖時會忘記resize，導致某些Blog或者新聞發布後圖片撐開了該內容的範圍
所以我寫了一隻jQuery來防堵這件事情。

範例HTML


Img Resize





圖片1：無連結，有超過，500x333。


圖片2：無連結，無超過，300x450。


圖片3：有連結，有超過，500x333。

jQuery code

/**
* 指定區域圖片縮圖功能
* 建立日期：2010/03/26
* 作者：David
* Email chan15tw@gmail.com
*/
(function() {
    // $w - 限制寬度
    $.fn.dramaImgResize = function($w) {
        return this.each(function() {
            // 找出指定區域所有為圖片的dom
            $(this)
                .find('img')
                .each(function() {
                    // 若超過規定寬度，則將原始寬度以及縮圖寬度紀錄於data中
                    if ($(this).width() > $w) {
                        // 新高度
                        $newH = Math.ceil($(this).height() / $(this).width() * $w);
                        
                        // 賦予資訊：$oW = 原始寬度，$oH = 原始高度，$nW = 新寬度，$nH = 新高度，$click = 是否點擊
                        $(this)
                            .data('imgInfo', {$oW: $(this).width(), $oH: $(this).height(), $nW: $w, $nH: $newH})
                            .data('click', false)
                            .width($w)
                            .height($newH);                       
                        
                        // 若原本就有超連結，則不加上圖片改變大小功能
                        if ($(this).parent()[0].tagName.toLowerCase() != 'a') {
                            $(this)
                                .css('cursor', 'pointer')
                                .click(function() {
                                    if (!$(this).data('click')) {
                                        $(this).animate({width: $(this).data('imgInfo').$oW, height: $(this).data('imgInfo').$oH}, 'fast', function() {
                                            $(this).data('click', true);
                                        });
                                    } else {
                                        $(this).animate({width: $(this).data('imgInfo').$nW, height: $(this).data('imgInfo').$nH}, 'fast', function() {
                                            $(this).data('click', false);
                                        });
                                    }
                                    return false;
                                });
                        }
                    }
                });
        });
    }
})(jQuery);

範例網址：http://www.drama.com.tw/jquery/imgResize.html
JS下載：http://www.drama.com.tw/jquery/js/jquery.dramaImgResize.js

2010/01/29

廣告輪播功能

因應Case需求，寫了一個廣告輪播的Plugin，這次有用到一個叫做timers的Plugin當輔助。

使用範例

<!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" />
<title>timer</title>
<style type="text/css">
body {
font-size: 12px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#slide {
width: 400px;
height: 120px;
border: 1px solid;
overflow: hidden;
}
ul.first li {
width: 400px;
background: yellow;
height: 90px;
text-align: center;
line-height: 80px;
}
ul.first li a {
display: block;
width: 400px;
height: 90px;
}
ul.second {
background: pink;
width: 400px;
height: 30px;
}
ul.second li {
float: left;
width: 80px;
height: 30px;
text-align: center;
line-height: 26px;
}
.firstLi {
width:  80px;
height: 30px;
background: black;
color: white;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.timers.js"></script>
<script type="text/javascript" src="js/jquery.dramaSlidePlay.js"></script>
</head>

<body>
<div id="slide">
<ul class="first">
<li><a href="http://www.drama.com.tw">Banner 1</a></li>
<li><a href="http://www.drama.com.tw">Banner 2</a></li>
<li><a href="http://www.drama.com.tw">Banner 3</a></li>
<li><a href="http://www.drama.com.tw">Banner 4</a></li>
<li><a href="http://www.drama.com.tw">Banner 5</a></li>
</ul>
<ul class="second">
<li class="firstLi"><a href="http://www.drama.com.tw">1</a></li>
<li><a href="http://www.drama.com.tw">2</a></li>
<li><a href="http://www.drama.com.tw">3</a></li>
<li><a href="http://www.drama.com.tw">4</a></li>
<li><a href="http://www.drama.com.tw">5</a></li>
</ul>
</div>
<script>
$(function() {
// 只有一個秒數要設定而已
$('#slide').dramaSlidePlay(3);
});
</script>
</body>
</html>

原始碼

/**
* 廣告輪播功能
* 建立日期：2010-01-29
* 作者：David
* Email: chan15tw@gmail.com
*/
(function() {
$.fn.dramaSlidePlay = function($sec) {
return this.each(function() {
var $li1 = $(this).find('ul:first li'), // 第1個li的內容
$li2 = $(this).find('ul:eq(1) li'), // 第2個li的內容
$css = $li2.filter(':first').attr('class'), // 第一個li的css名稱
$total = $li2.size(); // 導覽區li的數量

// 一個以上才進行輪播
if ($total > 1) {
// 將第一個Banner以外的Banner隱藏
$li1.filter(':not(:first)').hide();

// 執行輪播
$().everyTime($sec + 's', 'startPlay', rolling);
}

// 滑鼠移過功能
$li1.hover(function() {
$().stopTime('startPlay');
}, function() {
$().everyTime($sec + 's', 'startPlay', rolling);
});

$li2.each(function($i) {
$(this).hover(function() {
// 停止輪播
$().stopTime('startPlay');

// 改變CSS
$(this)
.addClass($css)
.siblings().removeClass($css);

// 切換Banner
$li1
.hide()
.eq($i)
.show();
}, function() {
// 繼續輪播
$().everyTime($sec + 's', 'startPlay', rolling);
});
});

// 輪播功能
function rolling() {
// 找出目前擁有播放class的li
var $index = $li2.index($li2.filter('.' + $css)),
$k = $index + 1;
if ($k < $total) {
// 往後切換
$li1.
hide()
.eq($k).show();
$li2
.removeClass($css)
.eq($k).addClass($css);
} else {
// 從頭開始
$li1.
hide()
.eq(0).show();
$li2
.removeClass($css)
.eq(0).addClass($css);
}
}
});
}
})(jQuery);

Demo: http://www.drama.com.tw/jquery/slidePlay.html
Download: http://www.drama.com.tw/jquery/js/jquery.dramaSlidePlay.js

2009/10/30

slider

jQuery市面上很多slider，不過大部分不是無窮迴圈，就是到底就停
因應公司美術需求，開發了一套自己的slider，有幾個特點如下

判斷最後位置補差額，很多slider假設1頁可以滾動2個，如果實際滾動內容只有5個的話，那第3頁會變成只有剩下一個物件的情況，此Plugin會自動判斷補位。
可設定頁數導覽。
可選擇垂直或者是水平。

選項


$('#nav').dramaSlider({
    navA: '#left', // 往左或下按鈕（必填）
    navB: '#right', // 往右或上按鈕（必填）
    nav: '#guide', // 頁數導覽
    direction: 'vertical', // 垂直（vertical）或水平（horizontal）（預設水平）
    opacity: 0.3, // 按鈕的透明度（預設0.5，1最大、0最小）
    speed: 500 // 滾動速度（預設500）
});

使用範例

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>slider</title><br /><style type="text/css"><br />body {<br />    font-size: 11px;<br />}<br />#nav {<br />    width: 204px;<br />    height: 100px;<br />    overflow: hidden;<br />    position: relative;<br />    border: 1px solid blue;<br />}<br />ul {<br />    position: relative;<br />    list-style: none;<br />    margin: 0;<br />    padding: 0;<br />}<br />li {<br />    float: left;<br />    width: 100px;<br />    height: 100px;<br />    text-align: center;<br />    background: red;<br />    margin: 0 2px 0 0;<br />}<br /></style><br /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><br /><script type="text/javascript" src="js/jquery.dramaSlider.js"></script><br /></head><br /><br /><body><br /><div id="nav"><br />    <ul><br />        <li>1</li><br />        <li>2</li><br />        <li>3</li><br />        <li>4</li><br />        <li>5</li><br />    </ul><br /></div><br /><div style="clear: both;"></div><br /><div id="guide"></div><br /><a id="left" href="#">Left</a>&nbsp;&nbsp;<a href="#" id="right">Right</a><br /><script><br />$(function() {<br />	$('#nav').dramaSlider({<br />		navA: '#left',<br />		navB: '#right',<br />		nav: '#guide'<br />	});	   <br />});<br /></script><br /></body><br /></html><br />

原始碼

<br />/*<br />* Drama Slider<br />* 編輯日期: 2009-10-30<br />* 作者: David<br />* Email: chan15tw@gmail.com<br />*/<br />(function() {<br />    $.fn.dramaSlider = function($opts) {<br />        var $defaults = {<br />            navA: '',<br />            navB: '',<br />            direction: 'horizontal',<br />            speed: 500,<br />            opacity: 0.5,<br />            nav: ''<br />        },<br />           $set = $.fn.extend($defaults, $opts),<br />           $page = 1; // 起始頁數<br />        if ($set.navLeft == '' || $set.navRight == '') {<br />            alert('請設定按鈕');<br />            return false;<br />        }<br />        return this.each(function() {<br />            var $li = ($set.direction == 'horizontal') ? $(this).find('li:first').outerWidth(true) : $(this).find('li:first').outerHeight(true), // 單一li寬度<br />                $ul = $(this).find('ul:first'), // 移動區塊<br />                $liAmount = $(this).find('li').size(), // li數量<br />                $liPerPage = ($set.direction == 'horizontal') ? Math.round($(this).outerWidth() / $li) : Math.round($(this).outerHeight() / $li), // 每頁數量<br />                $totalPage = Math.ceil($liAmount / $liPerPage), // 總頁數<br />                $liLeft = $liAmount % $liPerPage == 0 ? $liLeft = $liPerPage : $liAmount % $liPerPage, // 遞補數量<br />                $btnA = $($set.navA).css('opacity', $set.opacity), // 往左或下按鈕<br />                $btnB = $($set.navB); // 往右或上按鈕<br />            guide();<br />            switch ($set.direction) {<br />                case 'horizontal':<br />                    $(this).find('ul').width(9999);<br />                    break;<br />                case 'vertical':<br />                    $(this).find('ul').height(9999);<br />                    break;<br />            }<br />            <br />            // 往右或上按鈕<br />            $btnB.click(function() {<br />                if ($liAmount > $liPerPage) {<br />                    if ($page != $totalPage) {<br />                        if (($page + 1) == $totalPage) {<br />                            if ($page == 1) $btnA.fadeTo('normal', 1);<br />                            switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liLeft * -1)}, $set.speed);<br />                                    $(this).fadeTo('normal', $set.opacity);<br />                                    $page++;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liLeft * -1)}, $set.speed);<br />                                    $(this).fadeTo('normal', $set.opacity);<br />                                    $page++;<br />                                    break;<br />                            }<br />                            guide();<br />                        } else {<br />                            if ($page == 1) $btnA.fadeTo('normal', 1);<br />                            switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liPerPage * -1)}, $set.speed);<br />                                    $page++;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liPerPage * -1)}, $set.speed);<br />                                    $page++;<br />                                    break;<br />                            }<br />                            guide();<br />                        }<br />                    }<br />                }<br />                return false;<br />            });<br />            <br />            // 往左或下按鈕<br />            $btnA.click(function() {<br />                if ($page != 1) {<br />                    if ($page == $totalPage) {<br />                        if ($page == $totalPage) $btnB.fadeTo('normal', 1);<br />                        if ($page - 1 == 1) $(this).fadeTo('normal', $set.opacity);<br />                        switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liLeft)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liLeft)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                        }<br />                        guide();<br />                    } else {<br />                        if ($page == $totalPage) $btnB.fadeTo('normal', 1);<br />                        if ($page - 1 == 1) $(this).fadeTo('normal', $set.opacity);<br />                        switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liPerPage)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liPerPage)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                        }<br />                        guide();<br />                    }<br />                }<br />                return false;<br />            });<br />            <br />            // page navigator<br />            function guide() {<br />                if ($set.nav != '') {<br />                    $($set.nav).html($page + '/' + $totalPage);<br />                }<br />            }<br />        });<br />    }<br />})(jQuery);<br />

範例網站：http://www.drama.com.tw/jquery/slider.html
下載位置：http://www.drama.com.tw/jquery/js/jquery.dramaSlider.js

2009/10/21

點選文字欄位後本身文字消失

今天寫了一個plugin，我知道網路上好像有類似的可以download
不過由於自己開發的掌控性比較高，所以就花了一點點時間撰寫

功能介紹：
其實作用很簡單，預設一個text文字內容，onfocus的時候消失，onblur的時候出現
要判斷的只有user是否已經改變內容了。

使用方式：


<input type="text" id="test" //>
<script>
	$('#test').chanClickClear('測試');
</script>

Plugin Code

<br />(function() {<br />    $.fn.chanClickClear = function($txt) {<br />        return this.each(function() {<br />            if ($txt != '') {<br />                $(this)<br />                    .val($txt)<br />                    .focus(function() {<br />                        if ($(this).val() == $txt) $(this).val('');<br />                    })<br />                    .blur(function() {<br />                        if ($(this).val() == '') $(this).val($txt);<br />                    });<br />            }<br />        });<br />    }<br />})(jQuery);<br />

2009/10/15

jQuery Validation加入身份證驗證的功能

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

這個插件相當相當的強大，我新增了一個Method來判斷台灣身份證。


$(function() {
 $.validator.addMethod("twId", function(value, element) {
     var regExpID = /^[a-z](1|2)\d{8}$/i, // 身份證正規式
         re = new RegExp(regExpID);
     return this.optional(element) || re.test(value);
}, "請輸入正確的身份證格式");

 $('form').validate({
     rules: {
         id: {
             required: true,
             rangelength: [10, 10],
             twId: true // 引用身份證認證
         }
     }
 });
});

訂閱：文章 (Atom)