<title>Content sliders based on Bootstrap modals - Ace Admin</title>

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>Content sliders based on Bootstrap modals
	</h1>
</div><!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="alert alert-info">
			<button class="close" data-dismiss="alert">
				<i class="ace-icon fa fa-times"></i>
			</button>
			You can use any button to toggle sliders!
		</div>

		<!-- #section:custom/content-slider -->
		<div class="well well-sm">
			<h4 class="lighter no-margin-bottom">
				<i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
				<a href="#custom/content-slider" class="pink btn-display-help"> Content slider help </a>
			</h4>
		</div>

		<!-- /section:custom/content-slider -->
		<div id="top-menu" class="modal aside" data-fixed="true" data-placement="top" data-background="true" data-backdrop="invisible" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body container">
						<div class="row">
							<div class="col-sm-5 col-sm-offset-1 white">
								<h3 class="lighter">Bootstrap Grid &amp; Elements</h3>
							</div>

							<div class="col-sm-5 text-center line-height-2">
								<a class="btn btn-app btn-Default no-radius" href="#">
									<i class="ace-icon fa fa-pencil-square-o bigger-230"></i>
									Default
									<span class="label label-light arrowed-in-right badge-left">11</span>
								</a>

								&nbsp; &nbsp;
								<a class="btn btn-info btn-app no-radius" href="#">
									<i class="ace-icon fa fa-cog bigger-230"></i>
									Mailbox
									<span class="label label-danger arrowed-in">6+</span>
								</a>

								&nbsp; &nbsp;
								<a class="btn btn-app btn-light no-radius" href="#">
									<i class="ace-icon fa fa-print bigger-230"></i>
									Print
								</a>
							</div>
						</div>
					</div>
				</div><!-- /.modal-content -->

				<button class="btn btn-inverse btn-app btn-xs ace-settings-btn aside-trigger" data-target="#top-menu" data-toggle="modal" type="button">
					<i data-icon1="fa-chevron-down" data-icon2="fa-chevron-up" class="ace-icon fa fa-chevron-down bigger-110 icon-only"></i>
				</button>
			</div><!-- /.modal-dialog -->
		</div>

		<div id="bottom-menu" class="modal aside" data-fixed="true" data-placement="bottom" data-background="true" data-backdrop="invisible" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body container">
						<div class="row">
							<div class="col-sm-5 col-sm-offset-1 white">
								<h3 class="lighter">Bootstrap Grid &amp; Elements</h3>
							</div>
						</div>
					</div>
				</div><!-- /.modal-content -->

				<button class="btn btn-yellow btn-app btn-xs ace-settings-btn aside-trigger" data-target="#bottom-menu" data-toggle="modal" type="button">
					<i data-icon2="fa-chevron-down" data-icon1="fa-chevron-up" class="ace-icon fa fa-chevron-up bigger-110 icon-only"></i>
				</button>
			</div><!-- /.modal-dialog -->
		</div>

		<div id="right-menu" class="modal aside" data-body-scroll="false" data-offset="true" data-placement="right" data-fixed="true" data-backdrop="invisible" tabindex="-1">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header no-padding">
						<div class="table-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								<span class="white">&times;</span>
							</button>
							Based on Modal boxes
						</div>
					</div>

					<div class="modal-body">
						<h3 class="lighter">Custom Elements and Content</h3>

						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						1
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						2
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						<br />
						3
					</div>
				</div><!-- /.modal-content -->

				<button class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn" data-target="#right-menu" data-toggle="modal" type="button">
					<i data-icon1="fa-plus" data-icon2="fa-minus" class="ace-icon fa fa-plus bigger-110 icon-only"></i>
				</button>
			</div><!-- /.modal-dialog -->
		</div>

		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />

		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null, null]
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	  //inline scripts related to this page
		 jQuery(function($) {
		$('.modal.aside').ace_aside();
		
		$(document).one('ajaxloadstart.page', function(e) {
			//in ajax mode, remove before leaving page
			$('.modal.aside').remove();
			$(window).off('.aside')
		});
	})
	});
</script>