一.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(显示位置元素));
原文地址:https://www.cnblogs.com/lyt0207/p/11800119.html
时间: 2024-11-07 04:04:57