データフォーム管理CSS
概要
CSSを使用して、任意のデータフォームビューでエントリとコンテンツのレイアウトとスタイルを操作できます。指定されたビュー内のidまたはCSSクラスを持つHTML要素には、[CSS]タブにスタイル定義を含めることで特殊なスタイルを割り当てることができます。
設定
外部CSSを含める
外部CSSファイルへのURLのリストを指定することができ、これらのファイルはデータフォームビューページにロードされます。
CSSコードを入力
CSS定義を直接入力できます。
CSSファイルをアップロードする
あなたはMoodleのファイルシステムのデータフォームファイルエリアにCSSファイルをアップロードすることができます。これらのファイルは、アップロード先のDataformインスタンスの一部になり、Dataformプリセットおよびバックアップに含まれます。
ヒントとコツ
コンテンツを展開/折りたたむ
データフォームビューのコンテンツは、htmlとcssの組み合わせで折りたたみ可能にすることができます。
HTML部分は通常、ビューテンプレートにあります。指定のコンテナ要素が必要です。 divまたはテーブルセル（td）でもかまいません。コンテナ要素にクラス "collapsiblecontent"を割り当てます。それから、このコンテナにラベル、checkbox要素、div要素を追加して、折りたたみ可能にしたいすべてのコンテンツを配置します。
<div class = "collapsiblecontent">
<label for = "node1 [[entryid]]">クリックしてコンテンツの表示/非表示を切り替えます</label>
<input type = "checkbox" id = "node1 [[entryid]]" />
<div>
...折りたたみ可能なコンテンツはここにあります...
</div>
</div>
[CSS]タブで、次のCSSを追加します。チェックボックスのinput要素のすぐ上の兄弟要素を非表示にします。チェックボックスがチェックされている場合、この要素を表示します。チェックボックスの入力を隠します。クリック可能な要素のように見えるように、ラベルにポインタカーソルを割り当てます。
/ *折りたたみコンテンツ* / .collapsiblecontent > input + * { 表示 ： なし 。 } .collapsiblecontent >入力： チェック済み + * { 表示 ： ブロック 。 } .collapsiblecontent > input { 表示 ： なし 。 } .collapsiblecontent > label { カーソル ： ポインタ 。 }
動作の仕方はとても簡単です。ラベルがクリックされると、隠されたチェックボックスがチェックされ/チェックされずに内容がそれぞれ展開/折りたたまれます。
私はインターネットからこのアプローチを抜粋しました。さらに複雑な変形もまた利用可能である。
