0
Ich habe eine Schaltfläche, die eine Seitenleiste öffnet, wenn ich darauf klicke. Wenn ich die gleiche Taste, um meine Box und den Klick auf anhängen, es öffnet nicht die Sidebar:Wie kann ich eine Schaltfläche mit Data-Toggle-Attribut anhängen?
<button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>
$(document).off("click", ".click").on("click", ".click", function (event) {
$(".box").append(stuff);
});
var stuff = $('<button class="btn btn-default" data-toggle="control-sidebar">This button is not opening the sidebar. Why?</button>');
$.AdminLTE = {};
$.AdminLTE.options = {
enableControlSidebar: true,
controlSidebarOptions: {
toggleBtnSelector: "[data-toggle='control-sidebar']",
selector: ".control-sidebar",
slide: false
},
};
$(function() {
"use strict";
$("body").removeClass("hold-transition");
if (typeof AdminLTEOptions !== "undefined") {
$.extend(true,
$.AdminLTE.options,
AdminLTEOptions);
}
var o = $.AdminLTE.options;
_init();
$.AdminLTE.tree('.sidebar');
if (o.enableControlSidebar) {
$.AdminLTE.controlSidebar.activate();
}
if (o.sidebarPushMenu) {
$.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
}
});
function _init() {
'use strict';
$.AdminLTE.layout = {
activate: function() {
var _this = this;
_this.fix();
_this.fixSidebar();
$(window, ".wrapper").resize(function() {
_this.fix();
_this.fixSidebar();
});
},
fix: function() {
var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
var window_height = $(window).height();
var sidebar_height = $(".sidebar").height();
if ($("body").hasClass("fixed")) {
$(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
} else {
var postSetWidth;
if (window_height >= sidebar_height) {
$(".content-wrapper, .right-side").css('min-height', window_height - neg);
postSetWidth = window_height - neg;
} else {
$(".content-wrapper, .right-side").css('min-height', sidebar_height);
postSetWidth = sidebar_height;
}
var controlSidebar = $($.AdminLTE.options.controlSidebarOptions.selector);
if (typeof controlSidebar !== "undefined") {
if (controlSidebar.height() > postSetWidth)
$(".content-wrapper, .right-side").css('min-height', controlSidebar.height());
}
}
},
fixSidebar: function() {
if (!$("body").hasClass("fixed")) {
if (typeof $.fn.slimScroll != 'undefined') {
$(".sidebar").slimScroll({
destroy: true
}).height("auto");
}
return;
} else if (typeof $.fn.slimScroll == 'undefined' && window.console) {
window.console.error("Error: the fixed layout requires the slimscroll plugin!");
}
if ($.AdminLTE.options.sidebarSlimScroll) {
if (typeof $.fn.slimScroll != 'undefined') {
$(".sidebar").slimScroll({
destroy: true
}).height("auto");
$(".sidebar").slimscroll({
height: ($(window).height() - $(".main-header").height()) + "px",
color: "rgba(0,0,0,0.2)",
size: "3px"
});
}
}
}
};
$.AdminLTE.tree = function (menu) {
var _this = this;
var animationSpeed = $.AdminLTE.options.animationSpeed;
$(document).off('click', menu + ' li a')
.on('click', menu + ' li a', function (e) {
var $this = $(this);
var checkElement = $this.next();
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) {
checkElement.slideUp(animationSpeed, function() {
checkElement.removeClass('menu-open');
});
checkElement.parent("li").removeClass("active");
}
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
var parent = $this.parents('ul').first();
var ul = parent.find('ul:visible').slideUp(animationSpeed);
ul.removeClass('menu-open');
var parent_li = $this.parent("li");
checkElement.slideDown(animationSpeed, function() {
checkElement.addClass('menu-open');
parent.find('li.active').removeClass('active');
parent_li.addClass('active');
_this.layout.fix();
});
}
if (checkElement.is('.treeview-menu')) {
e.preventDefault();
}
});
};
$.AdminLTE.controlSidebar = {
activate: function() {
var _this = this;
var o = $.AdminLTE.options.controlSidebarOptions;
var sidebar = $(o.selector);
var btn = $(o.toggleBtnSelector);
btn.on('click', function (e) {
e.preventDefault();
_this.open(sidebar, o.slide);
});
$(".close_sidebar").on('click', function (e) {
_this.close(sidebar, o.slide);
});
var bg = $(".control-sidebar-bg");
_this._fix(bg);
if ($('body').hasClass('fixed')) {
_this._fixForFixed(sidebar);
} else {
if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
_this._fixForContent(sidebar);
}
}
},
open: function (sidebar, slide) {
if (slide) {
sidebar.addClass('control-sidebar-open');
} else {
$('body').addClass('control-sidebar-open');
}
},
close: function (sidebar, slide) {
if (slide) {
sidebar.removeClass('control-sidebar-open');
} else {
$('body').removeClass('control-sidebar-open');
}
},
_fix: function (sidebar) {
var _this = this;
if ($("body").hasClass('layout-boxed')) {
sidebar.css('position', 'absolute');
sidebar.height($(".wrapper").height());
if (_this.hasBindedResize) {
return;
}
$(window).resize(function() {
_this._fix(sidebar);
});
_this.hasBindedResize = true;
} else {
sidebar.css({
'position': 'fixed',
'height': 'auto'
});
}
},
_fixForFixed: function (sidebar) {
sidebar.css({
'position': 'fixed',
'max-height': '100%',
'overflow': 'auto',
'padding-bottom': '50px'
});
},
_fixForContent: function (sidebar) {
$(".content-wrapper, .right-side").css('min-height', sidebar.height());
}
};
}.box{
width:100px;
height:50px;
background-color:pink
}
.control-sidebar-bg {
position: fixed;
z-index: 1000;
bottom: 0;
}
.control-sidebar-bg,
.control-sidebar {
top: 0;
right: -430px;
width: 430px;
-webkit-transition: right 0.3s ease-in-out;
-o-transition: right 0.3s ease-in-out;
transition: right 0.3s ease-in-out;
}
.control-sidebar {
position: absolute;
padding-top: 50px;
z-index: 1010;
}
.control-sidebar > .tab-content {
padding: 10px 15px;
}
.control-sidebar.control-sidebar-open,
.control-sidebar.control-sidebar-open + .control-sidebar-bg {
right: 0;
}
.control-sidebar-open .control-sidebar-bg,
.control-sidebar-open .control-sidebar {
right: 0;
}
.control-sidebar-heading {
font-weight: 400;
font-size: 16px;
padding: 10px 0;
margin-bottom: 10px;
}
.control-sidebar-subheading {
display: block;
font-weight: 400;
font-size: 14px;
}
.control-sidebar-menu {
list-style: none;
padding: 0;
margin: 0 -15px;
}
.control-sidebar-menu > li > a {
display: block;
padding: 10px 15px;
}
.control-sidebar-menu > li > a:before,
.control-sidebar-menu > li > a:after {
content: " ";
display: table;
}
.control-sidebar-menu > li > a:after {
clear: both;
}
.control-sidebar-menu > li > a > .control-sidebar-subheading {
margin-top: 0;
}
.control-sidebar-menu .menu-icon {
float: left;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
line-height: 35px;
}
.control-sidebar-menu .menu-info {
margin-left: 45px;
margin-top: 3px;
}
.control-sidebar-menu .menu-info > .control-sidebar-subheading {
margin: 0;
}
.control-sidebar-menu .menu-info > p {
margin: 0;
font-size: 11px;
}
.control-sidebar-menu .progress {
margin: 0;
}
.control-sidebar-dark {
color: #b8c7ce;
}
.control-sidebar-dark,
.control-sidebar-dark + .control-sidebar-bg {
background: #222d32;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs {
border-bottom: #1c2529;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a {
background: #181f23;
color: #b8c7ce;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus {
border-left-color: #141a1d;
border-bottom-color: #141a1d;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:active {
background: #1c2529;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
color: #fff;
}
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:hover,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:focus,
.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:active {
background: #222d32;
color: #fff;
}
.control-sidebar-dark .control-sidebar-heading,
.control-sidebar-dark .control-sidebar-subheading {
color: #fff;
}
.control-sidebar-dark .control-sidebar-menu > li > a:hover {
background: #1e282c;
}
.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
color: #b8c7ce;
}
.control-sidebar-light {
color: #5e5e5e;
}
.control-sidebar-light,
.control-sidebar-light + .control-sidebar-bg {
background: #f9fafc;
border-left: 1px solid #d2d6de;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs {
border-bottom: #d2d6de;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a {
background: #e8ecf4;
color: #444444;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus {
border-left-color: #d2d6de;
border-bottom-color: #d2d6de;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:active {
background: #eff1f7;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:focus,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:active {
background: #f9fafc;
color: #111;
}
.control-sidebar-light .control-sidebar-heading,
.control-sidebar-light .control-sidebar-subheading {
color: #111;
}
.control-sidebar-light .control-sidebar-menu {
margin-left: -14px;
}
.control-sidebar-light .control-sidebar-menu > li > a:hover {
background: #f4f4f5;
}
.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
color: #5e5e5e;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="control-sidebar control-sidebar-dark">
<!-- Content of the sidebar goes here -->
</aside>
<button class="btn btn-default" data-toggle="control-sidebar">This button opens the sidebar</button>
<button class="click">Add Stuff</button>
<div class="box"></div>