6.3. body 部分¶

本章では、 body 部分の作成について説明します。

画面を構成する 4 つのパーツ で説明したとおり、 body 部分には以下を配置します。

• 画面タイトル
• ツールバー
• コンテンツエリア

これらは、 intra-mart Accel Platform で提供する UIモジュール を使って配置してください。 従来よりも効率よく画面開発を行えます。

本章では、全体で利用する UI モジュールを説明のあと、画面に配置する順番に説明します。

• 6.3.1. UIモジュール
• 6.3.2. 画面タイトル
  • 6.3.2.1. 画面タイトルの HTML ソース
• 6.3.3. ツールバー
  • 6.3.3.1. ツールバーの構成
  • 6.3.3.2. ツールバー実装例
    • 6.3.3.2.1. 配置内容
    • 6.3.3.2.2. HTMLコーディング
    • 6.3.3.2.3. 指定内容まとめ
  • 6.3.3.3. 処理リンク／処理アイコン配置方法まとめ
    • 6.3.3.3.1. 1 アイコン
    • 6.3.3.3.2. 2 アイコン＋文字リンク
    • 6.3.3.3.3. 3 文字リンク
    • 6.3.3.3.4. 4 タブアイコン
    • 6.3.3.3.5. 5 文字列
    • 6.3.3.3.6. 6 区切り線
• 6.3.4. コンテンツエリア
  • 6.3.4.1. 見出し
  • 6.3.4.2. テーブル
    • 6.3.4.2.1. 入力フォームのテーブル
    • 6.3.4.2.2. 一覧テーブル
    • 6.3.4.2.3. 検索条件／詳細検索
    • 6.3.4.2.4. セル内の位置／文字寄せ（align）
    • 6.3.4.2.5. サイズ指定方法
    • 6.3.4.2.6. imuiListTable を使わない場合のソート順
  • 6.3.4.3. 入力フォーム
    • 6.3.4.3.1. 入力フォーム全体
    • 6.3.4.3.2. 入力フォーム部品
    • 6.3.4.3.3. 入力フォーム部品の基本ルール
    • 6.3.4.3.4. 入力ヒント（ placeholder ) の表示
    • 6.3.4.3.5. Tab キーによる移動順序（ tabindex )
    • 6.3.4.3.6. 文字寄せ（ align ）
    • 6.3.4.3.7. 必須入力の表記方法
  • 6.3.4.4. ボタン
    • 6.3.4.4.1. imuiButton と CSS クラスでボタン作成
    • 6.3.4.4.2. ボタンのサイズ種類と CSS クラス
    • 6.3.4.4.3. ボタン配置
  • 6.3.4.5. 処理リンク／処理アイコン
    • 6.3.4.5.1. 配置ルール
    • 6.3.4.5.2. 処理アイコンの表現方法と実装例
    • 6.3.4.5.3. 文字リンクの CSS クラス
  • 6.3.4.6. エンターキー押下時のフォームの動作
    • 6.3.4.6.1. form のサブミット方法
    • 6.3.4.6.2. エンターキー押下時にサブミットさせる
  • 6.3.4.7. アラートとコンファーム
    • 6.3.4.7.1. 実装方法
    • 6.3.4.7.2. imuiAlert 、 imuiConfirm と messageDialog の違い
    • 6.3.4.7.3. ボタン配置
    • 6.3.4.7.4. ダイアログのタイトル
    • 6.3.4.7.5. 表示アイコン
    • 6.3.4.7.6. メッセージルール