mui-popover显示、隐藏弹出菜单的方法
一.mui-popover要显示、隐藏弹出菜单,可使用锚点方式.
<div id="popover" class="box mui-popover mui-poppicker mui-popover-action mui-popover-bottom"
style="height: 500px;background-color: #fff;">
<div class="mui-popover-arrow"></div>
<div class="popoverheader">
<div class="text">添加教育经历</div>
<a href="#popover"><img src="../image/close.png" alt=""></a>
</div> <form class="mui-input-group" style="margin-right: 0rem;margin-left: 0rem">
<div class="mui-input-row poschoolName">
<label>学校名称</label>
<input id="poschoolName" type="text" placeholder="填写学校名称">
</div>
<div class="mui-input-row postartData">
<label>入学日期</label>
<input type="text" id="postartData" placeholder="填写入学日期">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row poendData">
<label>毕业日期</label>
<input type="text" id="poendData" placeholder="填写毕业日期">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row poschoolType">
<label>学校性质</label>
<input type="text" id="schoolType" placeholder="填写学校性质">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row pospecializedName">
<label>专业名称</label>
<input type="text" id="pospecializedName" placeholder="填写专业名称">
</div>
<div class="mui-input-row podegree">
<label>所获学位</label>
<input type="text" id="podegree" placeholder="填写所获学位">
</div>
<div class="mui-input-row pocertificateNum">
<label>证书编号</label>
<input type="text" id="pocertificateNum" placeholder="填写证书编号">
</div>
<div class="mui-input-row podegreeNum">
<label>学位编号</label>
<input type="text" id="podegreeNum" placeholder="填写学位编号">
</div>
</form>
<div class="mui-table-view mui-table-view-chevron next">
<a href="#popover" class="x-next add">添加</a> //锚点
</div>
</div>
二.通过js的方式控制弹出菜单,实现任意元素上弹出.
mui(弹出层元素).popover(status[,anchor]);
mui(弹出层元素).popover('show ');//show hide toggle
//传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui(弹出层元素).popover('toggle',document.getElementById(显示位置元素));
mui-popover显示、隐藏弹出菜单的方法的更多相关文章
- PyQt(Python+Qt)学习随笔:设定toolButton弹出菜单的方法
在Qt Designer中toolButton可以通过popupMode设定菜单弹出的模式,但并不能在Qt Designer中指定toolButton的弹出菜单,toolButton只能通过代码来指定 ...
- 仿酷狗音乐播放器开发日志二十六 duilib在标题栏弹出菜单的方法
转载请说明原出处,谢谢~~ 上篇日志说明了怎么让自定义控件响应右键消息.之后我给主窗体的标题栏增加右键响应,观察原酷狗后可以发现,在整个标题栏都是可以响应右键并弹出菜单的.应该的效果如下: 本以为像上 ...
- iOS_21团购_顶部菜单和弹出菜单联动
最后效果图: 各控件关系图1: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize ...
- vc++ 如何添加右键弹出菜单
一.创建新工程 二.编辑菜单资源 1.添加菜单 按"Ctrl+R",双击"Menu"图标 2.于菜单编辑器内编辑菜单 四.添加代码(红色部分) void CCM ...
- 解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题
前言 最近公司的项目转向使用Hbuilder开发移动端项目,其中想要通过在顶部标题栏加入弹出菜单的方式,来定位长列表的位置,如图所示. 问题 Mui的功能貌似还不是很完善,在使用这个弹出菜单的时候,发 ...
- Mui --- 弹出菜单
mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...
- win7系统 右击任务栏 资源管理器 弹出菜单“已固定”和“最近”项目不显示故障处理
故障描述:右击任务栏中资源管理器图标时,弹出菜单只有“资源管理器”和“解除锁定”两个项目,“已固定”和“最近”项目缺失不显示,其他程序均显示正常,只有资源管理器这样.此故障一般发生在经常使用“已固定” ...
- JavaScript 实现触点式弹出菜单插件
之前做项目时经常用到一种触点式弹出菜单或者导航的功能,这个功能的主要应用场景是:web页面中多层分级导航或者子功能目录,但又考虑到页面区域有限,于是就考虑到在鼠标移动到某导航按钮上或者点击时,系统将在 ...
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
随机推荐
- bootstrap响应式布局原理
百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...
- 使用CSS在页面中嵌入字体
http://jingyan.baidu.com/article/3065b3b6e9b2d9becff8a4c1.html 首先感谢css9.net照抄原话: 字体使用是网页设计中不可或缺的一部分. ...
- Code Review怎样做好
一.背景 最近随着交易业务快速扩展,研发组内新项目及新成员越来越多,如何做好Code Review,把控研发人员开发代码质量很是关键. 对于大部分业务团队,谈到Code Review就会面露哀状: ...
- mysql启动以及常用命令汇总
mysql57的启动 常用命令 : show databases : 展示所有数据库 use 数据库名 : 连接数据库 show tables ...
- 8051 r0-r7 是什么
R0~R7表示当前选中的寄存器组的寄存器0~7,5I机有p0,p1,p2,p3口,每组有八个寄存器(R0-R7),比如MOV A Rn (n=0~7),表示把寄存器Rn 的内容送给累加器A,其中源操作 ...
- Linux编程 多进程,多线程求解PI(圆周率)
题目: 链接 多进程: #include <unistd.h> #include <stdio.h> #include <stdlib.h> #define n 1 ...
- (子文章)Spring Boot搭建两个微服务模块
目录 1. 创建工程和user-service模块 1.1 创建空工程 1.2 在空工程里新建Module 2. 配置文件 2.1 pom.xml 2.2 application.yml 3. 代码 ...
- appium常见问题04_查看andriod内置浏览器webview版本
方法一:手机上设置中查看 设置-->应用程序管理-->全部-->Android System WebView 方法二:adb指令查看(前提,已安装android sdk环境) 1,w ...
- mybatis的一些小细节
Mybatis要解决的问题: 1. 将sql语句硬编码到java代码中,如果修改sql语句,需要修改java代码,重新编译.系统可维护性不高. 设想如何解决? 能否将sql单独配置在配置文件中. 2. ...
- PAT 2019-3 7-3 Telefraud Detection
Description: Telefraud(电信诈骗) remains a common and persistent problem in our society. In some cases, ...