首頁 > web前端 > html教學 > UI插件【B-JUI页面id唯一】_html/css_WEB-ITnose

UI插件【B-JUI页面id唯一】_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:17:36
原創
1619 人瀏覽過

页面结构

B-JUI仅有一个主页面(document),框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上,外部页面则通过iframe嵌入主页面。

主页面结构(仅body部分)

主页面由上(页头)、中左(导航菜单)、中右(工作区)、下(页脚)四部分组成,其中左侧导航菜单可收缩。结构如下:

<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>
登入後複製

子页面(即页面片段[后面简称:页片])结构

页片通常由两部分组成,也可以只保留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-pageHeader\bjui-headBar\bjui-footBar)高度。

data-layout-h 属性值不等于0时,该容器高度为本页片总高度减去属性值。

需要自定义固定元素(块级元素有效),请为该元素添加属性data-layout-fixed="true"

因为本框架默认所有内容都位于一个Document中,所以为元素命名ID的时候需要做到唯一性,如果确实不可避免的会出现有重复ID的现象,需要操作当前页片的元素时,尽量用:

$.CurrentNavtab.find('#dom-id'),在当前标签工作区中查找指定ID的元素。

或 $.CurrentDialog.find('#dom-id'),在当前弹窗中查找指定ID的元素。


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板