Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

shadowbox を使ってエントリ修正画面のリンクを張る

Dec312008
Vote:
http://bizcaz.com/archives/2008/12/31-235644.php
Categories: Customize
Tags: shadowbox
Social Bookmark

Prev Page: ダイナミック・パブリッシングにハマりました
Next Page: MailForm プラグインを jQuery 化する

こんばんわ^^

今年ももうすぐ終わり。今年は久しぶりに紅白を見てました (●´∀｀●)

さて、時間がないのでサクっと説明します。
以前、エントリ修正画面のリンクを張るためのカスタマイズについてご紹介したことがあります。

エントリの訂正をカンタンにする

これを shadowbox を使って表示できるようにしてみました。

わたしのサイトでは jQuery を使ってて、かつ shadowbox は Ajax で表示されたページに関しては有効にならないようです。 Ajax で表示されたページは shadowbox の 'open' API を使って表示する必要があります。
なので以下のようなコードを作って実験的に試したらできちゃった (●´∀｀●)

shadowbox でエントリ編集画面表示 for jQuery 1.2.6

$(document).ready(function() {
$('[@class~=sp:]').click(function() {
var inf = unescape(this.className.replace(/.*sp:([^ ]+)( .*|$)/, '$1')).split(':');
var url = ['http://●●●.com/mt/mt.cgi', '?__mode=view&_type=', inf[2], '&blog_id=', inf[0], '&id=', inf[1]].join('');
var elem = document.createElement('a');
$(elem).attr('href', url);
Shadowbox.init();
Shadowbox.open(elem, {
player : 'iframe',
title : $(this).attr('title')
});
});
});

[2009.02.25] 上記は jQuery 1.2.6 用です。 jQuery 1.3.x 系のコードは以下をお使いください。

shadowbox でエントリ編集画面表示 for jQuery 1.3.x

$(document).ready(function() {
$('[class*=sp:]').click(function() {
var inf = unescape(this.className.replace(/.*sp:([^ ]+)( .*|$)/, '$1')).split(':');
var url = ['http://●●●.com/mt/mt.cgi', '?__mode=view&_type=', inf[2], '&blog_id=', inf[0], '&id=', inf[1]].join('');
var elem = document.createElement('a');
$(elem).attr('href', url);
Shadowbox.init();
Shadowbox.open(elem, {
player : 'iframe',
title : $(this).attr('title')
});
});
});

で、以下のようにマークアップします。

マークアップ

ブログページの場合
<span class="sp:<$MTBlogID$>:<$MTEntryID$>:entry" title="ブログ記事の編集(ブログ管理者の権限)">Edit</span>
ウェブページの場合
<span class="sp:<$MTBlogID$>:<$MTPageID$>:page" title="ブログ記事の編集(ブログ管理者の権限)">Edit</span>

事前に shadowbox の初期化を済ませておく必要はありますが、具体的にはクリックイベントを使って動的にアンカーを生成して表示するってものです。
メリットとしては URL を隠すことができる!? かな。

デメリットというか、始めて MT にログインする場合だと mt.cgi の仕様なのか、事前にログインしていないとうまく表示できないことがあります (;￣∇￣A

[2009.01.01] ウェブページに対応しました。

[2009.01.01] ベーシック認証と併用すれば他人には URL がオープンされずに済みそうですｄ(＞∀＜　) グゥ～

Movable Type の管理画面に Basic 認証を使ってみる

以上です。
紅白見てからこの記事書いてるので時間があまりなくって至らないところは多々あるかと思いますが、分からないところは質問して頂けたらと思います。

訪問してくださったみなさん、本年はありがとうございました。
新年もよろしくお願いします (●＞∀＜●)／

Edit
Permalink
4 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(4)

#1: Posted by noriko @ February 24, 2009 [REPLY]

shadowbox でエントリ編集画面表示
# $(document).ready(function() {
# $('[@class~=sp:]').click(function() {　　・・・・・　以下省略　・・・・・
これは、どのファイルに追加するのですか。
新規作成ですか。

* Edit　は表示出来ました。

* Edit
* Permalink
* Comments(0)
* Trackbacks(0)

以上の件、宜しく御願い致します。

#2: Posted by bzbellからnorikoへの返信 @ February 24, 2009 [REPLY]

>>1 noriko さん

こんばんわ^^

ご質問の件ですが、以下の 2 つの方法があります。

HTML ヘッダ( <head>～</head> )内に記事中でご紹介してるコードを追加します。
外部ファイル( たとえば、jquery.secure.js など )として記事中のコードを保存して、HTML ヘッダ内で他の JavaScript のように jquery.secure.js をロードするようにします。

noriko さんのお好みで構わないと思います。
わたし的には 2. の外部ファイルに保存してロード･･･の方がオススメです。
というのも、JavaScript を外部ファイルにすることで、ロードされたそのファイル( JavaScript )がキャッシュされるので再読込みすることなくページが表示されるようになります

また、記事中の jQuery のコードは jQuery 1.2.6 まで使用可能です。
最近の jQuery 1.3.x 系の場合には以下のコードをご利用ください。

$(document).ready(function() {
$('[class*=sp:]').click(function() {
var inf  = unescape(this.className.replace(/.*sp:([^ ]+)( .*|$)/, '$1')).split(':');
var url  = ['http://●●●.com/mt/mt.cgi', '?__mode=view&_type=', inf[2], '&blog_id=', inf[0], '&id=', inf[1]].join('');
var elem = document.createElement('a');
$(elem).attr('href', url);
Shadowbox.init();
Shadowbox.open(elem, {
player : 'iframe',
title  : $(this).attr('title')
});
});
});

※行頭に全角スペースが付加されてますので、ご使用前に必ず全角スペースを削除してください。

以上ご確認ください

#3: Posted by norikoからbzbellへの返信 @ February 25, 2009 [REPLY]: >>2 bzbell さん
回答有難う御座います。
>HTML ヘッダ内で他の JavaScript のように jquery.secure.js をロードするようにします。
回答待っている間、これ、思いつきやりましたが、だめでした。
jQuery 1.3.x 系にしたので、だめだったのですね。
jQuery 1.3.x 系のコードに変更したら、動作しました。
有難う御座いました。