「続きを読む」を簡単に実装

テーマ:

こんばんは爆  笑

 

とうとう梅雨入りしてしまいましたえーん

ちょっと前までは、もう夏なんじゃない?と思うくらいの気温でしたが

皆様、体調崩したりしていないでしょうか??

 

さて、今回は「続きを読む」をXPagesで簡単に実装できないか探してみました。

 

 

続きを読む?

 

 

イメージは以下のようなものです。

 

 

 

「続きを読む」をクリックすると・・・

 

 

 

びよーんとなるアレですニヤリ

 

元ネタは以下のリンクを参考にさせていただきました。

CSSだけで作る超軽量アコーディオン開閉「続きを読む」「もっと読む」

 

JQueryとかなくてもできるんですねびっくり

 

作成方法はリンク先にとても分かりやすく記載されているので

今回は、HTMLタグをどのようにXPageに実装したかを書きたいと思いますグッ

 

今回もいつも通りカスタムコントロールに作成します。

 

プロパティ定義にて、TitleとBodyを作成しました。

共に種類はstringです。

 

1) div は パネルコントロールに変更し、StyleClassにクラスを設定。

2) チェックボックスやラベルは、それぞれコントロールがあるのでそれに変更。

3) タイトル部分には計算結果フィールドコントロールを配置し、値はcompositeData.Titleを記述。

4) 本文部分には複数行編集ボックスコントロールを配置し、読み取り専用にチェックを入れ、値はcompositeData.Bodyを記述。

 

    <xp:panel styleClass="accordion-box">
        <xp:checkBox id="ac00"></xp:checkBox>
        <xp:label for="ac00"></xp:label>
        <xp:panel styleClass="accordion-container">
            <h3><xp:text escape="true" id="computedField1"
                    value="#{javascript:return compositeData.Title}">
                </xp:text></h3>
            <p><xp:inputTextarea id="inputTextarea1" readonly="true"
                value="#{javascript:compositeData.Body}">
            </xp:inputTextarea></p>
        </xp:panel>  <!-- accordion-container -->
    </xp:panel><!-- accordion-box -->

 

5) XPageを用意し、CSSと上記で作成したカスタムコントロールを配置。

すべてのプロパティ>カスタムに先ほど設定したプロパティ定義項目があるので、それぞれにテキストを入力します。

 

以上で実装は完了になります。

とても簡単ですねー!!

 

このカスタムコントロールにCSSを組み込んでおくと、

また新たな部品の完成!ということになりますOK

 

利用するシーンが近々来そうなので、個人的に流用するために書きましたアセアセアセアセ

もしこのような開発があったら使ってみてくださいニコニコ

 

 

 

では、この辺で・・・

 

 

あでゅーバイバイ