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

こんばんは

とうとう梅雨入りしてしまいました

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

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

さて、今回は「続きを読む」を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> 
   </xp:panel>

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

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

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

とても簡単ですねー

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

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

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

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

では、この辺で・・・

あでゅー