FC2ブログ

jqueryつづき

lavalampのページはこちら
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

びみょーんと動くバーが素敵です

でも本題の、画面遷移なしで、記事の続きが読めて、しかもframeを使わない!

これをどのように実現させるか??(クリック場所は3カラムの一番→部分::当然フロートしてます)

slidetabは普通上部か←に使うっぽいので、画面→に固定部分を作ると、ワイド画面で見られたりすると

ものすごい固定部分との間に大きな溝が;;

しかもブラウザによっての挙動の違いが;;

というわけで、slidetabを断念し、jqueryuiのdialogを使って、問答無用でoverlayの上にcenter表示する

方針に変更

というわけで、次はjqueryui・・・・↓がダウンロードサイトです

http://jqueryui.com/download

↑のページの右上にTheme とかいてある場所があって、Advanced Theme Setting と書いてあるところを押すと、

自分でお好みの配色にできたりもします。

この設定は結構細かく指定できるんだけれど、それが故にだんだん後のほうで面倒くさくなる

適当にやっつけで設定してると、実際にuiを使い始めてから、ハイライトやhoverの時の色が気に食わなくなって、

また作り直しに行く羽目に><。(color-pickerのマウス操作がイライラする原因のひとつ)


とりあえず仕様どおり<div></div>をつくり、適当にidを振って、cssでdisplay:noneを設定

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all"> みたいにdialogで出現させる

divにクラスを与えると、uicostomで選んだ配色テーマで表示されます

<div title="">でタイトルをつけると、上に題名が表示されます。(これはjqueryのほうで指定してもいい)

jqueryの方は、外部jsファイルで、他とまとめて記述します。
 
続きを読むをクリックしたら出現させたいので、autoOpenはfalseに設定。

HTMLでは、続きを読むを<a href="#" id="open"></a>

囲んで、jqueryでクリックイベントを書きます。

dialogを開ける動作や閉じる動作のときに何度も$("div#id") を使うので、最初に  var $id = $("div#id")

と書いちゃいます。



 $(function(){$id.dialog({
bgiframe:true,
autoOpen: false,
width:"200",
minHeight:"300",
modal:true,
show: 'blind',
hide: 'explode',
title:'blog'
});

$('#open').click(function() {
$id.dialog('open');return false;})
$('#close').click(function(event){
event.preventDefault();return false;
});

$('#close').click(function() {
$id.dialog('close');return false;

});
})

そしていざ出陣!
・・・・・・・
・・・・・・・・・できた~~~~ 

一度開くと、次もう反応しません><

うーむ、とり合えずjqueryの本を読む読む読む
ありました。そんな話が!!

destroyをつかわず.collapse()ってのを使うんですと!

次回・・・・さらなる問題がdialogに発生!?

スポンサーサイト



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

FC2Blog Ranking

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