้กฏ็คบๅ…ทๆœ‰ 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

ๆจกๆ“ฌ่ฝ‰็›ค้Šๆˆฒ

ๅ…ฌๅธๆœ‰ไธ€ๅ€‹ case ่ฆๅœจ็ถฒ้ ๆจกไปฟ่ฝ‰็›คไบฎ็‡ˆ็š„ๅŠŸ่ƒฝ,้™ฝๆ˜ฅ็š„ๅฏซๆณ•ๅฆ‚ไธ‹。

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

HTML5 pushState

ไน‹ๅ‰็š„ๆกˆๅญ่‹ฅๆƒณ่ฆ้”ๆˆ 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,ๅ‡่จญไปŠๅคฉๆˆ‘ๅ€‘้‡ๅˆฐ็š„ๆƒ…ๆณ็ฌฆๅˆไปฅไธ‹ๆขไปถ:

  1. ่ถ…้Žๅ…ฉๅ€‹ไปฅไธŠ็š„ ajax request
  2. ๆœ‰ไธ€ๅฎš็š„้‚่ผฏ

ๆˆ‘ๅ€‘ไธๆœƒๅธŒๆœ›ๆœ‰ๅๅ€‹ 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 IE 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


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 ๅœ–็‰‡1:็„ก้€ฃ็ต,ๆœ‰่ถ…้Ž,500x333。 ็…ง็‰‡2 ๅœ–็‰‡2:็„ก้€ฃ็ต,็„ก่ถ…้Ž,300x450。 ็…ง็‰‡3 ๅœ–็‰‡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,ๆœ‰ๅนพๅ€‹็‰น้ปžๅฆ‚ไธ‹
  1. ๅˆคๆ–ทๆœ€ๅพŒไฝ็ฝฎ่ฃœๅทฎ้ก,ๅพˆๅคšsliderๅ‡่จญ1้ ๅฏไปฅๆปพๅ‹•2ๅ€‹,ๅฆ‚ๆžœๅฏฆ้š›ๆปพๅ‹•ๅ…งๅฎนๅชๆœ‰5ๅ€‹็š„่ฉฑ,้‚ฃ็ฌฌ3้ ๆœƒ่ฎŠๆˆๅชๆœ‰ๅ‰ฉไธ‹ไธ€ๅ€‹็‰ฉไปถ็š„ๆƒ…ๆณ,ๆญคPluginๆœƒ่‡ชๅ‹•ๅˆคๆ–ท่ฃœไฝ。
  2. ๅฏ่จญๅฎš้ ๆ•ธๅฐŽ่ฆฝ。
  3. ๅฏ้ธๆ“‡ๅž‚็›ดๆˆ–่€…ๆ˜ฏๆฐดๅนณ。
้ธ้ …

$('#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 // ๅผ•็”จ่บซไปฝ่ญ‰่ช่ญ‰
}
}
});
});