BootSideMenu右侧栏弹出框,在弹出框选择数据之后直接填充到input中
程序员文章站
2022-06-01 11:17:17
...
效果图如图所示:
右侧是弹出框,弹出框是数据源,左边是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 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 ));
上一篇: 等着我去给你买狗粮