UI插件【B-JUI页面id唯一】

页面结构

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的元素。

时间: 2024-11-29 05:47:59

UI插件【B-JUI页面id唯一】的相关文章

【UI插件】简单的日历插件(下)—— 学习MVC思想

前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么就应该考虑其它UI库的接入问题 这个意思就是,我们的系统中所有UI插件应该有一些统一行为,我们如果希望统一为所有的插件加一点什么东西,需要有位置可加 这个意味着,可能我们所有的插件需要继承至一个抽象的UI类,并且该类提供了通用的几个事件点 ② 上次做的日历插件虽然说是简单,其耦合还是比较严重的(其实

第七章(插件的使用和写法)(7.4 jQuery UI 插件 7.5 管理Cookie的插件 --- Cookie)

7.4 jQuery UI 插件 7.4.1 jQuery UI 简介 jQuery UI 主要分为3个部分,交互.微件和效果差: ? 交互.这里都是一些与鼠标交互相关的内容,包括拖动(Draggable).置放(Droppable).缩放(Resizable).选择(Selectable)和排序(Sortable)等待.微件(Widget)中有部分是基于这些交互组件来制作的.此库需要一个 jQuery UI 核心库 ----- ui.core.js 支持. ? 微件.这里主要是一些界面的扩展.

使用jQuery UI插件实现切换主题功能——经验小结

最近为了美化页面,想在项目中加入主题切换的功能,网上查了好久,决定使用jQuery UI插件来实现,之所以要使用jQuery UI,是因为它自带了很多种主题包,只需下载引入即可使用,方便快捷.具体操作步骤如下: 1. 下载主题包 首先来看下jQuery UI提供的主题包:http://jqueryui.com/themeroller/ 里面的主题各式各样,还可以自定义主题,挑选合适的主题包下载,这里选取前4个, 目前最新版本是1.12.1,这里选用1.10.4版本,个人感觉这个版本比较好用,下载

jQuery 常用插件和UI插件 总结笔记

1. jQuery 常用插件 (1). 表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options});其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. Jquery Validate 验证规则 (1)required:true 必输字段 (2)remote:"check.

怎么实现在jenkens页面配置sonar,以及如何利用cobertura插件实现sonar页面显示测试覆盖率

最近我在工作中遇到需要给项目中每个模块配置Sonarqube,来看看测试用例覆盖的情况.在这个过程中遇到了一些问题,也查了很多资料.现在记录一下具体应该怎么配置. 先展示一下实现的效果: 图一 It will show: 图二 现在来看看具体配置: 要enable Sonarqube, 需在 job --> configure --> Post-build Actions 配置Branch 和 JDK 信息: 图三 配置好了以后,SonarQube 可以在页面上显示出来了,点击进去,效果图:[

利用Chrome插件向指定页面植入js,劫持 XSS

资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js,劫持 XSS,一些猥琐的想法与实践 2013-07-08      0个评论       收藏    我要投稿 0x00 Chrome插件--------------------------这个想法是昨天看到@紫梦芊 的帖子想起来的.想法如下:Chrome插件是可以通过manifest.json的控制,向指

Unreal Engine 4 Radiant UI 插件入门教程

本篇章前提要求:在UE4上安装了Radiant UI插件.如果没有安装,请找其它教程(或者是笔者的其它的教程,目前正在写). 本教程的目的:探讨如何从网页元素中调用蓝图中的内容: 第一步: 写一个网页,大致内容为: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-

target-densitydpi=device-dpi会使其他ui插件布局变小

target-densitydpi=device-dpi会使其他ui插件布局变小 东哥说:不用rem了,把meta改成这样<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">就可以直接上px... 这句target-densitydpi=device-dpi是什么意思呢? target-densitydpi这个私有属性,它表示目

使用`html-webpack-plugin`插件配置启动页面

由于使用`--contentBase`指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用`html-webpack-plugin`插件配置启动页面.1. 运行`cnpm i html-webpack-plugin --save-dev`安装到开发依赖2. 修改`webpack.config.js`配置文件如下:``` // 导入处理路径的模块 var path = require('path'); // 导入自动生成HTMl