divideプラグインの使い方

基本表記とプラグインの機能について

#divide(オプション){文字列}

要素を指定した比率で分割するプラグインです。指定したパラメーターで装飾することができます。
パラメーターはカンマ（,）区切りで記述してください。
クラスについて詳しく知りたい場合は、TAG INDEX クラス名を使った指定をご参考ください。

{}で囲まれた要素を子要素として扱い、直下要素を分割対象として扱います。
直下要素の数よりも分割指定の数字の数が少ない場合、足りない分だけ表示されなくなります。

{}で囲まれた要素がない場合、オプションで指定された分だけwidth指定された空のdivタグが生成されます。
CSSカスタマイズを併用すると使用例のような特殊な使い方ができると思います。
CSSカスタマイズは「管理画面」→「デザイン設定」→「CSSカスタマイズ（上級者向け）」から記述することができます。

パラメータ一覧

パラメータ	説明
数字	子要素の分割比率を指定します。（2個のdivを1対2の割合で分割したい場合は、1,2と指定）
width=数字	分割したい要素の横幅を指定します。数字またはpx,%による指定ができます。
height=数字	分割したい要素の縦幅を指定します。数字またはpx,%による指定ができます。
class=クラス名	クラスに指定できる文字列

表示例１：div要素を１対２で並べる場合

#divide(1,2){{
    #divclass(divide01){
        #divclass(uk-text-center){
            1つ目要素上
        }

        #divclass(uk-text-right){
            １つ目要素下
        }
   }
   #divclass(divide02){
       ２つ目要素
   }
}}

1つ目要素上

１つ目要素下

２つ目要素

※分割がわかりやすいようにcssを使って背景色をつけています。プラグインを使うだけでは色は付きません。

使用例２-１：{}による指定がない場合

#divide(1,1,1,class=gauge1)

CSSカスタマイズに記述したCSS

.gauge1{height:30px;width:100%;}
.gauge1 div:nth-child(1){ background-color: green;}
.gauge1 div:nth-child(2){ background-color: yellow;}
.gauge1 div:nth-child(3){ background-color: red;}

使用例２-２：モンハンゲージ風

#divide(3,1,1,1,2,class=gauge2 uk-margin-right,width=100px,height=20px)
#divide(1,1,1,2,3,class=gauge2,width=100px,height=20px)

CSSカスタマイズに記述したCSS

.gauge2 div:nth-child(1){ background-color: #3366cc;}
.gauge2 div:nth-child(2){ background-color: #66cc33;}
.gauge2 div:nth-child(3){ background-color: #fff000;}
.gauge2 div:nth-child(4){ background-color: #ff9900;}
.gauge2 div:nth-child(5){ background-color: #ff0000;}

<< 利用できるwiki記法リストに戻る