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选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
随机推荐
- SQLServer 链接服务器及同义词
链接服务器 1. openrowse exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc ...
- linux学习-用户组与权限管理
一.用户与组 1.用户 管理员:root,UID为0 普通用户:1-60000 自动分配 系统用户:1-499,1-999(Centos7),对守护进程分配获取资源进行权限分配 登录用户:500+,1 ...
- APP定位元素几种方法
APP元素定位和操作 webdriver 提供了八种元素定位方法: 在 Python 语言中对应的定位方法如下:find_element_by_id()find_element_by_name()fi ...
- Vue的使用总结(2)
1.Vue 中 class 和 style 的绑定 在 Vue 中,可以通过数据绑定来操作元素的 class 列表和内联样式,操作 class 和 style 是用 v-bind 来绑定的.在将 v- ...
- 用闭包解决 js 循环中函数变量暂存问题
需求:有一个数组,根据数组的值渲染对应的数字div,单击对应的div 在控制台打印对应的数字.如点击1,控制台打印1. 问题: 不管点击哪个值 打出来都是4 代码如下 <!DOCTYPE htm ...
- php基于SQLite实现的分页功能示例
php基于SQLite实现的分页功能. 这里操作数据库文件使用的是前面文章<PHP基于PDO实现的SQLite操作类>中的SQLite数据库操作类. 代码: <?php class ...
- sql优化工具SQLAdvisor的安装
原文地址:https://www.cnblogs.com/beliveli/articles/6541936.html 本机安装包路径: D:\share\src\linux-mysql\sqlAdv ...
- 使用命令将ipa包上传到蒲公英
参考:官文文档 请根据开发者自己的账号,将其中的 uKey 和 _api_key 的值替换为相应的值. curl -F "file=@/Users/chenpeisong/Desktop ...
- 【GDAL】GDAL栅格数据结构学习笔记(一): 关于Metadata
在维护一段代码时看到前任程序员写的获取栅格数据的CellSize的功能,竟然在知道GDAL的情况下去调用AE的接口来解算,觉得费解. 原来的思路是使用AE的Raster对象读取出Raster的文件大小 ...
- Linux shell 常用命令大全 每日一更
大一上学期学习了Linux的基本操作,已经很久没使用了,虚拟机也近半年没开(作为一个计算机类专业的少年真的不应该).为了补回这些知识和为将来的学习打下基础,现在每天更新一条shell命令及其子命令,欢 ...