精华内容
下载资源
问答
  • 菜单页面:数据菜单页面的呈现,菜单列表的呈现,数据的管理和删除

    在这里插入图片描述


    一、菜单管理设计说明


    1.1 业务设计说明

    菜单管理又称为资源管理,是系统资源对外的表现形式。本模块主要是实现对菜单进行添加、修改、查询、删除等操作。其表设计语句如下:

    CREATE TABLE `sys_menus` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(50) DEFAULT NULL COMMENT '资源名称',
      `url` varchar(200) DEFAULT NULL COMMENT '资源URL',
      `type` int(11) DEFAULT NULL COMMENT '类型     1:菜单   2:按钮',
      `sort` int(11) DEFAULT NULL COMMENT '排序',
      `note` varchar(100) DEFAULT NULL COMMENT '备注',
      `parentId` int(11) DEFAULT NULL COMMENT '父菜单ID,一级菜单为0',
      `permission` varchar(500) DEFAULT NULL COMMENT '授权(如:sys:user:create)',
      `createdTime` datetime DEFAULT NULL COMMENT '创建时间',
      `modifiedTime` datetime DEFAULT NULL COMMENT '修改时间',
      `createdUser` varchar(20) DEFAULT NULL COMMENT '创建用户',
      `modifiedUser` varchar(20) DEFAULT NULL COMMENT '修改用户',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='资源管理';
    

    菜单表与角色表是 多对多 的关系,在表设计时,多对多关系通常由中间表(关系表)进行维护,如图所示:
    在这里插入图片描述
    基于角色菜单表的设计,其角色和菜单对应的关系数据要存储到关系表中,其具体存储形式,如图所示:
    在这里插入图片描述
    菜单与角色的关系表脚本设计如下:

    CREATE TABLE `sys_role_menus` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `role_id` int(11) DEFAULT NULL COMMENT '角色ID',
      `menu_id` int(11) DEFAULT NULL COMMENT 'ID',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='角色与菜单对应关系';
    

    1.2 原型设计说明

    基于用户需求,实现菜单静态页面(html/css/js),通过静态页面为用户呈现菜单模块的基本需求实现。
    当在主页左侧菜单栏,点击菜单管理时,在主页内容呈现区,呈现菜单列表页面,如图所示:在这里插入图片描述
    当在菜单列表页面点击添加按钮时,异步加载菜单编辑页面,并在列表内容呈现区,呈现菜单编辑页面,如图所示:

    在这里插入图片描述
    在菜单编辑页面选择上级菜单时,异步加载菜单信息,并以树结构的形式呈现上级菜单,如图所示:
    在这里插入图片描述
    说明: 假如客户对此原型进行了确认,后续则可以基于此原型进行研发。

    1.3 API设计说明

    菜单管理业务后台API分层架构及调用关系如图所示:
    在这里插入图片描述
    说明:分层目的主要将复杂问题简单化,实现各司其职,各尽所能。


    二、菜单管理列表页面呈现


    2.1 业务时序分析

    菜单管理页面的加载过程,其时序分析如图所示:
    在这里插入图片描述

    2.2 服务端实现

    2.2.1 Controller实现

    • 业务描述与设计实现

    基于菜单管理的请求业务,在PageController中添加doMenuUI方法,用于返回菜单列表页面。

    • 关键代码设计与实现

    第一步:在PageController中定义返回菜单列表的方法。代码如下:

    @RequestMapping("menu/menu_list")
    public String doMenuUI() {
    	return "sys/menu_list";
    }
     
    

    第二步:在PageController中基于rest风格的url方式优化返回UI页面的方法。找出共性进行提取,例如:

    @RequestMapping("{module}/{moduleUI}")
    public String doModuleUI(@PathVariable String moduleUI) {
    		return "sys/"+moduleUI;
    }
    

    2.3 客户端实现

    2.3.1 首页菜单事件处理

    • 业务描述与设计实现

    首先准备菜单列表页面(/templates/pages/sys/menu_list.html),然后在starter.html页面中点击菜单管理时异步加载菜单列表页面。

    • 关键代码设计与实现

    找到项目中的starter.html页面,页面加载完成以后,注册菜单管理项的点击事件,当点击菜单管理时,执行事件处理函数。关键代码如下:

    $(function(){doLoadUI("load-menu-id","menu/menu_list")
    })
    

    说明: 对于doLoadUI函数,假如在starter.html中已经定义,则无需再次定义.

    function doLoadUI(id,url){
     	$("#"+id).click(function(){
        		$("#mainContentId").load(url);
       });
    }
    

    其中,load函数为jquery中的ajax异步请求函数。

    2.3.2 菜单列表页面

    • 业务描述与设计实现

    本页面呈现菜单信息时要以树结构形式进行呈现。此树结构会借助jquery中的treeGrid插件进行实现,所以在菜单列表页面需要引入treeGrid相关JS。但是,具体的treeGrid怎么用可自行在网上进行查询(已比较成熟)。

    • 关键代码设计与实现:

    关键JS引入(menu_list.html),代码如下:

    <script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
    <script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"></script>
    <script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>
    

    三、菜单管理列表数据呈现


    3.1 数据架构分析

    菜单列表页面加载完成,启动菜单数据异步加载操作,本次菜单列表页面要呈现菜单以及2息,其数据查询时,数据的封装及传递过程,如图所示:
    在这里插入图片描述
    说明:本模块将从数据库查询到的菜单数据封装到map对象,一行记录一个map对象,其中key为表中的字段(列)名,值为字段(列)对应的值。

    数据加载过程其时序分析,如图所示:
    在这里插入图片描述

    3.2 服务端关键业务及代码实现

    3.2.1 Dao接口实现

    • 业务描述及设计实现

    通过数据层对象,基于业务层参数,查询菜单以及上级菜单信息(要查询上级菜单名)。

    • 关键代码分析及实现

    第一步:定义数据层接口对象,通过此对象实现数据库中菜单数据的访问操作。关键代码如下:

    @Mapper
    public interface SysMenuDao {
    }
    

    第二步:在SysMenuDao接口中添加findObjects方法,基于此方法实现菜单数据的查询操作。代码如下:

    List<Map<String,Object>> findObjects();
    

    说明: 一行记录映射为一个map对象,多行存储到list。
    思考: 这里为什么使用map存储数据,有什么优势劣势?

    3.2.2 Mapper文件实现

    • 业务描述及设计实现

    基于Dao接口创建映射文件,在此文件中通过相关元素(例如select)描述要执行的数据操作。

    • 关键代码设计及实现

    第一步:在映射文件的设计目录中添加SysMenuMapper.xml映射文件,代码如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
      "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.cy.pj.sys.dao.SysMenuDao">
      
    </mapper>
    

    第二步:在映射文件中添加id为findObjects的元素,实现菜单记录查询。我们要查询所有菜单以及菜单对应的上级菜单名称。关键代码如下:

    <select id="findObjects" resultType="map">
             
              <!-- 方案1
              select c.*,p.name parentName
              from sys_menus c left join sys_menus p
              on c.parentId=p.id 
              -->
              <!-- 方案2 -->
              select c.*,(
                        select p.name 
                        from sys_menus p
                        where c.parentId=p.id
                        ) parentName
              from sys_menus c
     </select>
    

    说明:自关联查询分析,如图所示:
    在这里插入图片描述

    3.2.3 Service接口及实现类

    • 业务描述与设计实现

    在菜单查询中,业务层对象主要是借助数据层对象完成菜单数据的查询。后续还可以基于AOP对数据进行缓存,记录访问日志等。

    • 关键代码设计及实现

    第一步:定义菜单业务接口及方法,暴露外界对菜单业务数据的访问,其代码参考如下:

    package com.cy.pj.sys.service;
    public interface SysMenuService {
    	 List<Map<String,Object>> findObjects();
    }
    

    第二步:定义菜单业务接口实现类,并添加菜单业务数据对应的查询操作实现,其代码参考如下:

    package com.cy.pj.sys.service.impl;
    @Service
    public class SysMenuServiceImpl implements SysMenuService{
    	  @Autowired
          private SysMenuDao sysMenuDao;
    	  @Override
    	  public List<Map<String, Object>> findObjects() {
    		List<Map<String,Object>> list=
    			sysMenuDao.findObjects();
    		if(list==null||list.size()==0)
    		throw new ServiceException("没有对应的菜单信息");
    		return list;
    }
    

    3.2.4 Controller类实现

    • 业务描述与设计实现

    控制层对象主要负责请求和响应数据的处理,例如,本模块通过业务层对象执行业务逻辑,再通过VO对象封装响应结果(主要对业务层数据添加状态信息),最后将响应结果转换为JSON格式的字符串响应到客户端。

    • 关键代码设计与实现

    定义Controller类,并将此类对象使用Spring框架中的@Controller注解进行标识,表示此类对象要交给Spring管理。然后基于@RequestMapping注解为此类定义根路径映射。代码参考如下:

    package com.cy.pj.sys.controller;
    @RequestMapping("/menu/")
    @RestController
    public class SysMenuController {
    }
    

    说明: 这里的@RestController注解等效于在类上同时添加了@Controller和 @ResponseBody注解.
    在Controller类中添加菜单查询处理方法,代码参考如下:

    @RequestMapping("doFindObjects")
    public JsonResult doFindObjects() {
    	return new  JsonResult(sysMenuService.findObjects());
    }
     
    

    3.3 客户端关键业务及代码实现

    3.3.1 菜单列表信息呈现

    • 业务描述与设计实现

    菜单页面加载完成以后,向服务端发起异步请求加载菜单信息,当菜单信息加载完成需要将菜单信息呈现到列表页面上。

    • 关键代码设计与实现

    第一步:在菜单列表页面引入treeGrid插件相关的JS。

    <script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
    <script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"></script>
    <script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>
    

    第二步:在菜单列表页面,定义菜单列表配置信息,关键代码如下:

    var columns = [
    {
    	field : 'selectItem',
    	radio : true
    },
    {
    	title : '菜单ID',
    	field : 'id',
    	align : 'center',
    	valign : 'middle',
    	width : '80px'
    },
    {
    	title : '菜单名称',
    	field : 'name',
    	align : 'center',
    	valign : 'middle',
    	width : '130px'
    },
    {
    	title : '上级菜单',
    	field : 'parentName',
    	align : 'center',
    	valign : 'middle',
    	sortable : true,
    	width : '100px'
    },
    {
    	title : '类型',
    	field : 'type',
    	align : 'center',
    	valign : 'middle',
    	width : '70px',
    	formatter : function(item, index) {
    		if (item.type == 1) {
    			return '<span class="label label-success">菜单</span>';
    		}
    		if (item.type == 2) {
    			return '<span class="label label-warning">按钮</span>';
    		}
    	}
    }, 
    {
    	title : '排序号',
    	field : 'sort',
    	align : 'center',
    	valign : 'middle',
    	sortable : true,
    	width : '70px'
    }, 
    {
    	title : '菜单URL',
    	field : 'url',
    	align : 'center',
    	valign : 'middle',
     
    	width : '160px'
    }, 
    {
    	title : '授权标识',//要显示的标题名称
    	field : 'permission',//json串中的key
    	align : 'center',//水平居中
    	valign : 'middle',//垂直居中
    	sortable : false //是否排序
    } ];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)
    

    第三步:定义异步请求处理函数,代码参考如下:

    function doGetObjects(){//treeGrid
    	//1.构建table对象(bootstrap框架中treeGrid插件提供)
    	var treeTable=new TreeTable(
    			"menuTable",//tableId
    			"menu/doFindObjects",//url
    			 columns);
    	//设置从哪一列开始展开(默认是第一列)
    	//treeTable.setExpandColumn(2);
    	//2.初始化table对象(底层发送ajax请求获取数据)
    	treeTable.init();//getJSON,get(),...
    }
    

    第四步:页面加载完成,调用菜单查询对应的异步请求处理函数,关键代码如下:

    $(function(){
    	doGetObjects();
    })
    

    四、菜单管理删除操作实现


    4.1 业务时序分析

    基于用户在列表页面上选择的的菜单记录ID,执行删除操作,本次删除业务实现中,首先要基于id判断当前菜单是否有子菜单,假如有子菜单则不允许删除,没有则先删除菜单角色关系数据,然后再删除菜单自身信息。其时序分析如图所示:
    在这里插入图片描述

    4.2 服务端关键业务及代码实现

    4.2.1 Dao接口实现

    • 业务描述及设计实现

    数据层基于业务层提交的菜单记录id,删除菜单角色关系以及菜单数据,菜单自身记录信息。

    • 关键代码设计及实现

    第一步:创建SysRoleMenuDao并定义基于菜单id删除关系数据的方法,关键代码如下:

    @Mapper
    public interface SysRoleMenuDao {
    	int deleteObjectsByMenuId(Integer menuId);
    }
    

    第二步:在SysMenuDao中添加基于菜单id查询子菜单记录的方法。代码参考如下:

    int getChildCount(Integer id);
    

    第三步:在SysMenuDao中添加基于菜单id删除菜单记录的方法。代码参考如下:

    int deleteObject(Integer id);
    

    4.2.2 Mapper文件实现

    • 业务描述及设计实现

    在SysRoleMenuDao,SysMenuDao接口对应的映射文件中添加用于执行删除业务的delete元素,然后在元素内部定义具体的SQL实现。

    • 关键代码设计与实现

    第一步:创建SysRoleMenuMapper.xml文件并添加基于菜单id删除关系数据的元素,关键代码如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
      "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.cy.pj.sys.dao.SysRoleMenuDao">
    <delete id="deleteObjectsByMenuId"
                 parameterType="int">
              delete from sys_role_menus
              where menu_id=#{menuId}
         </delete>
    </mapper>
    

    第二步:在SysMenuMapper.xml文件中添加基于id统计子菜单数量的元素,关键代码如下:

    <select id="getChildCount"
                 parameterType="int"
                 resultType="int">
              select count(*)
              from sys_menus
              where parentId=#{id}        
     </select>
    

    第三步:在SysMenuMapper.xml文件添加delete元素,基于带单id删除菜单自身记录信息,关键代码如下:

    <delete id="deleteObject">
       delete from sys_menus
       where id =#{id}
       
    </delete>
    

    4.2.3 Service接口及实现类

    • 业务描述与设计实现

    在菜单业务层定义用于执行菜单删除业务的方法,首先通过方法参数接收控制层传递的菜单id,并对参数id进行校验。然后基于菜单id统计子菜单个数,假如有子菜单则抛出异常,提示不允许删除。假如没有子菜单,则先删除角色菜单关系数据。最后删除菜单自身记录信息后并返回业务执行结果。

    • 关键代码设计与实现

    第一步:在SysMenuService接口中,添加基于id进行菜单删除的方法。关键代码如下:

    int deleteObject(Integer id);
    

    第二步:在SysMenuServiceImpl实现类中注入SysRoleMenuDao相关对象。关键代码如下:

    @Autowired
    private SysRoleMenuDao sysRoleMenuDao;
    

    第三步:在SysMenuServiceImpl实现类中添加删除业务的具体实现。关键代码如下:

    @Override
    public int deleteObject(Integer id) {
    	//1.验证数据的合法性
    	if(id==null||id<=0)
    	throw new IllegalArgumentException("请先选择");
    	//2.基于id进行子元素查询
    	int count=sysMenuDao.getChildCount(id);
    	if(count>0)
    	throw new ServiceException("请先删除子菜单");
    	//3.删除角色,菜单关系数据
    	sysRoleMenuDao.deleteObjectsByMenuId(id);
    	//4.删除菜单元素
    	int rows=sysMenuDao.deleteObject(id);
    	if(rows==0)
    	throw new ServiceException("此菜单可能已经不存在");
    	//5.返回结果
    	return rows;
    }
    

    4.2.4 Controller类实现

    • 业务描述与设计实现

    在菜单控制层对象中,添加用于处理菜单删除请求的方法。首先在此方法中通过形参接收客户端提交的数据,然后调用业务层对象执行删除操作,最后封装执行结果,并在运行时将响应对象转换为JSON格式的字符串,响应到客户端。

    • 关键代码设计与实现

    第一步:在SysMenuController中添加用于执行删除业务的方法。代码如下:

    @RequestMapping("doDeleteObject")
    public JsonResult doDeleteObject(Integer id){
    	sysMenuService.deleteObject(id);
    	return new JsonResult("delete ok");
    }
    

    第二步:启动tomcat进行访问测试,打开浏览器输入如下网址:

    http://localhost/menu/doDeleteObject?id=10
    

    4.3 客户端关键业务及代码实现

    4.3.1 菜单列表页面事件处理

    • 业务描述及设计实现

    用户在页面上首先选择要删除的元素,然后点击删除按钮,将用户选择的记录id异步提交到服务端,最后在服务端执行菜单的删除动作。

    • 关键代码设计与实现

    第一步:页面加载完成以后,在删除按钮上进行点击事件注册。关键代码如下:

    ...
    $(".input-group-btn")
    	   .on("click",".btn-delete",doDeleteObject)
    ...
    

    第二步:定义删除操作对应的事件处理函数。关键代码如下:

    function doDeleteObject(){
    	//1.获取选中的记录id
    	var id=doGetCheckedId();
    	if(!id){
    	  alert("请先选择");
    	  return;
    	}
       //2.给出提示是否确认删除
      if(!confirm("确认删除吗"))return;
    	//3.异步提交请求删除数据
    	var url="menu/doDeleteObject";
    	var params={"id":id};
    	$.post(url,params,function(result){
    		if(result.state==1){
    			alert(result.message);
    			$("tbody input[type='radio']:checked")
    	          .parents("tr").remove();
    		}else{
    			alert(result.message);
    		}
    	});
    }
    

    第三步:定义获取用户选中的记录id的函数。关键代码如下:

    function doGetCheckedId(){
    	//1.获取选中的记录
    	var selections=$("#menuTable")
    	//bootstrapTreeTable是treeGrid插件内部定义的jquery扩展函数
    	//getSelections为扩展函数内部要调用的一个方法
    	.bootstrapTreeTable("getSelections");
    	//2.对记录进行判定
    	if(selections.length==1)
    	return selections[0].id;
    }
    
    展开全文
  • Bootstrap-菜单按钮、导航

    千次阅读 2015-10-18 10:45:58
    下拉菜单(基本用法) /* html 里面的 role 属性是什么意思和用途,这是html5中的;role是表示元素扮演的角色,在这里就是这div;role = complementary意思就是扮演补足的角色 */ /* html 里面的 role 本质上是...

    下拉菜单(基本用法)

    /* html 里面的 role 属性是什么意思和用途,这是html5中的;role是表示元素扮演的角色,在这里就是这个div;role = complementary意思就是扮演补足的角色 */
    
    /* html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。*/
    
    /* role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button */
    
    /*比如,
    <div role="checkbox" aria-checked="checked"></div>
    辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。*/

    下拉菜单(下拉分隔线)

    在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<*li>,并且给这个<*li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码:

    /* 类名为divider */
    
    .dropdown-menu .divider {
      height: 1px;
      margin: 9px 0;
      overflow: hidden;
      background-color: #e5e5e5;
    }

    下拉菜单(菜单标题)

    通过添加“divider”可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题)

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li>
    
    /* 给标题的li添加一个dropdown-header,且不加上a标签 */

    下拉菜单(对齐方式)

    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

     <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
     /* pull-right的样式实现代码 */
     /* 两个类名都可:pull-right  dropdown-menu-right */
    
     .dropdown-menu.pull-right {
      right: 0;
      left: auto;
    }
    .dropdown-menu-right {
      right: 0;
      left: auto;
    }
    /*同时一定要为.dropdown添加float:leftcss样式。*/
    /* 该样式的作用是将dropdown盒子不是想原来的普通盒子一样具有整行特性,而是变成一个具有包裹性的盒子,尺寸随着子元素的改变而改变 */
    /* 所以可以用display:inline-block 和 display:table-cell代替 */
    
    .dropdown{
      float: left;
    }

    下拉菜单(菜单项状态)

    下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus):

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus {
      color: #262626;
      text-decoration: none;
      background-color: #f5f5f5;
    }
    
    /*  所以,当我们在li中添加了a标签后,其自动具有该样式 */

    下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名:

    按钮(按钮组)

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用

    对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。如下所示:

    <div class="btn-group">
      <button type="button" class="btn btn-default">
         <span class="glyphicon glyphicon-step-backward"></span>
      </button><button type="button" class="btn btn-default">
         <span class="glyphicon glyphicon-step-forward"></span>
      </button>
    </div>

    结果如图
    这里写图片描述

    按钮(按钮工具栏)

    在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组,如下图所示:
    这里写图片描述
    (注意:视图上每个按钮组之间用空格断开)

    Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,如下所示:

    /* 实现原理主要是让容器的多个分组“btn-group”元素进行浮动,并且组与组之前保持5px的左外距。代码如下: */
    
    /* 注意在”btn-toolbar”上清除浮动。 */
    
    <div class="btn-toolbar">
      <div class="btn-group">
        …
      </div>
      <div class="btn-group">
        …
      </div>
      <div class="btn-group">
        …
      </div>
      <div class="btn-group">
        …
      </div>
    </div>

    按钮组大小设置
    在介绍按钮一节中,我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整paddingfont-sizeline-heightborder-radius属性值来改变按钮大小。那么按钮组的大小,我们也可以通过类似的方法

    ☑ .btn-group-lg:大按钮组

    ☑ .btn-group-sm:小按钮组

    ☑ .btn-group-xs:超小按钮组

    只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组。

    按钮(嵌套分组)

    很多时候,我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。如下所示:
    这里写图片描述
    使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。如下所示:

    <div class="btn-group">
    <button class="btnbtn-default" type="button">首页</button>
    <button class="btnbtn-default" type="button">产品展示</button>
    <button class="btnbtn-default" type="button">案例分析</button>
    <button class="btnbtn-default" type="button">联系我们</button>
    <div class="btn-group">
       <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
       <ul class="dropdown-menu">
             <li><a href="##">公司简介</a></li>
             <li><a href="##">企业文化</a></li>
             <li><a href="##">组织结构</a></li>
             <li><a href="##">客服服务</a></li>
        </ul>
    </div>
    </div>
    
    /* 我们之前说过btn-group之间会有5px的左边距,但是那是在工具栏盒子下才有的属性
    .btn-toolbar .btn-group{
        margin-left:5px;
    } */
    
    /* 但是注意这里是btn-group 中嵌套btn-group*/
    

    按钮(垂直分组)

    前面看到的示例,按钮组都是水平显示的。但在实际运用当中,总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可

    <div class="btn-group-vertical">
    <button class="btnbtn-default" type="button">首页</button>
    <button class="btnbtn-default" type="button">产品展示</button>
    <button class="btnbtn-default" type="button">案例分析</button>
    <button class="btnbtn-default" type="button">联系我们</button>
    <div class="btn-group">
    /* 注意该段代码button的事件类型还是dropdown!! */
       <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
       <ul class="dropdown-menu">
          <li><a href="##">公司简介</a></li>
          <li><a href="##">企业文化</a></li>
          <li><a href="##">组织结构</a></li>
          <li><a href="##">客服服务</a></li>
    </ul>
    </div>
    </div>

    按钮(等分按钮)

    等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%,而按钮组里面的每个按钮平分整个容器宽度。例如,如果你按钮组里面有五个按钮,那么每个按钮是20%的宽度,如果有四个按钮,那么每个按钮是25%宽度,以此类推。

    等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名,如下所示:

    <div class="btn-wrap">
    <div class="btn-group btn-group-justified">
      <a class="btnbtn-default" href="#">首页</a>
      <a class="btnbtn-default" href="#">产品展示</a>
      <a class="btnbtn-default" href="#">案例分析</a>
      <a class="btnbtn-default" href="#">联系我们</a>
    </div>
    </div>

    这里写图片描述

    实现原理非常简单,把“btn-group-justified”模拟成表格(display:table),而且把里面的按钮模拟成表格单元格(display:table-cell)。

    特别声明:在制作等分按钮组时,请尽量使用<*a>标签元素来制作按钮,因为使用<*button>标签元素时,使用display:table在部分浏览器下支持并不友好。

    按钮下拉菜单

    <div class="btn-group">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
          <ul class="dropdown-menu">
              <li><a href="##">按钮下拉菜单项</a></li>
              <li><a href="##">按钮下拉菜单项</a></li>
              <li><a href="##">按钮下拉菜单项</a></li>
              <li><a href="##">按钮下拉菜单项</a></li>
          </ul>
    
    /*  ----------------注意下面这段代码是后来添加的----------------- */
    
        <div class="btn-group">
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
              <ul class="dropdown-menu">
                  <li><a href="##">按钮下拉菜单项</a></li>
                  <li><a href="##">按钮下拉菜单项</a></li>
                  <li><a href="##">按钮下拉菜单项</a></li>
                  <li><a href="##">按钮下拉菜单项</a></li>
              </ul>
        </div>
    
        /* 这是因为前面的button加上了dropdown-toggle类,这说明这种button只能是用在div.btn-group里面 */
    
        /* 而不能与div.btn-group盒子同级使用,该盒子可以和普通的btn同级使用 */
    
        /*  -------------注意上面这段代码是后来添加的--------------- */
    /div>
    

    按钮的向下向上三角形

    按钮的向下三角形,我们是通过在标签中添加一个“”标签元素,并且命名为“caret”:

    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

    向上弹起的下拉菜单

    有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示,只需要在“btn-group”上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可)

    注意:如果需要弹出的列表右对齐,那么可以在ul的dropdown-menu上追加pull-right 或者dropdown-menu-right。


    特别声明:单个的按钮或者链接点击弹出下拉菜单——适用于:

    1. input的搜索提示
    2. 某个按钮点击下拉(注意是单个按钮)

    多个按钮排列一般用于按钮图标等等的集合,所以可以使用a或者button作为标签就可以。

    而导航具有特殊的语义,所以用li,最能体现,所以用到导航就用导航的结构,而不要用btn等等,失去语义。

    所以会有自适应按钮和自适应导航的区别


    导航(基础样式)

    导航(标签形tab导航)

    标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。

    标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名

    <ul class="nav nav-tabs">
         <li><a href="##">Home</a></li>
         <li><a href="##">CSS3</a></li>
         <li><a href="##">Sass</a></li>
         <li><a href="##">jQuery</a></li>
         <li><a href="##">Responsive</a></li>
    </ul>

    一般情况之下,选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class=”active””即可

    除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class=”disabled””即可

         <li class="disabled"><a href="##">Responsive</a></li>

    导航(胶囊形(pills)导航)

    胶囊形(pills)导航听起来有点别扭,因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示,并带有圆角效果。其实现方法和“nav-tabs”类似,同样的结构,只需要把类名“nav-tabs”换成“nav-pills”即可。

    <ul class="nav nav-pills">
          <li class="active"><a href="##">Home</a></li>
          <li><a href="##">CSS3</a></li>
          <li><a href="##">Sass</a></li>
          <li><a href="##">jQuery</a></li>
          <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

    这里写图片描述

    导航(垂直堆叠的导航)

    在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可

    <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="##">Home</a></li>
         <li><a href="##">CSS3</a></li>
         <li><a href="##">Sass</a></li>
         <li><a href="##">jQuery</a></li>
         <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

    自适应导航(使用)

    /* 核心新技巧:父元素不必设置为display:table,*/
    
     /*  将子元素设置为display:table-cell,将子元素的宽度设置为任何一个值除了auto,auto将重置之前的所有值并且归于默认状态,
       我们实现的效果是每个元素的“padding”都一样,留白都一样的值,如果是居中的文字则是左右的留白,形成了自适应相同padding的导航特有样式 */
    
    /*要实现绝度的平分宽度则需要将父容器的display:table*/

    自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用

    <ul class="nav nav-tabs nav-justified">
         <li class="active"><a href="##">Home</a></li>
         <li><a href="##">CSS3</a></li>
         <li><a href="##">Sass</a></li>
         <li><a href="##">jQuery</a></li>
         <li><a href="##">Responsive</a></li>
    </ul>

    这里写图片描述

    导航加下拉菜单(二级导航)

    前面介绍的都是使用Bootstrap框架制作一级导航,但很多时候,在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul,使用前面介绍下拉菜单的方法就可以:

    <ul class="nav nav-pills">
         <li class="active"><a href="##">首页</a></li>
         <li class="dropdown">
            <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li></ul>
         </li>
         <li><a href="##">关于我们</a></li>
    </ul>

    面包屑式导航

    面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)。在Bootstrap框架中面包屑也是一个独立模块组件:
    使用方式就很简单,为ol加入breadcrumb类:

    <ol class="breadcrumb">
      <li><a href="#">首页</a></li>
      <li><a href="#">我的书</a></li>
      <li class="active">《图解CSS3》</li>
    </ol>
    
    /* active的作用是:a标签是将文字的颜色改为蓝色,而没a标签的时候,文字颜色为黑色,加上active类名后,文字颜色变为灰色!!  */
    展开全文
  • 摇杆菜单跳转页面

    2018-08-16 15:26:09
    菜单按钮,摇杆原理,上下左右按照圆的轨迹任意活动,在四个点的位置可以跳转
  • 配置helloword菜单【系统管理】-【菜单管理】 其中前端组件配置相对src/views/目录下的 目录名+文件名 例如页面src/views/jeecg/helloworld.vue 前端组件配置 jeecg/helloworld 用户角色授权【系统管理】-【角色...

    一.菜单访问权限控制

    配置helloword菜单【系统管理】-【菜单管理】 输入图片说明

    • 其中前端组件配置相对src/views/目录下的 目录名+文件名
    • 例如页面src/views/jeecg/helloworld.vue 前端组件配置 jeecg/helloworld

    输入图片说明 用户角色授权【系统管理】-【角色管理】-授权 输入图片说明输入图片说明 点击菜单访问页面展示Hello World!

    二.表单访问权限控制

    禁用控制用法二

    一、用法

    (1)页面引入工具js

    import { disabledAuthFilter } from "@/utils/authFilter"
    

    (2)methods方法中实现:

    isDisabledAuth(code){
          return disabledAuthFilter(code);
        },
    

    输入图片说明

    输入图片说明

    (2)权限控制代码示例:

    
    <a-input-number :disabled="isDisabledAuth('name')"   v-decorator="[ 'days', {}]" />
    

    二、权限配置:

    输入图片说明

    三、使用说明

    • :disabled="isDisabledAuth('name')"调用方法disabledAuth,方法参数“name”为授权标识,该方法根据授权规则返回true/false,控制是否禁用
    • 权限编码在【系统管理--菜单管理】中配置,添加按钮类型的菜单数据,授权标识配置值“name”,策略选择可编辑,状态选择有效
    • 控制规则:
    • (1)菜单权限中若没有对应指令编码的配置,则不进行禁用控制,
    • (2)权限配置无效状态时,则不进行权限控制,有效状态时进行控制
    • (3)策略:可编辑,未授权时控件禁用,授权后可编辑

    四、流程节点权限

    (1)说明:

    • 节点权限配置优先级高于菜单权限配置
    • 节点权限应用于使用组件方式加载的附加表单页面,并对附加表单页面进行权限控制
    • 显示控制用法见上面用法描述
    • 节点权限是通过 props: ['formData'],来传递给节点表单页面的,因此页面一定要定义这个,否则,节点配置的权限不生效,节点表单开发方法见【流程节点对接表单页面开发方法】

    • 权限配置无效状态时,则不进行权限控制,有效状态时进行控制

    • (2)methods方法中实现:
      isDisabledAuth(code){
            return disabledAuthFilter(code,this.formData);
          },
      

    (2)权限配置: 在【流程管理-流程设计】中找到需要配置的流程,进入【流程配置-流程节点】选择需要进行权限控制的节点, 点击【更多-权限设置】,新增/编辑 来配置权限。

    输入图片说明

    三.页面按钮权限用法

    页面按钮权限用法

    1.前端页面通过使用指令 v-has

    <a-button @click="handleAdd" v-has="'user:add'" type="primary" icon="plus">添加用户</a-button>
    

    2.后台进入菜单管理页面配置按钮权限菜单 输入图片说明

    3.进入角色管理授权按钮(授权后即可看见按钮) 输入图片说明

    四.JAVA访问权限控制

    1.后台请求权限控制,通过Shiro注解 @RequiresPermissions

    @RequestMapping(value = "/add", method = RequestMethod.POST)
    @RequiresPermissions("user:add")
    public Result<SysUser> add(@RequestBody JSONObject jsonObject) {
    

    2.后台进入菜单管理页面配置访问权限标识(选择按钮类型) (配置方式与按钮权限一样,即同一个授权标识,可以同时控制后台请求和前台按钮显示控制) 输入图片说明

    3.进入角色管理授权访问权限(授权后即可访问该请求) 输入图片说明

    五.数据权限规则篇

     

    1、功能说明

    列表数据权限,主要通过数据权限控制行数据,让不同的人有不同的查看数据规则; 比如: 销售人员只能看自己的数据;销售经理可以看所有下级销售人员的数据;财务只看金额大于5000的数据等等;

    2、数据权限分两大类型

    序号类型规则字段区别说明
    1编码方式规则字段是驼峰写法,对应mybatis实体的字段编码模式(通过代码生成器生成代码)
    2Online方式规则字段是下划线写法,对应表的字段Online模式(在线表单模式,无代码)
    规则字段配置说明(非常重要): 
    ①条件规则:大于/大于等于/小于/小于等于/等于/包含/模糊/不等于
    ②规则值:指定值 ( 固定值/系统上下文变量 )
    

    3、数据权限规则篇

    1.当前用户上下文变量

    注意:数据权限配置,规则值可以填写系统上下文变量(当前登录人信息),从而根据当前登录人信息进行权限控制。

    编码描述
    sys_user_code当前登录用户登录账号
    sys_user_name当前登录用户真实名称
    sys_date当前系统日期
    sys_time当前系统时间
    sys_org_code当前登录用户部门编号
    sysMultiOrgCode当前登录用户拥有的所有机构编码,逗号分隔

    规则值,配置写法如下:#{sys_user_code}

    2.建表规范(系统标准字段)

    如果需要通过当前登录人,进行数据权限控制,则业务表必须有以下系统标准字段;数据添加和编辑,jeecg会通过拦截器自动注入操作人的信息。 比如:创建人,创建时间,创建人所属部门、创建人所属公司,有了这些标准字段,就可以通过当前登录人进行数据隔离控制;

    字段英文名字段中文名
    CREATE_BY系统用户登录账号
    CREATE_NAME系统用户真实名字
    SYS_ORG_CODE登录用户所属部门

    3.组织机构邮编规则

    JEECG组织机构支持无限层级,上下级关系通过组织机构编码实现,组织机构编码规则类似邮编方式,看下图; 邮编规则优势: 邮编规则,上下级编码固定规律,便于定位下级和上级; 输入图片说明

    六.系统数据权限用法

     

    1、功能说明

    列表数据权限,主要通过数据权限控制行数据,让不同的人有不同的查看数据规则; 比如: 销售人员只能看自己的数据;销售经理可以看所有下级销售人员的数据;财务只看金额大于5000的数据等等;

    2、使用说明 (有两种使用方法,以下说明以用户管理列表查询示例 配置数据规则:只查询用户账号带1的用户

    方法A步骤如下:

    • A-1.新增权限菜单:进入【系统管理】-->【菜单管理】界面 新增一个权限菜单(如下图)

    输入图片说明

    • A-2.配置数据权限规则:找到上述1新增的菜单,点击操作列更多中的数据规则,配置,只查询用户账号带1的用户(如下图) 输入图片说明
    • A-3.角色授权:进入【系统管理】-->【角色管理】界面找到当前用户对应的角色,点击 更多->授权 操作,右侧弹出框中找到上述1菜单,点击后勾选权限规则,保存(如下图) 输入图片说明
    • A-4.在后台请求方法上加注解@PermissionData在方法上加注解是为了提高系统运行效率,这样就可以指定请求走权限过滤的逻辑,而非一棍子打死,让所有请求都去筛选一下权限(如下图) 输入图片说明
    • A-5.测试,访问用户管理界面发现数据被过滤了,即权限生效!

    方法A的问题在于,每个请求都需要配置一个权限菜单,这样其实也很费劲,同时对于菜单管理也不是很好,鉴于此可以考虑使用方法B 方法B基于注解属性pageComponent,步骤如下:

    • B-1.找到需要配置权限的页面菜单,这里是用户管理菜单

    输入图片说明 直接在该菜单上配置数据规则(如A-2)

    • B-2.角色授权(如A-3)
    • B-3.添加注解 (如A-4,不同的是注解上增加了一个属性)@PermissionData(pageComponent="system/UserList")pageComponent的值和B-1中菜单的前端组件值保持一致
    • B-4.测试,访问用户管理界面发现数据被过滤了,即权限生效!
    规则字段配置说明(非常重要): 
    ①条件规则:大于/大于等于/小于/小于等于/等于/包含/模糊/不等于/自定义SQL
    ②规则值:指定值 ( 固定值/系统上下文变量 )
    

    3、数据权限规范说明

    1.系统上下文变量

    注意:数据权限配置,规则值可以填写系统上下文变量(当前登录人信息),从而根据当前登录人信息进行权限控制。

    编码描述
    sys_user_code当前登录用户登录账号
    sys_user_name当前登录用户真实名称
    sys_date当前系统日期
    sys_time当前系统时间
    sys_org_code当前登录用户部门编号

    规则值,配置写法如下:#{sys_user_code}

    2.建表规范(系统标准字段)

    如果需要通过当前登录人,进行数据权限控制,则业务表必须有以下系统标准字段;数据添加和编辑,jeecg会通过拦截器自动注入操作人的信息。 比如:创建人,创建时间,创建人所属部门、创建人所属公司,有了这些标准字段,就可以通过当前登录人进行数据隔离控制;

    字段英文名字段中文名
    CREATE_BY系统用户登录账号
    CREATE_NAME系统用户真实名字
    SYS_ORG_CODE登录用户所属部门

    3.组织机构邮编规则

    JEECG组织机构支持无限层级,上下级关系通过组织机构编码实现,组织机构编码规则类似邮编方式,看下图; 邮编规则优势: 邮编规则,上下级编码固定规律,便于定位下级和上级; 输入图片说明

     

    展开全文
  • MUI 弹出菜单被子页面挡住的解决方法 MUI 在使用弹出菜单时,若使用了子页面,而在主页面弹出菜单,则弹出菜单会被子页面挡住,如图: ![在这里插入图片描述]...

    MUI 弹出菜单被子页面挡住的解决方法

    MUI 在使用弹出菜单时,若使用了子页面,而在主页面弹出菜单,则弹出菜单会被子页面挡住,如图:
    

    在这里插入图片描述
    解决方法有三种:
    1.父页面按钮被点击之后,父页面通知子页面,在子页面弹出菜单(弹出菜单代码在子页面而非主页面),待用户选择菜单项后,子页面又通知父页面被点击的菜单项,然后父页面做出相应。此方法需改变所以子页面,比较麻烦
    2.新建一个新的页面,专门用于弹出菜单,用一张灰色的透明图片模拟遮罩蒙版。
    3.使用原生方法弹出,可绝对置顶。此方法因为使用了原生方法,所以不易修改菜单的样式。

    此篇文字详细讲解第二种方法:
    步骤一:新建一个html文件,名为meau.html
    步骤二:在meau.html文件中写入如下代码

    <head>
    	<meta charset="utf-8" />
    	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    	<title></title>
    	<link rel="stylesheet" href="../css/mui.css" type="text/css" charset="utf-8" />
    	<style type="text/css">
    		html {
    			width: 100%;
    			height: 100%;
    		}
    		
    		body {
    			height: 100%;
    			background-color: transparent;
    		}
    		
    		.mui-popover .mui-popover-arrow {
    			left: auto;
    			right: 10px!important;
    		}
    		
    		.mui-popover {
    			display: block;
    			width: auto;
    			opacity: 1;
    			text-align: center;
    		}
    		
    		.mui-table-view-cell> a:not(.mui-btn) {
    			color: #000;
    		}
    	</style>
    </head>
    
    <body>
    	<a style="display: block;height: 100%; background:url(../img/mask.png);"></a>
    	<div id="topPopover" class="mui-popover" style="position:fixed ;top: 60px;right:5px;">
    		<div class="mui-popover-arrow" style="top: -30px;"></div>
    		<ul class="mui-table-view" style="color: #fff; top: -4px;right: 0;">
    			<li class="mui-table-view-cell  ">
    				<a id="addfriend" href="javascript:;">
    					<!--<button id="addfriend" class="mui-btn mui-btn-blue mui-btn-link">-->
    						
    					 添加好友
    					<!--</button>-->
    				</a>
    			</li>
    			<li class="mui-table-view-cell ">
    				<a id="previous" href="javascript:;"> 创建群聊 </a>
    			</li>
    			<li class="mui-table-view-cell ">
    				<a id="refresh" href="javascript:;"> 刷新</a>
    			</li>
    			<li class="mui-table-view-cell ">
    				<a id="homePage" href="javascript:;"> 首页 </a>
    			</li>
    		</ul>
    	</div>
    </body>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init({
    	  preloadPages:[{
    	    id:'tab-webview-main.html',
    	    url:'tab-webview-main.html'           
    	  }
    	  ]
    	});
    	mui.plusReady(function() {
    		ws = plus.webview.currentWebview();
    		ws.setStyle({
    			mask: "none"
    		});
    		window.addEventListener("tap", function() {
    			ws.hide();
    		});
    		window.addEventListener("dragstart", function() {
    			ws.hide();
    		});
    		document.getElementById('addfriend').addEventListener('tap', function(e) {
    			e.detail.gesture.preventDefault();
    			var selfPage = plus.webview.currentWebview();
    			
    			var openerPage = selfPage.opener();
    			
    			mui.fire(openerPage,'addfriend1',{aaa:"aaa",bbb:"bbb"});
    			
    			selfPage.close();
    			
    			openerPage.show();
    		}, false);
    		
    		
    		
    	});
    	
    	
    </script>
    
    步骤三:(1)在主页面中添加触发弹出菜单的按钮 代码为: `button id="menu" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">` (2)对meau.html进行预加载
    		var floatw = null;
    		// 创建子页面,首个选项卡页面显示,其它均隐藏;
    		mui.plusReady(function() {
    			var self = plus.webview.currentWebview();
    			
    			floatw = plus.webview.create("menu.html", "menu.html", {
                    background: 'transparent',
                    zindex: 10,
               });
    		});
    

    (3)为按钮添加监听事件

    document.getElementById('menu').addEventListener('tap',  function() {
    	        if(floatw) { // 避免快速多次点击创建多个窗口
    	            //floatw.show("fade-in",300);
    	            plus.webview.show("menu.html","fade-in",300);
    	        } else {
    	            floatw = plus.webview.create("menu.html", "menu", {
    	                background: 'transparent',
    	                zindex: 10,
    	            });
    	            floatw.show("fade-in",300);
    	        }
    	    });
    

    执行完以三个步骤后即可弹出菜单了,但是没有遮罩蒙版的效果

    步骤四:添加透明图片,达到遮罩蒙版的效果,没找到CSDN如何上传图片文件,有需要此透明图片可练习小编,QQ247210380

    在这里插入图片描述

    最终效果:
    在这里插入图片描述

    展开全文
  • bootstrap(菜单按钮、导航)

    千次阅读 2015-08-04 10:03:58
    ☑ LESS版本:对应的源码文件为 dropdowns.less1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:<div class="dropdown"></div>2、使用了一个按钮做为父菜单,并且定义类名“dropdown-toggle”...
  • Axure RP 8.0 利用中继器(repeater)完成按钮点击添加一行(下拉菜单,文字,图片) 中继器是axure 7带来的功能,它的主要用途在于:一次性添加一组元件,并可以赋值。
  • Axure RP 页面载入时选定默认按钮

    千次阅读 2015-01-19 14:00:38
    页面载入时事件,案例选择了最常见的页面载入时,导航按钮被选中的交互实例。深入浅出,分享内容。 步骤1: 导入导航及课程按钮图片,添加“选中时”交互样式。 RP 页面载入时选定默认按钮" TITLE="Axure RP ...
  • 在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,...到了Win10,微软模仿其他平台也推出了汉堡菜单,但并没有提供现成的控件,而是需要开发者通过一名为SplitView的控件来实
  • 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一独立的组件,根据不同的版本,它对应的文件:  ☑ LESS版本:对应的源码文件为 dropdowns.less  ☑ Sass版本:对应的源码文件为 _dropdowns.scss  ☑...
  • 微信大家肯定都用过,进入微信首页,下面有四个菜单,用户用手指滑动页面的时候,会发现下面的菜单图标还有文字的颜色会出现渐变,当然也可以直接用手点击某个菜单,不过这样就看不到渐变的效果,今天主要来说明下随...
  • 树状功能和普通功能是一样的做一功能权限控制:一角色对应多功能模块,在查询的时候获取当前用户的角色,然后在生成树的时候只将当前角色拥有的功能组装成树按钮权限也差不多,可以为功能中的按钮统一命名,如...
  • 微信公众号开发教程()自定义菜单

    千次阅读 2018-06-22 14:19:09
    作者:陈惠,叩丁狼教育高级讲师。原创文章,转载请注明出处。本篇文章,我们来做一最常见的,也...1、自定义菜单最多包括3一级菜单,每一级菜单最多包含5二级菜单。 2、一级菜单最多4汉字,二级菜单最多...
  • 每天早上七点三十,准时推送干货一、介绍在实际的项目开发过程中,菜单权限功能可以说是后端管理系统中必不可少的一环节,根据业务的复杂度,设计的时候可深可浅,但无论怎么变化,设计的思路基本都...
  • html5手机web页面底部菜单

    千次阅读 2019-04-29 11:35:00
    自动点击第一个菜单 $("div .subMenu")[0 ].click(); }); /* content高度 */ function initSize() { var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu...
  • Android点击底部按钮变状态切换页面

    千次阅读 2018-10-22 14:05:02
    新建三Fragment MainActivity: package com.example.administrator.switchpage; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android....
  • //加载时,隐藏一元素 }) jq加载页面时自动点击按钮,则 <i id="shghnn">按钮</i> <script language="javascript" type="text/javascript"> function hn(){ $("#shghnn").trigger("click");...
  • 经常有小伙伴问我怎样将多篇文章放到我们公众号的自定义菜单里面,这里就涉及到一知识点,叫做微信页面模板。 微信页面模板可以帮助用户将数万篇的图文或者是视频整理成一链接进行分发,不仅让我们操作起来更加...
  • 你用便签这个按钮吗?有没有觉得放在这个地方用起来不方便?那我就来教教你怎样把这个按钮放到桌面或者开始磁贴。 图一:很贴心的一个按钮 图二:桌面右键新建一个快捷方式,框里粘贴onenote-cmd://...
  • Axure RP隐藏部分页面菜单

    千次阅读 2017-07-30 21:04:15
    升级分三个步骤,"版本升级"页面中通过内联框架引用三个子页面,利用"上一步"和"下一步"两个按钮控制升级步骤(实现不做讲解)。现要求生成HTML文件后,首页隐藏掉三个子页面菜单项。 2.3 解决方案 Axure RP...
  • 情景:上面张图片分别命名为A(设置页面),B(添加配送范围),C(配送管理),D(修改配送范围); 从A页面点击配送管理进入C页面,使用的跳转方式是uni.redirectTo({ url: 'C?id=1' }); 点击C页面中的 添加配送...
  • ①自定义菜单最多包括3一级菜单,每一级菜单最多包含5二级菜单。 ②一级菜单最多4汉字,二级菜单最多7汉字,多出来的部分将会以“…”代替。 ③创建自定义菜单后,菜单的刷新策略是,在用户进入公众号...
  • 这篇文章主要是自己研究如何对底部菜单进行布局,并简单的实现点击不同"按钮"实现图片切换和背景切换的功能,最后通过PopupWindows实现弹出菜单,点击不同按钮能实现不同方法,相当于美图秀秀编辑图片的功能吧!...
  • 它的弊端也逐渐显示出来,最明显的一缺点就是它只有原创功能的微信公众号才可以是用微信页面模板这功能。这就让很多以个人名义申请订阅号的用户,使用起来非常不便,甚至是无法使用这功能。也正是因为如此。...
  • 在今天的这篇文章当中,我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面。好的,话不多说,进入正题。今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主,实现的效果有: ... 有
  • 1、按钮(按钮组)单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。那么在这一节中,我们主要向大家介绍Bootstrap框架为...
  • 这次借着这机会,对菜单进行梳理。但只是很浅显的系统讲解,即对菜单的种类及各种用法作了一些讲述,并没有对如何使用自定义的菜单布局做讲述,等下次有机会再次遇到的时候再补充吧,一下搞太多,有点吃不消,很累...
  • 每一使用ExtAspNet控件的页面都必须包含一PageManager控件,我们可以把PageManager控件看做页面级别的参数配置(相对于Web.config站点级别的参数配置)。   页面级别的参数配置   Theme: 控件主题,...
  • QT按钮种样式

    千次阅读 2012-07-01 10:58:03
    带弹出式菜单   btnMenu_ =  new  QPushButton(  "Popup Button" ,  this );  QMenu *menu =  new  QMenu;  menu->addAction( "Open Item" );  menu->addAction( "Save Item" );  ...
  • 页面布局分为3部分: 顶部导航:系统logo,登录信息,退出按钮等 左侧菜单:显示系统菜单 右侧展示:显示页面主要内容 (二)修改布局文件App.vue 主要是一些样式和布局,注意在IDEA下sass语法会报错,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,545
精华内容 27,818
关键字:

四个按钮菜单页面