BootStrap组件

发布时间：2020-12-17 20:57:01 所属栏目：安全来源：网络整理

导读：提示组件popover htmlhead meta name="viewport" content="width=device-width" / titleBottStrap提示组件Popover测试/title link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" / script src="~/bootStrapPager/js/jquery-1.11.1.min.js"/script

提示组件popover

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BottStrap提示组件Popover测试</title>

    <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="~/bootStrapPager/js/jquery-1.11.1.min.js"></script>
    <script src="~/bootstrap/js/bootstrap.js"></script>

</head>
<body>
    <input type="text" class="form-control" placeholder="Username" id="Username">
    <input type="password" class="form-control" placeholder="Password" id="Password">
    <button type="button" class="btn btn-primary" id="btn">提交</button>      
</body>
</html>

<script type="text/javascript">
    $(function () {
        $("#Username").popover({ container: "body" });//初始化（先定义个popover对象）
        $("#Password").popover({ container: "body" });//初始化

        
        $("#btn").bind("click",function () {
            var username = $("#Username").val()
            var password = $("#Password").val();
           
            if (username.length <= 0) {
                $("#Username").data('bs.popover').options.content = "请输入用户名";
                $("#Username").popover("show");
                return;
            }
            if (password.length <= 0) {
                $("#Password").data('bs.popover').options.content = "请输入密码";
                $("#Password").popover("show");
                return;
            }
            if (password.length < 6) {
                $("#Password").data('bs.popover').options.content = "密码长度不能少于6位";
                $("#Password").popover("show");
                return;
            }
        })       
    })
</script>

改造下

<script type="text/javascript">
    $(function () {
        $("#Username").popover({ container: "body" });//初始化（先定义个popover对象）
        $("#Password").popover({ container: "body" });//初始化

        
        $("#btn").bind("click",function () {
            var username = $("#Username").val()
            var password = $("#Password").val();
           
            if (username.length <= 0) {
                OpenPopover("#Username","请输入用户名！")
                return;
            }
            if (password.length <= 0) {
                OpenPopover("#Password","请输入密码！")
                return;
            }
            if (password.length < 6) {
                OpenPopover("#Password","密码长度不能少于6位！")
                return;
            }
        })       
    })

    function OpenPopover(element,content) {
        $(element).data('bs.popover').options.content = content;
        $(element).popover("show");
    }
</script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!