FC2ブログ

jQueryUI tabでのajax 別のHTMLを表示


jQueryUI tabを使ってajax 別のHTMLを表示しよう



では、早速jQueryjQueryUIを読み込みます。


<link href="jquery-ui-1.8.4.custom/css/custom-theme/jquery-ui-1.8.4.custom.css"
rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript"
src="jquery-ui-1.8.4.custom/development-bundle/external/jquery.cookie.js"></script>



CSSで必須なのはこの記述です

.ui-tabs .ui-tabs-hide {display: none;}


次のjQueryは最新版のjQueryをGOOGLE APISからもらってきてます。
次がjQueryUI この時点では最新版は1.8.4
必要なのはCoreだけです。
それから jQueryUIのcookie.jsが必要です。
順番はjQueryUIが先で、次にcookieで。


まず
HTMLタグの打ち方はこちら

<div id="tabs" class="ui-tabs">
<ul class="ui-tabs-nav">
<li class="ui-state-default"><a href="#tabs-1">タブ1</a></li>
<li class="ui-state-default"><a href="#tabs-2">タブ2</a></li>
<li class="ui-state-default"><a href="リンク先.html">タブ3</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel">
<p>タブ1の内容</p>
</div6gt;
<div id="tabs-2" class="ui-tabs-panel">
<p>タブ2の内容t</p>
</div>
</div>

赤字の部分で、jQueryUIでカスタムテーマを設定してる場合、
その設定がきくようになります。

青字の部分をui-state-hover とかui-state-activeに変えると
ホーバー時やアクティブの時の色に変わります。

他のページを読み込んでタブのパネルに表示するときは
a href以下に .htmlを指定するだけです
<a href="リンク先.html">



読み込む先のHTMLの方のタグは
<div class="remote">内容</div>

にでもしときます。
(jQueryUIの解説ではa href="リンク先.html" にtitleをつけて、
それと表示させたいdivのidを一致させるだのスペースはアンダースコアに変換しろだの
書いてありますが、何故かそうやっても動かなかったので、別の方法にしました。)


次がtabの設定のjQueryのコード


<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
var $tabs = $("#tabs");
var selected = $tabs.tabs('option', 'selected'); // => 0
var cache = $tabs.tabs('option', 'cache');
var cookie = $tabs.tabs('option', 'cookie');
var fx = $tabs.tabs('option', 'fx');
var ajaxOptions = $tabs.tabs('option', 'ajaxOptions');
var spinner = $tabs.tabs('option', 'spinner');
var collapsible = $tabs.tabs( "option", "collapsible" );
var event = $tabs.tabs( "option", "event" );


$tabs.tabs( {
load: function(event, ui) {
if(!ui.index == 2){
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});}}, //タブインデックス2以外ならパネルが開く
collapsible: false,
fx: { height: 'toggle', opacity: 'toggle' },//アニメーション設定

cookie: { expires: 7 } , //クッキーの有効期間設定
cache: true ,      //キャッシュ有効かどうかの設定
selected:0,        //初期に開いてるパネル選択 indexは0から
spinner:'Loading .....',//読み込み時に表示される文字設定
ajaxOptions:{async:false,    //ajax設定
dataFilter:function(data){
return $(data).find('.remote').html();
                     //リンク先のdiv class remote以下だけ読込
}
}
});
$tabs.bind('tabsselect', function(event, ui) {
if (ui.index == 2){
window.location.href = "http://リンク先.html";
location.href = $.data(ui.tab, 'load.tabs');
return false;              //tabインデックス2にイベントをバインド
});
});








スポンサーサイト



テーマ : HP作成
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO