Javascript기반의 Pagination

Wed, 01 Oct 2008 12:35:00 GMT

1. Jquery 에서 사용
- 다운 로드 : http://plugins.jquery.com/project/pagination
- 사용 소스

 <script type="text/javascript">
        function pageselectCallback(page_id, jq){
                $('#Searchresult').text("Showing search results "
                 +((page_id*10)+1)+"-"+((page_id*10)+10));
        }
        $(document).ready(function(){ // Create pagination element
                $("#Pagination").pagination(300, {
                        num_edge_entries: 2,
                        num_display_entries: 8,
                        callback: pageselectCallback
                });

                // Set handler for setting pagination options via form
                $("#setoptions").click(function(){
                        var opt = {callback: pageselectCallback};
                        $("input[@type=text]").each(function(){
                                opt[this.name] = this.className.match
                                (/numeric/)?parseInt(this.value):this.value;
                        });
                        // extract maxitems
                        var maxitems = opt.maxitems;
                        delete opt.maxitems;
                        // Avoid html injections in this demo
                        var htmlspecialchars =
                         { "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;"}
                        $.each(htmlspecialchars, function(k,v){
                                opt.prev_text = opt.prev_text.replace(k,v);
                                opt.next_text = opt.next_text.replace(k,v);
                        })
                        $("#Pagination").pagination(maxitems, opt);
                });

        });
</script>

- 데모 : http://www.mimul.com/examples/pagenation/demo.htm

2. 일반 Javascript에서 사용
- 사용 소스

 function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;

    this.showRecords = function(from, to) {
        var rows = document.getElementById(tableName).rows;
        // i starts from 1 to skip table header row
        for (var i = 1; i < rows.length; i++) {
            if (i < from || i > to)
                rows[i].style.display = 'none';
            else
                rows[i].style.display = '';
        }
    }

    this.showPage = function(pageNumber) {
        if (! this.inited) {
                alert("not inited");
function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;

    this.showRecords = function(from, to) {
        var rows = document.getElementById(tableName).rows;
        // i starts from 1 to skip table header row
        for (var i = 1; i < rows.length; i++) {
            if (i < from || i > to)
                rows[i].style.display = 'none';
            else
                rows[i].style.display = '';
        }
    }

    this.showPage = function(pageNumber) {
        if (! this.inited) {
                alert("not inited");
                return;
        }

        var oldPageAnchor = document.getElementById('pg'+
           this.currentPage);
        oldPageAnchor.className = 'pg-normal';

        this.currentPage = pageNumber;
        var newPageAnchor = document.getElementById('pg'+
          this.currentPage);
        newPageAnchor.className = 'pg-selected';

        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;
        this.showRecords(from, to);
    }

    this.prev = function() {
        if (this.currentPage > 1)
            this.showPage(this.currentPage - 1);
    }

    this.next = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }

    this.init = function() {
        var rows = document.getElementById(tableName).rows;
        var records = (rows.length - 1);
        this.pages = Math.ceil(records / itemsPerPage);
        this.inited = true;
    }

    this.showPageNav = function(pagerName, positionId) {
        if (! this.inited) {
                alert("not inited");
                return;
        }
        var element = document.getElementById(positionId);

        var pagerHtml = '<span onclick="' + pagerName +
          '.prev();" class="pg-normal"> &#171 Prev </span> | ';
        for (var page = 1; page <= this.pages; page++) 
         pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' 
            + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
        pagerHtml += '<span onclick="'+
         pagerName+'.next();" class="pg-normal"> Next &#187;</span>';

        element.innerHTML = pagerHtml;
    }
}

- 데모 : http://www.mimul.com/examples/pagenation/paging.html

SitePoint에서 무료 Photoshop 책 받기

Sat, 17 May 2008 05:03:00 GMT

무료기간이 끝나기전에...
여기 사이트에 가서 "The PhotoShop Anthology"를 받으시기 바랍니다.

받는 방법은 다운로드 버튼을 클릭한 다음,

이메일로 다운로드 링크를 보내주면 그 URL을 카피해서 다운 받으시면 됩니다.

책의 구성은 9 Chapters, 270 페이지로 구성되어 있습니다.

Chapter 1 Getting Started with Photoshop.
Chapter 2 Basic Skills
Chapter 3 Creating Buttons
Chapter 4 Creating Backgrounds
Chapter 5 Working with Text
Chapter 6 Adjusting Images
Chapter 7 Manipulating Images
Chapter 8 Designing a Web Site
Chapter 9 Advanced Photoshop Techniques

필요하신 분들은 다운받아서 사용하세요. 물론 프린트 기능은 됩니다.

14k Javascript로 만든 Super Mario

Fri, 11 Apr 2008 13:56:00 GMT

Javascript의 중요성은 나날히 높아만 지네요. Jacob Seidelin가 Javascript로 게임을 마리오 게임을 만들었습니다. 가가 막힙니다.

주요내용을 살펴보면 아래와 같습니다.

1. 외부 이미지를 사용하지 않고 Canvas를 사용하고 Javascript로 렌더링하였고
2. base64인코딩 방법으로 소리 발생시키고
3. Firefox, Opera, Safari, IE를 지원하고

게임 사이트 : 여기(음악을 들을려면 FireFox 권장 ^^)
참조 사이트 : http://blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html

Yahoo! UI Library: Grids CSS

Sat, 09 Feb 2008 07:29:00 GMT

CSS 레이아웃에 빼놓을 수 없는 요소인 Grids에 대한 레퍼런스입니다. 야후에서 만든 또하나의 좋은 라이브러리입니다.
제 서버로 퍼웠는데.. 괜찮네요.

예제 사이트 : http://www.mimul.com/examples/grids/builder.htm

Mimul's Developer World - Design World category

Javascript기반의 Pagination

SitePoint에서 무료 Photoshop 책 받기

14k Javascript로 만든 Super Mario

Yahoo! UI Library: Grids CSS