list_index.js 50音索引ライブラリ

list_index.js 特徴

• JSON形式のリストを元に、50音索引とリストを生成、表示します。
• 「ア・カ・サ・タ・ナ･･･」で絞り込んだ後「ア・イ・ウ・エ・オ」でさらに絞り込めます。
• coneco.net ファッション用に作成したスクリプトに汎用性をもたせたものです(若干動作が異なります)。
• jQuery依存です。
• Ajax等であとから項目を追加できます。
• 画面内に複数設置可能。独立して動作します。
• 「ヴァ・ヴィ・ヴ・ヴェ・ヴォ」は「バ・ビ・ブ・ベ・ボ」に対応し、「ア行」と「ハ行」の両方に表示されます。
• 見た目は全てcssで制御。
• デフォルト表示はHTMLで記述可能。

list_index.js 使い方

Javascript

jQueryとlist_index.js、css。

<link href="list_index.css" media="screen" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1");
</script> 
<script src="list_index.js" type="text/javascript"></script>

索引とリストを表示するためのボックスを用意

<div id="index_panel"></div>
<div id="list_panel"></div>

リストをJSON形式で用意する。

var arrBrands = [
	{'name':'ブロンディ','japanese_index':'ブロンディ','url':'http://www.coneco.net/s/ca_280-tg_3:471'},
	{'name':'ヨネックス','japanese_index':'ヨネックス','url':'http://www.coneco.net/s/ca_280-tg_3:572'},
	：
}

name

表示するテキスト

japanese_index

索引生成に使用

url

リンク先URL

索引を生成する

createListIndexies(
	"brand"		//リスト自体を区別するID
	,"index_panel"	//索引を表示する要素のID
	,"list_panel"	//リストを表示する要素のID
	,arrBrands   	//JSON形式のデータ
);

第1パラメタ

リスト自体を区別するID。1ページ内に複数の索引を設置する場合は別のIDを指定してください。

第2パラメタ

索引を表示する要素のID

第3パラメタ

リストを表示する要素のID

第4パラメタ

JSON形式のリストデータ

リストを追加する

事前にcreateListIndexies()で索引を生成する必要があります。

addListItems(
	"brand"		//createListIndexiesで指定したものと同じ
	,"index_panel"	//createListIndexiesで指定したものと同じ
	,"list_panel"	//createListIndexiesで指定したものと同じ
	,arrBrands2   //JSON形式のリストデータ（追加分）
);

第1パラメタ

リスト自体を区別するID。1ページ内に複数の索引を設置する場合は別のIDを指定してください。

第2パラメタ

索引を表示する要素のID

第3パラメタ

リストを表示する要素のID

第4パラメタ

JSON形式のリストデータ

件数表示

索引用のボックス内に以下のように'item_result_count'、'item_all_count'というclassを持つ要素があれば、索引選択時等に件数を表示します。

	<div id="index_panel">
		<div class='item_result_area'>INDEXサンプル(<span class='item_result_count'></span>/<span class='item_all_count'></span>)</div>
	</div>

デザイン

list_index.jsではスタイルの制御は行っていませんので（classの制御のみ）、 デザインについてはcss等で行う必要があります。list_index.cssを参考にしてください。

ダウンロード

list_index.js Ver.1.0.0

ライセンス

MIT License