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选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
随机推荐
- controllerpom
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- pyCharm和解释器下载安装
参考:(mac) 安装流程和注意: http://blog.csdn.net/limin2928/article/details/69267184 解释器下载地址: https://www.pytho ...
- dotnet 跨平台编译发布
dotnet publish 命令,bash脚本如下(Windows安装git即可建议sh关联) publish.sh #!/usr/bin/env bash # one line command: ...
- IGServer for Java
Eclipse和JavaEE: DCServer是哪个? 查看服务器文件夹: Env_Var变量没有定义:JRE_HOME.JDK_HOME 这是Tomcat报错的提示,但是既然JAVA_HOME都有 ...
- UIStakView的添加与移除
subView和arrangedSubView对于Stack View的子控件添加和移除,我们是这样描述的. 添加-->(Stack View管理的subview) addArrangedSub ...
- sql优化工具SQLAdvisor的安装
原文地址:https://www.cnblogs.com/beliveli/articles/6541936.html 本机安装包路径: D:\share\src\linux-mysql\sqlAdv ...
- 2019-2020-1 20175223 《信息安全系统设计基础》MyOD
目录 一.要求 二.设计流程 1. 需求分析 2. 概要设计 伪代码 3. 详细设计 main.c tans_0x.c tans_pr.c tansp.h 三.编写Makefile,并制作动.静态库 ...
- 剑指offer---4、序列化二叉树
剑指offer---4.序列化二叉树 一.总结 一句话总结: 1. 对于序列化:使用前序遍历,递归的将二叉树的值转化为字符,并且在每次二叉树的结点不为空时,在转化val所得的字符之后添加一个' , ' ...
- ANTLR4在windows10下的安装
1.下载ANTLR ①.从官网下载到最新版本的antlr-4.7.1-complete.jar.我下载的时候最新版本是4.7.1. ②.选择路径保存,为方便之后修改环境变量.我的下载目录为E:\Ant ...
- PHP curl get post请求
POST请求: public function postUrl($url, $postData = false, $header = false) { $ch = curl_init($url); c ...