忍者ブログ

えいりあす

list.js を使ってみた

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

list.js を使ってみた

簡単にフィルタリングやソートができるlist.js
検索機能を使いたかったのですが、つまづいたのでメモ



事前準備:
公式サイトからダウンロードして解凍しておく

1.jquery.jsとlist.jsファイルを読み込む
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="list.min.js"></script>
</head>
<body>
...
<body>
</html>

2.valueNamesに検索対象文字列が格納されたクラス名を入力する
...
<div id="main">
 <ul>
  <li><h3 class="title">title1</h3></li>
  <li><h3 class="title">title2</h3></li>
 </ul>
 <script type="text/javascript">
  var options = {
   valueNames: ['title']
  };
  var threadList = new List('main', options);
 </script>
</div>
...

3.リストタグを含む親タグのidを引数に渡してListの作成
...
<div id="main">
 <ul>
  <li><h3 class="title">title1</h3></li>
  <li><h3 class="title">title2</h3></li>
 </ul>
 <script type="text/javascript">
  var options = {
   valueNames: ['title']
  };
  var threadList = new List('main', options);
 </script>
</div>
...

4.<input class="search"/>タグを設置
...
<div id="main">
 <input class="search" placeholder="Search" />
 <ul>
  <li><h3 class="title">title1</h3></li>
  <li><h3 class="title">title2</h3></li>
 </ul>
 <script type="text/javascript">
  var options = {
   valueNames: ['title']
  };
  var threadList = new List('main', options);
 </script>
</div>
...

<head>タグ内でスクリプト書いてもうまく動かなかった
この書き方じゃないと動かないのかな・・・よくわからんです

拍手[0回]

コメント

プロフィール

HN:
忘れ傘
性別:
男性
自己紹介:
Linux初心者
知識が浅すぎるので勉強中
あっぷろーだ:wasuregasa
ついったー:@__TIMESTAMP__

P R

最新コメント

[03/27 NONAME]
[03/26 ぽん]
[03/26 ぽん]
[03/17 ぽん]
[03/05 通りすがりのR]