zoukankan      html  css  js  c++  java
  • 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(显示位置元素));
    不积跬步无以至千里
  • 相关阅读:
    console一闪而过的解决办法
    关于return
    各种js验证(笔记本)
    订单号的生成
    linux之cp/scp命令+scp命令
    11111111111
    Servlet中Web.xml文件的配置
    maven pom.xml详解
    环形缓冲区类(C++)附测试程序(转)
    环形缓冲区类(C++)绝对可用(转)
  • 原文地址:https://www.cnblogs.com/lyt0207/p/11800119.html
Copyright © 2011-2022 走看看