Bootstrap вкладки маршрутизации с summyjs
Я нашел способ маршрутизации вкладок начальной загрузки с помощью summyjs, но, похоже, он соответствует образцам, которые я видел. я только начал изучать summyjs и мне не нравится, как я это сделал, хотя это работает... вот мой код
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width"/>
<meta name="" content=""/>
<meta charset="UTF-8"/>
<link type="text/css" rel="stylesheet" href="Other/font-awesome-4.2.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="Other/bootstrap.css">
<style>
html {
position: relative;
min-height: 100%;
}
body {
font-family: 'Lato', helvetica, arial, sans-serif;
font-size: 14px;
color: #222;
}
.clear {
clear: both;
}
body {
margin-top: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 style="padding-bottom: 20px;">Using Summyjs to route Bootstrap Tabs</h2>
<div class="navbar-header">
<a class="navbar-brand" data-toggle="" data-target="#bs-example-navbar-collapse-1" href="#">My Resume</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div style="" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><a href="#home" data-toggle="tab">PERSONAL SUMMARY</a> </li>
<li><a href="#ios" data-toggle="tab">AREAS OF EXPERIENCE</a></li>
<li><a href="#jmeter" data-toggle="tab">CAREER SKILLS</a> </li>
<li><a href="#ejb" data-toggle="tab">PERSONAL DETAILS</a> </li>
</ul>
</div>
<div class="clear"></div>
<div style="padding-top: 20px;" id="myTabContent" class="tab-content">
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade in active" id="home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technoligies and explains each of the technology with simple examples. You also have a <b>tryit</b> editor, wherein you can edit your code and try out different possibilities of the examples.</p>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade" id="ios">
<p>iOS is a mobile operating system developed and distributed by Apple
Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the
Darwin foundation. iOS is Apple's mobile version of the
OS X operating system used on Apple computers.</p>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade" id="jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure
Java application for load and performance testing.</p>
</div>
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level
applications to be deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.
</p>
</div>
</div>
</div>
</body>
<script type='text/javascript' src="Other/jquery.js"></script>
<script type='text/javascript' src="Other/bootstrap.js"></script>
<script type="text/javascript" src="Other/summyjs/min/sammy-0.7.6.min.js"></script>
<script type="text/javascript">
//Update the URL with the current tabs hash
$("#myTab a").click(function () { location.hash = $(this).attr('href'); });
function ShowTab(tabname) {
//Show the selected tab
$('#myTab a[href="#' + tabname + '"]').tab('show');
}
// Client-side routes
Sammy(function () {
this.get('#:selectedtab', function () {
ShowTab(this.params.selectedtab);
});
//default to the first tab if there is no hash in the URL
this.get('', function () { this.app.runRoute('get', '#home') });
}).run();
</script>
</html>
помогите мне изучить symmy, помогая мне решить эту проблему... я хочу сделать маршрутизацию лучше, чем приведенный ниже скрипт...
<script type="text/javascript">
//Update the URL with the current tabs hash
$("#myTab a").click(function () { location.hash = $(this).attr('href'); });
function ShowTab(tabname) {
//Show the selected tab
$('#myTab a[href="#' + tabname + '"]').tab('show');
}
// Client-side routes
Sammy(function () {
this.get('#:selectedtab', function () {
ShowTab(this.params.selectedtab);
});
//default to the first tab if there is no hash in the URL
this.get('', function () { this.app.runRoute('get', '#home') });
}).run();
</script>