POPSブログ

BaserCMSブログに機能を付加する/6

18

  Category:  basercms2012/02/10 pops 

BaserCMSブログに機能を付加する/5 の続きです。複数タグの簡単な検索機能を作り、実際にセレクターを配置してテストをしてみます。


BaserCMSブログに機能を付加する/6


複数タグの簡単な検索機能を作る2

前のページで「複数タグの簡単な検索機能を作る」で改造の方法など解説しましたが、実際にセレクターを配置して簡単なテストをしてみます。

  • セレクターなどは使用者がで作り配置しなければなりません。
  • タグのデータを送る際に、規則に従い整形、修正をしなければなりません。
  • ここではjQueryを使用しますのでページングも参考程度ですがすることにします。
  • 複数タグ送信の規則の決め方次第では、複合的な処理も可能でしょう。

簡単なセレクターを使っての実験

セレクターの数、または書き込むデータなどは、使用者の自由です。送るデータの形式を aaa-bbb-ccc にするだけです。

[[ 複数タグの検索テスト ]]

-------- URL DATA --------

TAGS-1

TAGS-2

TAGS-3


▲ 上でタグを選定し、▼ 下のボタンを押してください。

複数タグ検索実行

jqueryスクリプトの一例、私は常時読み込む common.js の中に書き込んでいます。
一例です。タグデータを整形して最後に書き込んでいるだけ。



tags_selecter_use="use" ボタンが機能します
tags_selecter_use="" ボタンが機能しません

selectからval()で選定データを取得した間に - 記号を入れているだけ
location先は .../archives/tags/タグの選定データ

----------------------------------------------------

		//tags-selecter-set
		var tags_selecter_use="use";
		var tags_url="";
		if (tags_selecter_use) {
			//
			$("#tags_submitbtn").bind("click",function() {
			var v_tag1=$("#select_1").val();
			var v_tag2=$("#select_2").val();
			var v_tag3=$("#select_3").val();
			if (!v_tag2) {v_tag2="";}else{v_tag2="-"+v_tag2;}
			if (!v_tag3) {v_tag3="";}else{v_tag3="-"+v_tag3;}
			var v_tag_all=v_tag1+v_tag2+v_tag3;
			var tags_url="http://pops-web.com/main/pops/archives/tags/"+v_tag_all;
			$("#tags_text").text(tags_url);
				location.href=tags_url;
			});
		}

セレクターなどHTMLを書かなければなりません。タグが増えた時などは訂正しなければならない手間が生じます。CakePHPでセレクターを自動生成できますが、複数個ではIDが同じになりますので使用できません。必要なものをリスト形式で何処かに出力して、それを元にJSでセレクターなどを生成する手段もあろうかと思います。



簡単なjqueryに拠るページング

複数タグ検索結果の表示はヒットした全数の表示ですが、jqueryで指定の表示段数で「表示」「非表示」させることにより模擬的なページングを作ります。

jqueryスクリプト、私は常時読み込む common.js の中に書き込んでいます。


表示させるページ以外のところを非表示にしているだけ

pager_use="use" 使用する場合useにする
pager_use="" 設定しない場合ページングしません
page_dan=10 ページ当たりの表示段数

----------------------------------------------------
//tags-pager
var pager_use="use";//use
//tags-pagination
if (pager_use) {

	$('#tags_pagination').each(function(){

		var pagination=$('#tags_pagination');
		var listtable=$('.list_table');
		var table_tr=$('.list_table tr');
		var tablelen=$('.list_table tr').length-1;
		var page_dan=10;
		var page_max=Math.ceil(tablelen/page_dan);
		var pager="";

		//pagerを作る
		if (page_max>1) {
			for (i=0; i < page_max; i++) {
				pager +='<span class="number">'+ (i+1) +'</span>';
			}
			pagination.append(pager);
			$('.number').bind("click",function(e) {
				var pn=$(this).text();
				$(this).addClass("actived");//クリックされた
				$(this).siblings("span").removeClass("actived");//それ以外
				set_page(pn);
			});
			//set No1背景
			$('.number').eq(0).addClass("actived");
			//set 1ページ明細表示
			set_page(1);
		}
		//set fn テーブルTR 0番から/題目は独立テーブル
		function set_page(pns) {
			var no=pns;
			for (i=0; i < tablelen+1; i++) {
				var startno=(no-1)*page_dan;
				var endno=startno+page_dan;
				if (i > startno-1 && i < endno) {table_tr.eq(i).css({'display':'block'});}
				else {table_tr.eq(i).css({'display':'none'});}
			}
		}
	});
}

複数タグ検索表示部分のCSS。IE以外で壊れるので少し複雑です。#tags_paginationも付属。
題目部分と、記事表示部分とテーブル2つの構成です(1つのテーブルで内部を非表示の場合、崩れるのを直せないので、テーブル2つにした)。ページングで崩れるので必ず幅を設定のこと。
ページングしない場合は崩れない。不思議だ。IEでは崩れない。TRを非表示にするのが問題なのか。一応崩れないようにはしたが、、、


/*table list IE以外線がでるので修正、複雑*/

.title_table,.title_table td {
border-style:none;
background-color:#CCCCCC;
}

.list_table {
width:640px;
margin-top:5px;
padding:2px;
border-collapse:separate;
border:none;
}
.list_table tr{
width:640px;
border:0;
}
.list_td1 {
width:390px;
border:0;
border-bottom:#F5F5F5 1px solid;
}
.list_td2 {
width:70px;
border:0;
border-bottom:#F5F5F5 1px solid;
}
.list_td3 {
width:180px;
border:0;
border-bottom:#F5F5F5 1px solid;
background-color:#FFFFFF;
}

/*table no-border*/
.no-border,.no-border tr,.no-border td{
border-style:none;
}

/*tags-pagination*/
#tags_pagination {
width:100%;
height:22px;
text-align:center;
background-color:none;
}
#tags_pagination .number {
width:20px;
height:14px;
padding:4px;
margin-left:4px;
background-color:#CCCCCC;
cursor:pointer;
}
#tags_pagination .actived {
background-color:#EBB7B7;
}

common.js 常時読み込むので汎用のスクリプトを書き込んでいます。


//common.js
//共通処理
(function($){
	$(function(){

	//この中に色々書いて置くと便利

	});
})(jQuery);


ここのテストの「複数タグの簡単な検索機能を作る1」のページです: BaserCMSブログに機能を付加する/5


以上です。



[ この記事のURL ]


タグ:series , basercms , php , jquery

[ BaserCMSブログに機能を付加する シリーズ記事 ]

BaserCMSブログに機能を付加する/62012.02.10
BaserCMSブログに機能を付加する/52012.02.08
BaserCMSブログに機能を付加する/42012.02.07
BaserCMSブログに機能を付加する/32012.02.06
BaserCMSブログに機能を付加する/22012.02.05
BaserCMSブログに機能を付加する/12012.02.04

 

ブログ記事一覧

年別アーカイブ一覧



[1]