欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-01 11:17:17
...

效果图如图所示:
BootSideMenu右侧栏弹出框,在弹出框选择数据之后直接填充到input中
右侧是弹出框,弹出框是数据源,左边是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 ));

相关标签: 右侧弹出栏