ホームページ  >  記事  >  ウェブフロントエンド  >  UIプラグイン[B-JUIページIDは一意です]_html/css_WEB-ITnose

UIプラグイン[B-JUIページIDは一意です]_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:17:361595ブラウズ

ページ構造

B-JUI にはメイン ページ (ドキュメント) が 1 つだけあり、フレーム内のすべてのサブページは Ajax を通じて取得され、ページ フラグメントとしてメイン ページに埋め込まれます。 iフレーム。

メインページの構造(本文部分のみ)

メインページは、上部(ヘッダー)、中央左(ナビゲーションメニュー)、中央右(ワークスペース)、下部(フッター)の4つの部分で構成され、そのうち左側はナビゲーション メニューは折りたたむことができます。構造は次のとおりです。

<header class="bjui-header" id="bjui-header">    <!-- 页头 --></header><div class="bjui-leftside" id="bjui-leftside">    <!-- 导航菜单 --></div><div id="bjui-container">    <!-- 工作区 --></div>

<footer class="bjui-footer" id="bjui-footer">    <!-- 页脚 --></footer>

サブページ (つまり、ページフラグメント [以下、ページ]) の構造

ページは通常 2 つの部分で構成されます。 bjui-pageContent 部分。ここで、 bjui -pageContent 部分は、bjui-headBar (上部ツールバー) および bjui-footBar (下部ツールバー) ではオプションです。構造は次のとおりです。

<div class="bjui-pageHeader">

  <!-- 顶部模块[如:功能按钮、搜索面板] --></div><div class="bjui-pageContent">    <div class="bjui-headBar">        <!-- 顶部工具条 -->    </div>    <div data-layout-h="0">        <!-- 内容区 -->    </div>    <div class="bjui-footBar">        <!-- 底部工具条  -->    </div></div>

data-layout-h 属性は、コンテナがページ アダプティブ レイアウトであることを示します。値が 0 の場合、B-JUI はコンテナの高さを自動的に割り当てます。 : このページ スライスの合計の高さから、このページ スライス内の固定要素 (bjui-pageHeaderbjui-headBarbjui-footBar) の高さを引いた値。

data-layout-h 属性値が 0 に等しくない場合、コンテナの高さは、このページの合計の高さから属性値を引いたものになります。

固定要素をカスタマイズする必要がある場合 (ブロックレベルの要素は有効です)、属性 data-layout-fixed="true" を要素に追加してください

デフォルトでは、このフレームワーク内のすべてのコンテンツは次の場所にあるためですドキュメントなので、要素 ID に名前を付けます。一意である必要がある場合、ID の重複が避けられず、現在のページの要素を操作する必要がある場合は、次を使用してみてください:

$.CurrentNavtab.find('#dom-id' )、現在のラベル ワークスペースで指定された ID を持つ要素を検索します。

または $.CurrentDialog.find('#dom-id') は、現在のポップアップ ウィンドウで指定された ID を持つ要素を検索します。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。