こんばんは
とうとう梅雨入りしてしまいました
ちょっと前までは、もう夏なんじゃない?と思うくらいの気温でしたが
皆様、体調崩したりしていないでしょうか
さて、今回は「続きを読む」を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を組み込んでおくと、
また新たな部品の完成!ということになります
利用するシーンが近々来そうなので、個人的に流用するために書きました
もしこのような開発があったら使ってみてください
では、この辺で・・・
あでゅー