BootSideMenu右侧栏弹出框，在弹出框选择数据之后直接填充到input中
来源：互联网 发布：linux增加权限命令 编辑：程序博客网 时间：2024/05/22 18:48
效果图如图所示： 
右侧是弹出框，弹出框是数据源，左边是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\"> </i> <i class=\"icon-chevron-left\"> </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 settatafunction 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'animazionefunction 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
- BootSideMenu右侧栏弹出框，在弹出框选择数据之后直接填充到input中
- 点击input输入框弹出选择层
- js 点击input弹出选择框
- 自定义的右侧弹出筛选框
- 弹出列表框，响应选择的数据
- Android弹出提示框数据进行选择
- ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中（一）
- ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中（二）
- ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中（三）
- ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中（四）
- JS弹出选择框
- 如何使QPushButton的弹出菜单在右侧弹出。
- 关于JSP中单击任意标签弹出文件选择框(<input type="file"/>)的实现方法
- Bootstrap弹出层model上自定义的弹出层中input输入框失效, 无法输入
- android 弹出选择框,简单通用弹出选择框
- android 弹出选择框,简单通用弹出选择框
- Tapestry 弹出时间选择框
- JavaScript弹出提示选择框
- iOS
- 基于redis的分布式锁方案
- 病毒？Or！木马？
- 单选按钮点击一下触发两次事件
- 欢迎使用CSDN-markdown编辑器
- BootSideMenu右侧栏弹出框，在弹出框选择数据之后直接填充到input中
- 对软件测试的认识（理论基础知识）
- 错误:Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/
- 重启socket服务器时：Bind error: Address already in use
- eclipse断点上有一条斜线
- 七个月的实习总结
- 【转】linux下杀死进程（kill）的N种方法
- 2017可用的cocoapods、masnory安装教程
- netty 引用计数器 ，垃圾回收
