jQuery pager plug-in | 設置サンプル

PHP & JavaScript Room :: 設置サンプル

実行結果

jQuery pager plug-in | 設置サンプル

▼コンテンツのページ送りを生成

コンテンツ1

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

コンテンツ2

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

コンテンツ3

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

コンテンツ4

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

コンテンツ5

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

設置サンプルのソース

<!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" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>jQuery pager plug-in | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.pager.js"></script> 
      <script type="text/javascript">
         $(function(){
            $('#exp1').pager('div',
               {
                  height:"200px",
                  prevText: "&laquo;&nbsp;前へ",
                  nextText:"次へ&nbsp;&raquo;"
               }
            );
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         .pager_examples { border:1px solid #999; margin:10px 0; background:#fff; width:300px; }
         .pager_examples h2 { margin:0; padding:5px; background-color:#e8e8e8; font-size:1.1em; }
         .pager_examples p { padding:0; margin:5px; }
         .pager_examples .nav { background:#eee; border-top:1px solid #999; padding:5px; }
         .pager_examples .nav#nav4 { border-top:0; border-bottom:1px solid #999; }
         .pager_examples .nav a { padding:0 5px; }
         .pager_examples .nav a.highlight { color:#000; font-weight:bold; }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://rikrikrik.com/jquery/pager/'>jQuery pager plug-in</a> | 設置サンプル</h1>
         <p>▼コンテンツのページ送りを生成</p>
<!-- CODE -->
         <div id="exp1" class="pager_examples">
            <div><h2>コンテンツ1</h2><p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p></div>
            <div><h2>コンテンツ2</h2><p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p></div>
            <div><h2>コンテンツ3</h2><p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p></div>
            <div><h2>コンテンツ4</h2><p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p></div>
            <div><h2>コンテンツ5</h2><p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p></div>
         </div>
<!-- CODE / -->
      </div>
   </body>
</html>