BootSideMenu右侧栏弹出框，在弹出框选择数据之后直接填充到input中

于 2017-05-15 16:21:59 发布
阅读量2k 收藏
点赞数
分类专栏： 前端 文章标签： 右侧弹出栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013126217/article/details/72169329
版权

效果图如图所示：
这里写图片描述
右侧是弹出框，弹出框是数据源，左边是input输入框，点击右侧栏中的数据，直接将数据填充到左边的input框中，并且右侧栏中的此数据消失，如果选择另一条数据，则选择的数据填充到input框中，并且这条数据消失，之前选择的那条数据显示出来。
具体demo代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>

        <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
        <script src="BootSideMenu.js" type="text/javascript"></script>
        <script src="bootstrap.js" type="text/javascript"></script>

        <link href="bootstrap.css" type="text/css" rel="stylesheet" />
        <link href="BootSideMenu.css" type="text/css" rel="stylesheet">




        <script type="text/javascript">
            var serverInfoObject = null;
            $(document).ready(function(){

                //初始化右侧栏，自动收缩
                $("#serverBackupInfo").BootSideMenu({side:"right"});

                //注册焦点事件
                $("input[type=text]").on("focus", function(){
                    serverInfoObject = $(this);
                });
            });

            //右侧栏中数据列表的点击事件
            $(document).on("click", ".sidebar .list-group-item", function(event){
                //显示为选中效果
                $(".sidebar .list-group-item").each(function(){
                    $(this).removeClass("active");
                });
                $(this).addClass("active");

                //如果没有选中焦点的话不删除信息
                if (serverInfoObject != null) {
                    //获取当前焦点的下一个hidden的值，此处也就是服务器的id，如果不为空，则根据id显示右侧栏对应的服务器信息
                    if (serverInfoObject.next().val() != null) {
                        $("#" + serverInfoObject.next().val()).fadeIn();
                    }

                    //隐藏右侧栏中点击的服务器信息
                    $(this).parents("li[id]").fadeOut();
                    //获取服务器信息的id
                    var id = $(event.target).attr("data-id");
                    //获取公网IP
                    var pubip = $(event.target).attr("data-pubip");
                    //获取私网IP
                    var priip = $(event.target).attr("data-priip");
                    //获取备注
                    var remark = $(event.target).attr("data-remark");


                    //设置当前焦点所在input的value
                    serverInfoObject.val(pubip);
                    //设置当前焦点所在位置的下一个input的value
                    serverInfoObject.next().val(id);


                    //设置其他的服务器信息
                    var serverInfoList = serverInfoObject.parents("tr").find("input");
                    for (var i = 0; i < serverInfoList.length; i++) {
                        var info = serverInfoList[i];
                        if ($(info).attr("data-name") == "pubip") {
                            $(info).val(pubip);
                        }else if($(info).attr("data-name") == "priip"){
                            $(info).val(priip);    
                        }else if($(info).attr("data-name") == "remark"){
                            $(info).val(remark);   
                        }
                    }
                } 
            });
        </script>

    </head>
    <body>

        <form id="contentForm" action="" method="post" class="form-horizontal">
            <div class="control-group"> 
                <table id="contentTable" class="table table-bordered table-condensed table-hover" style="width:60%;">
                    <thead>
                        <tr>
                            <th>公网IP</th>
                            <th>私网IP</th>
                            <th>备机备注</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="text" class="input-small" data-name="pubip"/>
                                <input type="hidden"/>
                            </td>
                            <td><input type="text" class="input-small" data-name="priip" /></td>
                            <td><input type="text" class="input-xlarge" data-name="remark" ></td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="input-small" data-name="pubip"/>
                                <input type="hidden"/>
                            </td>
                            <td><input type="text" class="input-small" data-name="priip" /></td>
                            <td><input type="text" class="input-xlarge" data-name="remark" ></td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="input-small" data-name="pubip"/>
                                <input type="hidden"/>
                            </td>
                            <td><input type="text" class="input-small" data-name="priip" /></td>
                            <td><input type="text" class="input-xlarge" data-name="remark" ></td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="input-small" data-name="pubip"/>
                                <input type="hidden"/>
                            </td>
                            <td><input type="text" class="input-small" data-name="priip"/></td>
                            <td><input type="text" class="input-xlarge" data-name="remark" ></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </form>

            <!-- 侧边栏 -->    
        <div id="serverBackupInfo">
            <div class="list-group">
                <ul>
                    <li id="1" class="product">
                        <h5>
                            <a href="#0" class="list-group-item" data-id="1" data-pubip="180.1.1.1" data-priip="10.1.1.1" data-remark="1">180.1.1.1</a>
                        </h5>
                    </li>
                    <li id="2" class="product">
                        <h5>
                            <a href="#0" class="list-group-item" data-id="2" data-pubip="180.2.2.2" data-priip="10.2.2.2" data-remark="2">180.2.2.2</a>
                        </h5>
                    </li>
                    <li id="3" class="product">
                        <h5>
                            <a href="#0" class="list-group-item" data-id="3" data-pubip="180.3.3.3" data-priip="10.3.3.3" data-remark="3">180.3.3.3</a>
                        </h5>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    </body>
</html>

注：对引入的js和css文件的说明
jquery-1.8.3.min.js、bootstrap.js、bootstrap.css这三个直接下载就行，BootSideMenu.js、BootSideMenu.css这两个可能找起来比较困难，下面是这两个文件具体的代码
BootSideMenu.css

.sidebar{
    z-index: 999999;
    position: fixed;
    top: -1px;
    bottom: -1px;
    padding:0px;
    width: auto;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.sidebar > .row, .sidebar > .row, .sidebar > .row, .sidebar > .row {
    padding:0px;
    position: absolute;
    bottom: 0px;
    top: 0px;
    overflow: auto;           
}

.sidebar >.row{
      margin:0px;
}

.sidebar {
      width: auto;
}
.sidebar.sidebar-left{
      left:0px;
      right:20px;
}

.sidebar.sidebar-right{
      right:0px;
      left:20px;
}

@media (min-width: 400px) {

}
@media (min-width: 528px) {
    .sidebar {
          width: 300px;
    }
    .sidebar.sidebar-left{
          left:0px;
          right:auto;
    }

    .sidebar.sidebar-right{
          right:0px;
          left:auto;
    }
}
@media (min-width: 768px) {
    .sidebar {
          width: 230px;
    }
    .sidebar.sidebar-left{
          left:0px;
          right:auto;
    }

    .sidebar.sidebar-right{
          right:0px;
          left:auto;
    }
}
@media (min-width: 992px) {
    .sidebar {
          width: 230px;
    }
    .sidebar.sidebar-left{
          left:0px;
          right:auto;
    }

    .sidebar.sidebar-right{
          right:0px;
          left:auto;
    }
}
@media (min-width: 1200px) {
    .sidebar {
          width: 360px;
    }
    .sidebar.sidebar-left{
          left:0px;
          right:auto;
    }

    .sidebar.sidebar-right{
          right:0px;
          left:auto;
    }
}

.toggler{
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    width: 20px;
    height: 48px;
    position: absolute;
    top: 45%;
    cursor: pointer;
}

.sidebar-left > .toggler{
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 1px solid #fff;
    -webkit-box-shadow: 1px 0px 8px rgba(0, 0, 0, .175);
    box-shadow: 1px 0px 8px rgba(0, 0, 0, .175);
    right: -20px;
} 

.sidebar-left > .toggler > i {
    margin:18px 5px;
}

.sidebar-left > .toggler > .icon-chevron-right{
    display:none;
}

.sidebar-right > .toggler{
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 1px solid #fff;
    -webkit-box-shadow: -1px 0px 8px rgba(0, 0, 0, .175);
    box-shadow: -1px 0px 8px rgba(0, 0, 0, .175);           
    left: -20px;
} 

.sidebar-right > .toggler > i {
    margin:18px 5px;
}

.sidebar-right > .toggler > .icon-chevron-left{
    display:none;
}

.sidebar .submenu{
    display: none;
    position: fixed;
} 

/*Native BootStrap Hack*/
.sidebar .list-group-item:last-child, .sidebar .list-group-item:first-child{
    border-radius:0px;
}

.sidebar .list-group{
    padding-left: 0;
    margin-bottom: 20px;
}

.sidebar .list-group-item {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ddd -moz-use-text-color;
    border-image: none;
    border: 1px solid #DDD;
    border-width: 1px 0;
    border-style: solid none;
    border-left: 0px;
    border-right: 0px;
    margin-bottom: 0;
    margin-top: -1px;
    padding: 5px;
    position: relative;
    display: block;
    width: 350px;
}

/* a.list-group-item {
    color: #555;
} */

a {
    color: #2fa0ec;
    outline: medium none;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}

a.list-group-item {
    color: #555;
}
a.list-group-item .list-group-item-heading {
    color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
    color: #555;
    text-decoration: none;
    background-color: #f5f5f5;
}

.list-group {
    padding-left: 0;
    margin-bottom: 20px;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

BootSideMenu.js

(function ( $ ) {

    $.fn.BootSideMenu = function( options ) {

        var oldCode, newCode, side;

        newCode = "";

        var settings = $.extend({
            side:"left",
            autoClose:true
        }, options );

        side = settings.side;
        autoClose = settings.autoClose;

        this.addClass("container sidebar");

        if(side=="left"){
            this.addClass("sidebar-left");
        }else if(side=="right"){
            this.addClass("sidebar-right");
        }else{
            this.addClass("sidebar-left");  
        }

        oldCode = this.html();

        newCode += "<div class=\"row\">\n";
        newCode += "    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg1-12\" data-side=\""+side+"\">\n"+ oldCode+" </div>\n";
        newCode += "</div>";
        newCode += "<div class=\"toggler\">\n";
        newCode += "    <i class=\"icon-chevron-right\">&nbsp;</i> <i class=\"icon-chevron-left\">&nbsp;</i>\n";
        newCode += "</div>\n";

        this.html(newCode);

        if(autoClose){
            $(this).find(".toggler").trigger("click");
        }

    };

    $(document).on('click','.toggler', function(){
        var toggler = $(this);
        var container = toggler.parent();
        var listaClassi = container[0].classList;
        var side = getSide(listaClassi);
        var containerWidth = container.width();
        var status = container.attr('data-status');
        if(!status){
            status = "opened";
        }
        doAnimation(container, containerWidth, side, status);
    });

    /*Cerca un div con classe submenu e id uguale a quello passato*/
    function searchSubMenu(id){
        var found = false;
        $('.submenu').each(function(){
            var thisId = $(this).attr('id');
            if(id==thisId){
                found = true;
            }
        });
        return found;
    }

//restituisce il lato del sidebar in base alla classe che trova settata
function getSide(listaClassi){
    var side;
    for(var i = 0; i<listaClassi.length; i++){
        if(listaClassi[i]=='sidebar-left'){
            side = "left";
            break;
        }else if(listaClassi[i]=='sidebar-right'){
            side = "right";
            break;
        }else{
            side = null;
        }
    }
    return side;
}
//esegue l'animazione
function doAnimation(container, containerWidth, sidebarSide, sidebarStatus){
    var toggler = container.children()[1];
    if(sidebarStatus=="opened"){
        if(sidebarSide=="left"){
            container.animate({
                left:-(containerWidth+2)
            });
            toggleArrow(toggler, "left");
        }else if(sidebarSide=="right"){
            container.animate({
                right:- (containerWidth +2)
            });
            toggleArrow(toggler, "right");
        }
        container.attr('data-status', 'closed');
    }else{
        if(sidebarSide=="left"){
            container.animate({
                left:0
            });
            toggleArrow(toggler, "right");
        }else if(sidebarSide=="right"){
            container.animate({
                right:0
            });
            toggleArrow(toggler, "left");
        }
        container.attr('data-status', 'opened');

    }

}

function toggleArrow(toggler, side){
    if(side=="left"){
        $(toggler).children(".icon-chevron-right").css('display', 'block');
        $(toggler).children(".icon-chevron-left").css('display', 'none');
    }else if(side=="right"){
        $(toggler).children(".icon-chevron-left").css('display', 'block');
        $(toggler).children(".icon-chevron-right").css('display', 'none');
    }
}

}( jQuery ));
廖宁波
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值