Nucleus(JP)フォーラム

NucleusCMS日本語版ユーザーのためのサポートフォーラムです。疑問が生じたらまずは記事検索をご利用ください。

ログインしていません。

#1 2005-03-11 17:20:03

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

小手先プラグインで,使う人もほとんどいないと思いますがせっかく作ったので公開します lol

【目的】
「続きを読む」のところを同じページ内で折りたたみ表示する例は
<!-- l --><a class="postlink-local" href="http://japan.nucleuscms.org/bb/viewtopic.php?t=39">viewtopic.php?t=39</a><!-- l -->
に出ていますが,これを応用して,アイテムの任意の場所で折りたたみ表示できるようにする
プラグインを作りました。

動作サンプルと説明,ダウンロードはこちらをご覧ください
http://www.matsubarafamily.com/lab/item/32

メリットは,1アイテム内に複数作れることと,アイテムの中間に折りたたみ部分を作れること。
例えばクイズのヒントをここに書いたり,映画のレビューの「ネタばれ」部分をここに書いたり
することを想定しています。

【使い方】
1. スキンのヘッダ中に<%CollapsedContents%>と書いておく
2. アイテム内で<%collapse(最初の文字列)%>と<%/collapse(折りたたみ展開時の文字列)%>にはさんで
折りたたみたい内容を入れる。
2' アイテム内で<%collapse(最初の文字列|折りたたみ展開時の文字列)%>と<%/collapse(展開時の文字列2)%>にはさんで折りたたみたい内容を入れる。この場合,折りたたみ展開時の文字列をセクションのトップに表示します。
(2005.12.10追記)v1.2で,2'の方法に対応しました


(2005.3.17追記)v0.9で,テンプレート変数にも対応しました
使い方

<%CollapsedContents(in,初期文字列)%>
テンプレート…
<%CollapsedContents(out,展開時の文字列)%>

という形で挟んでください。
テンプレート内に複数おくときは

<%CollapsedContents(in,初期文字列,2)%>
テンプレート…
<%CollapsedContents(out,展開時の文字列,2)%>

などと番号を付けてください(デフォルトは1)。
(2005.3.17追記)v1.0で,スキン変数にも対応しました
使い方はテンプレート変数と同じです。
表示に使うスタイルはnp_cc_switch_skin,np_cc_skinとコンテンツやテンプレートとは変えてあります。

テンプレートやスキン変数で2番目のタイプを使う場合

<%CollapsedContents(togglein,初期文字列|展開時の文字列,2)%>
テンプレート…
<%CollapsedContents(out,2)%>

などとしてください

【カスタマイズ】
上の例で分かるように折りたたみ部分のスイッチに使う文字列は自由に変えられます。
スタイルはスイッチ部分がnp_cc_switch,折りたたみコンテンツ部分がnp_cc_contentsという
クラスになっています。
(2005.3.17追記)スキン変数の場合
表示に使うスタイルはnp_cc_switch_skin,np_cc_skinとコンテンツやテンプレートとは変えてあります。
(2005.12.12追記)プラグインオプション
オプションで閉じたときに元の場所に戻るかどうか指定できるようにしました。

【履歴】
v0.7 -- 下記の修正を加えました(2005/3/15)
v0.9 -- テンプレート変数に対応しました(2005/3/17)
v1.0 -- テンプレート変数に対応しました(2005/3/17)
v1.2 -- クローズ用文字列をトップに表示するタイプを作りました(2005/12/10)
v1.21 -- 新タイプと旧タイプを混在して使えるようにしました(2005/12/12)
v1.23 -- バグフィックス(2005/12/13)


Attachments:
zip NP_CollapsedContents1.23.zip, Size: 1.57 KiB, Downloads: 578

オフライン

#2 2005-03-11 17:25:34

cha_cya
メンバー
From: 東京
登録日: 2004-08-25
投稿: 745

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

おー、いいですね。
たまにやりたいなーと思いつつも面倒でやめてたんですよ。
今は試す環境がないけどそのうち wink

ちなみに「クリックすると消去」を押すとその位置にスクロールしちゃうのは、機能的にはどうなんでしょう :?:
慣れてないせいか最初びっくりしました。

オフライン

#3 2005-03-11 17:44:28

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

cha_cya さんの発言:

ちなみに「クリックすると消去」を押すとその位置にスクロールしちゃうのは、機能的にはどうなんでしょう :?:
慣れてないせいか最初びっくりしました。

JavaScript初心者なので,どうしたらいいか分からないのです :?
最初はhrefのところを空白にしていたのですが,そうすると同じページを再読み込みに行ってしまうし…

一つの「手」としては

<a href="#np_cc_collapse$id" onclick="np_cc_showMore('$id', 0);return true;">

のところを

<a href="javascript:np_cc_showMore('$id', 0)">

にするというのはありそうです。ステータスバーにjavascript ... って出るのがいやでやめたんですけど。

だれかもっといい方法を教えてください tongue

とりあえずサンプルはこの方法に変更しました

オフライン

#4 2005-03-11 19:01:28

Taka
メンバー
From: 千葉
登録日: 2003-11-17
投稿: 264
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

return false;
の方がいいのでは。

オフライン

#5 2005-03-12 00:16:02

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

Taka さんの発言:

return false;
の方がいいのでは。

TakaさんThanks. これ,採用します。 big_smile
というわけでダウンロードしたら,

<a href="#np_cc_collapse$id" onclick="np_cc_showMore('$id', 0);return true;">

<a href="#np_cc_collapse$id" onclick="np_cc_showMore('$id', 0);return false;">

に修正してください。(注:修正済みです)
動作サンプルは修正済みです。

このように,JavaScript全然分かっていません :?

オフライン

#6 2005-03-13 01:14:31

nakahara21
メンバー
From: 尼崎
登録日: 2003-11-14
投稿: 1,298
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

わ、すっごいイイですね wink
いつか使おう...


nakahara21
http://nakahara21.com/
(ただいま調整中です)

オフライン

#7 2005-03-17 13:54:02

cha_cya
メンバー
From: 東京
登録日: 2004-08-25
投稿: 745

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

面白い使い方を見かけたので勝手に紹介。

EzCommentを折りたたみ表示する(NP_CollapsedContentsの応用)
http://miyacchi.jp/myblog/item/832_catid_8.html

indexページにてEzCommentで表示しているコメントおよびコメントフォームを折りたたみ表示する
Exciteブログのようにコメント部分を折りたたみ表示

のhackだそうです。

上記サイトではindexの「…コメントはこちら」の部分がこれかな。

私自身は試せてないのでご利用は自己責任で。

#あと動作サンプルが見れなくなってます。テスト中かな :?:

オフライン

#8 2005-03-17 14:17:26

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

cha_cya さんの発言:

#あと動作サンプルが見れなくなってます。テスト中かな :?:

あ,すみません。NP_ProtectItemのテストに使ってました :oops:

こういうのも面白いですね。テンプレート変数で使えるようにちょっと改造してみます。

オフライン

#9 2005-03-17 14:47:42

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

改造しました big_smile

オフライン

#10 2005-03-17 16:01:04

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

勢いでスキン変数にも対応しました。

オフライン

#11 2005-03-17 21:46:54

miyacchi
メンバー
登録日: 2004-10-15
投稿: 7

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

上の方で、cha_cyaさんにご紹介頂いた利用サイトのオーナーです。
作者様にテンプレート変数、スキン変数に対応頂き、誠にありがとうございました。
早速載せ替えてみました。

で、一つお聞きしたいのですが、
スキン変数使用時はclass名をアイテム内で使用時のものとは変えていらっしゃるようですが、
テンプレート変数使用時においても、class名を変えることは可能でしょうか?

アイテム内で使用している時と表示を微妙に変えたいときに
class名が違っていた方がスタイルシートで指定しやすいなと思ったもので。

改造方法のご教授だけでも、結構です。
よろしくお願い致します。

オフライン

#12 2005-03-17 23:51:11

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

function doTemplateVar(&$item, $inout, $comment,$number=1) {
        $id = $item->itemid . '__' . $number;
        switch (strtolower($inout)) {
            case 'in' :
echo <<<IN
<div id="np_cc_collapse$id" class="np_cc_switch">
<a href="#np_cc_expand$id" onclick="np_cc_showMore('$id', 1);return false;">$comment</a><br /></div>
<div id="np_cc_expand$id" style="display: none">
<div class="np_cc_contents">
IN;
            break;
            case 'out' :
echo <<<OUT
</div>
<div class="np_cc_switch">
<a href="#np_cc_collapse$id" onclick="np_cc_showMore('$id', 0);return false;">$comment</a>
</div>
</div>
OUT;
        }
    }

miyacchiさん,色を変えた部分を修正すればテンプレートの指定も変えられます。

オフライン

#13 2005-03-18 01:21:26

miyacchi
メンバー
登録日: 2004-10-15
投稿: 7

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

Andyさん、どうもありがとうございます。
できました。 big_smile
度重なるお手間、感謝致します。

オフライン

#14 2005-12-11 01:13:39

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

v1.2を公開しました。展開したものを閉じるリンクをトップに置くことができます。

オフライン

#15 2005-12-12 20:45:45

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

v.1.22にしました。閉じたときにスクロールしてほしいという要望があったので,オプションで指定できるようにしました。

オフライン

#16 2005-12-13 15:33:13

Andy
メンバー
登録日: 2004-03-18
投稿: 1,495
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

バグがあったので修正して1.23にしました

オフライン

#17 2008-06-28 01:48:15

藤咲
Administrator
From: 広島
登録日: 2003-11-17
投稿: 1,211
ウェブサイト

Re: NP_CollapsedContents - 折りたたみ表示を任意の場所で

意外と誰も書いてないみたいだったので、作業メモを残しておきます。
やり方は至って簡単。

1. スキンのヘッダ中に<%CollapsedContents%>と書いておく
2. テンプレートの「アイテムの本体」内、<%body%><%morelink%>はそのまま。
3. 「続きへのリンク」の中身を以下に入替

<%CollapsedContents(in,続きを開く)%>
<%more%>
<%CollapsedContents(out,続きを閉じる)%>

4. テンプレートを保存

かなり簡略化できるのでオススメです! 8)


藤咲
備忘録とかもろもろ
http://fjsk.tk/

オフライン

Board footer