Latest web development tutorials

jQueryのモバイルグリッド

jQueryのモバイルグリッドレイアウト

jQueryのモバイルは、CSSベースのレイアウトの内訳を提供します。 しかし、携帯電話の画面幅が狭い考えると、モバイルデバイス上で、一般的に我々は、脱凝集し、カラムのレイアウトを使用することをお勧めしません。

しかし、時にはあなたは(そのようなボタンやナビゲーションタブなど)より小さい要素をする表のようにのように、一緒に並んで配置されています。 この場合には、サブ列のレイアウトを使用することが推奨されます。

グリッド列は同一の幅(合計100%)、無境界線、背景、マージンやパディングです。

4レイアウトグリッドがあり利用できます。

グリッドクラス 列幅 対応
UI-グリッドソロ 1 100% UI-ブロック-A 試します
UI-グリッド-A 2 / 50%、50% UI-ブロック| B 試します
UI-グリッド-B 3 33%/ 33%/ 33% UI - ブロック - | B | C 試します
UI-グリッド-C 4 25%/ 25%/ 25%/ 25% UI - ブロック - | B | C | D 試します
UI-グリッド-D 5 20%/ 20%/ 20%/ 20%/ 20% UI - ブロック - | B | C | D | E 試します

ランプ 列の数に応じて電子| B | | C | D列のコンテナでは、サブ要素は、UI-ブロックとしてクラスを持っています。 側のフローティング行側。

例1:UI-グリッド(2つのレイアウト)のクラスは 、次の2つのサブ要素のUI-ブロック-aおよびUI-ブロック-Bを指定する必要があります。

例2:UI-グリッド-B(3レイアウト)のクラスは 、あなたが追加する必要があり、UI-ブロック、UI-ブロック-Bと3のサブ要素のUI-ブロック-C。


カスタムグリッド

CSSを使用すると、列ブロックをカスタマイズすることができます。

<スタイル>
.ui-ブロック、.ui-ブロック-B、.ui-ブロック-cの{
背景色:淡いです。
国境:1pxの黒一色。
高さ:100pxに。
フォント重量:太字;
テキスト整列:センター;
パディング:30px;
}
</スタイル>

»をお試しください

また、インラインスタイルブロックを使用してカスタマイズすることができます。

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

マルチライン

列で、あなたはまた、複数の行を持つことができます。

注:UI-ブロッククラスは、常に新しい行を作成します。

<DIVクラス= "UI-グリッド-B">
<DIVクラス= "UI-ブロック"> <span>のいくつかのテキスト</ span>の</ DIV>
<DIV CLASS = "UI-ブロック-B"> <span>のいくつかのテキスト</ span>の</ DIV>
<DIV CLASS = "UI-ブロック-C"> <span>のいくつかのテキスト</ span>の</ DIV>
<DIVクラス= "UI-ブロック"> <span>のいくつかのテキスト</ span>の</ DIV>
<DIV CLASS = "UI-ブロック-B"> <span>のいくつかのテキスト</ span>の</ DIV>
<DIVクラス= "UI-ブロック"> <span>のいくつかのテキスト</ span>の</ DIV>
</ DIV>

»をお試しください

応答グリッド

小さな画面では、あまりにも多くのサイドボタンにより行側で推奨されていません(テキストは短縮します)。

私たちは、コンテナのUI応答性のカテゴリーで使用するための応答グリッドを作成します。

<divクラス= "UI-グリッド-b UI応答性">

»をお試しください