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

実行結果

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

▼入力したテキストにマッチするデータに絞り込んで表示します。

例：テーブルデータの簡易検索

ブラウザ アクセス数 アクセス総数に占める割合
Firefoxファイヤーフォックス148432.42%
Internet Exploer 6インターネットエクスプローラ 6144931.65%
Internet Exploer 7インターネットエクスプローラ 7126927.72%
Safariサファリ1653.6%
Google Chromeグーグルクローム972.12%
Operaオペラ932.03%
iMODEアイモード50.11%
iPhoneアイフォン50.11%
Internet Exploer 5.5インターネットエクスプローラ 5.530.07%
Mozillaモジラ30.07%
NetScape7.xネットスケープ 7.x20.04%
Internet Exploer 8インターネットエクスプローラ 810.02%
Sleipnirスレイプニル10.02%
Softbankソフトバンク10.02%

例：リストデータの簡易検索

設置サンプルのソース

<!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 quickSearch plug-in | 設置サンプル</title>
      <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script src="/content/lib/jquery/jquery.quicksearch.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(function () {
         $('table#table_exp tbody tr').quicksearch({
            position: 'before',
            attached: 'table#table_exp',
            stripeRowClass: ['odd', 'even'],
            labelText: 'データ検索：'
         });
         $('ul#list_exp li').quicksearch({
            position: 'before',
            attached: 'ul#list_exp',
            loaderText: '',
            delay: 100,
            labelText: 'データ検索：'
         });
      });
      </script>
      <!-- CSS -->
      <style type="text/css">
         table { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; margin:1em 0; padding:0; }
         thead th { background-color:#333; color:#fff; }
         th, td { border-bottom:1px solid #ccc; text-align:left; }
         .right { text-align:right; }
         .odd { background-color:#fff; }
         .even { background-color:#eee; }
      </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/quicksearch/'>jQuery quickSearch plug-in</a> | 設置サンプル</h1>
         <p>▼入力したテキストにマッチするデータに絞り込んで表示します。</p>
<!-- CODE -->
<h2>例：テーブルデータの簡易検索</h4>
<table id="table_exp">
   <thead> 
      <tr>
         <th colspan="2">ブラウザ</th>
         <th>アクセス数</th>
         <th>アクセス総数に占める割合</th>
      </tr>
   </thead>
   <tbody>
      <tr><td>Firefox</td><td>ファイヤーフォックス</td><td class="right">1484</td><td class="right">32.42%</td></tr>
      <tr><td>Internet Exploer 6</td><td>インターネットエクスプローラ 6</td><td class="right">1449</td><td class="right">31.65%</td></tr>
      <tr><td>Internet Exploer 7</td><td>インターネットエクスプローラ 7</td><td class="right">1269</td><td class="right">27.72%</td></tr>
      <tr><td>Safari</td><td>サファリ</td><td class="right">165</td><td class="right">3.6%</td></tr>
      <tr><td>Google Chrome</td><td>グーグルクローム</td><td class="right">97</td><td class="right">2.12%</td></tr>
      <tr><td>Opera</td><td>オペラ</td><td class="right">93</td><td class="right">2.03%</td></tr>
      <tr><td>iMODE</td><td>アイモード</td><td class="right">5</td><td class="right">0.11%</td></tr>
      <tr><td>iPhone</td><td>アイフォン</td><td class="right">5</td><td class="right">0.11%</td></tr>
      <tr><td>Internet Exploer 5.5</td><td>インターネットエクスプローラ 5.5</td><td class="right">3</td><td class="right">0.07%</td></tr>
      <tr><td>Mozilla</td><td>モジラ</td><td class="right">3</td><td class="right">0.07%</td></tr>
      <tr><td>NetScape7.x</td><td>ネットスケープ 7.x</td><td class="right">2</td><td class="right">0.04%</td></tr>
      <tr><td>Internet Exploer 8</td><td>インターネットエクスプローラ 8</td><td class="right">1</td><td class="right">0.02%</td></tr>
      <tr><td>Sleipnir</td><td>スレイプニル</td><td class="right">1</td><td class="right">0.02%</td></tr>
      <tr><td>Softbank</td><td>ソフトバンク</td><td class="right">1</td><td class="right">0.02%</td></tr>
   </tbody>
</table>
<h2>例：リストデータの簡易検索</h4>
<ul id="list_exp">
   <li>Firefox</li>
   <li>Google Chrome</li>
   <li>Internet Exploer</li>
   <li>Mozilla</li>
   <li>Netscape</li>
   <li>iMODE</li>
   <li>Safari</li>
   <li>Sleipnir</li>
   <li>Softbank</li>
</ul>

<!-- CODE / -->
      </div>
   </body>
</html>