JavaScript/ハッシュチェンジのバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/ハッシュチェンジへ行く。
- 1 (2011-07-31 (日) 05:49:35)
- 2 (2011-07-31 (日) 06:38:24)

ハッシュチェンジ

ハッシュチェンジによるページング例。

 <html>
 <head>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.min.js" type="text/javascript"></script>
   <script src="http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js" type="text/javascript"></script>
 </head>
 <body>
 <dl id="list">
   <dt>no</dt><dd>n/a</dd>
   <dt>name</dt><dd>n/a</dd>
   <dt>age</dt><dd>n/a</dd>
 </dl>
 <hr />
 <div id="pager">
   <a href="http://localhost/1">page 1</a>
   <a href="http://localhost/2">page 1</a>
 </div>
 <script>
 $(function () {
   // 
   function goPage(num) {
     console.log('called goPage(): ' + num);
     $.ajax({
       type : 'GET',
       url : './' + num + '.json',
       datatype : 'json',
       success : function (data) {
         var dl = $('#list');
         dl.children().remove();
         for ( k in data ) {
           var dt = $('<dt></dt>');
           var dd = $('<dd></dd>');
           dt.append(k);
           dd.append(data[k]);
           console.log(dt);
           dl.append(dt);
           dl.append(dd);
         }
       },
       error : function (xhr, message) {
         console.log('ERROR: ' + message);
       }
     });
   }
 
   //
   $(window).hashchange(function (){
     var hash = decodeURIComponent(location.hash);
     var num = hash.replace('#page', '') || 1;
     if (isNaN(num)) num = 1;
     goPage(num);
   });
 
   // 
   $(window).hashchange();
 
   // 
   $('#pager').find('a').each(function(){
     var hash = $(this).attr('href').replace('http://localhost/', '#page');
     $(this).attr({ href : hash });
   });
 });
 </script>
 </body>
 </html>