membuat menu jquery bootstrap tanpa reload page
salam, kali ini saya akan berbagi bagaimana cara membuat menu dengan jquery bootstrap tanpa reload, tentunya udah banyak koding yang bertebaran di blog blog yang biasa di kunjungi, tetapi mungkin belum bisa memenuhi keinginan yg agan butuhkan,
okey kita langsung ke pembahasan,. untuk kali ini saya menggunakan script jquery dan html biasa
simpan dalam satu file dan berinama namafile.html, ini dia koding.a silahkan di copy
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Administrator</title>
<!-- Bootstrap -->
<link href="<?php echo base_url() ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php echo base_url() ?>assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="<?php echo base_url() ?>assets/styles.css" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body Onload="check_akses()">
<div class="navbar navbar-fixed-top" >
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" style="color:blue;" ><img src="<?php echo base_url() ?>foto/right.png" style="height:25px;"/> APPS STORE</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-user"></i> <?php echo $this->session->userdata('uname')?>
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" data-toggle="tab" href="#menu6" onclick="data_profil()" >Profile</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="<?php echo base_url() ?>index.php/home/login">Logout</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a data-toggle="tab" href="#home" onclick="data_home()"><i class="icon-home"></i> Dashboard</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-lock"></i> Users <i class="caret"></i></a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="#menu5" data-toggle="tab" onclick="data_userlist()">User List</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" id="sidebar">
<ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
<li><a href="#menu1" data-toggle="tab" onclick="data_produk()" ><i class="icon-th"></i> Products<i class="icon-chevron-right"></i></a></li>
<li><a href="#menu2" data-toggle="tab" onclick="data_apps()" ><i class="icon-list"></i> Apps<i class="icon-chevron-right"></i></a></li>
<li><a href="#menu3" data-toggle="tab" onclick="data_stats()" ><i class="icon-signal"></i> Stats<i class="icon-chevron-right"></i></a></li>
<li><a href="#menu4" data-toggle="tab" onclick="data_info()" ><i class="icon-book"></i> Informasi<i class="icon-chevron-right"></i></a></li>
</ul>
<ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
<li>
<a href="#"><i class="icon-flag"></i> Research</a>
</li>
</ul>
</div>
<!--/span-->
<div class="span9" id="content">
<ul class="nav nav-tabs" >
<li class="active" ><a data-toggle="tab" href="#home" id="1a" >Home </a></li>
<li><a data-toggle="tab" href="#menu1" id="a" >Products </a></li>
<li><a data-toggle="tab" href="#menu2" id="ab" >Apps Store </a></li>
<li><a data-toggle="tab" href="#menu3" id="abc" >Stats </a></li>
<li><a data-toggle="tab" href="#menu4" id="abcd" >Informasi </a></li>
<li><a data-toggle="tab" href="#menu5" id="userlist" >User List </a></li>
<li><a data-toggle="tab" href="#menu6" id="profil" >Profil </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>PRODUCTS </h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>APPS STORE </h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>STATS </h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu4" class="tab-pane fade">
<h3>INFORMASI </h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu5" class="tab-pane fade">
<h3>USER LIST </h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu6" class="tab-pane fade">
<h3>PROFILE</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
<!--/.fluid-container-->
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#1a').show();
$('#a').hide();
$('#ab').hide();
$('#abc').hide();
$('#abcd').hide();
$('#userlist').hide();
$('#profil').hide();
});
function data_home(){
$('ul li').removeClass('active');
$('#1a').tab().parents('li').addClass('active');
}
function data_produk(){
$('#a').show();
$('ul li').removeClass('active');
$('#a').tab().parents('li').addClass('active');
}
function data_apps(){
$('#ab').show();
$('ul li').removeClass('active');
$('#ab').tab().parents('li').addClass('active');
}
function data_stats(){
$('#abc').show();
$('ul li').removeClass('active');
$('#abc').tab().parents('li').addClass('active');
}
function data_info(){
$('#abcd').show();
$('ul li').removeClass('active');
$('#abcd').tab().parents('li').addClass('active');
}
function data_userlist(){
$('#userlist').show();
$('ul li').removeClass('active');
$('#userlist').tab().parents('li').addClass('active');
}
function data_profil(){
$('#profil').show();
$('ul li').removeClass('active');
$('#profil').tab().parents('li').addClass('active');
}
function check_akses(){
var url_logout = '<?php echo base_url() ?>index.php/home/login';
var url_akses = '<?php echo base_url() ?>index.php/users/sesi';
$.ajax({
url : url_akses,
dataType: 'html',
success : function(pesan){
if(pesan=='ok'){
$.messager.show({
title:'Salam',
msg:'Selamat Datang Di OMFOREN',
showType:'show'
});
}
else {
window.location = url_logout;
}
},
});
}
</script>
</body>
</html>
silahkan tinggalkan komentar anda.,
okey kita langsung ke pembahasan,. untuk kali ini saya menggunakan script jquery dan html biasa
simpan dalam satu file dan berinama namafile.html, ini dia koding.a silahkan di copy
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Administrator</title>
<!-- Bootstrap -->
<link href="<?php echo base_url() ?>assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php echo base_url() ?>assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="<?php echo base_url() ?>assets/styles.css" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body Onload="check_akses()">
<div class="navbar navbar-fixed-top" >
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" style="color:blue;" ><img src="<?php echo base_url() ?>foto/right.png" style="height:25px;"/> APPS STORE</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-user"></i> <?php echo $this->session->userdata('uname')?>
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" data-toggle="tab" href="#menu6" onclick="data_profil()" >Profile</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="<?php echo base_url() ?>index.php/home/login">Logout</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a data-toggle="tab" href="#home" onclick="data_home()"><i class="icon-home"></i> Dashboard</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-lock"></i> Users <i class="caret"></i></a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="#menu5" data-toggle="tab" onclick="data_userlist()">User List</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" id="sidebar">
<ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
<li><a href="#menu1" data-toggle="tab" onclick="data_produk()" ><i class="icon-th"></i> Products<i class="icon-chevron-right"></i></a></li>
<li><a href="#menu2" data-toggle="tab" onclick="data_apps()" ><i class="icon-list"></i> Apps<i class="icon-chevron-right"></i></a></li>
<li><a href="#menu3" data-toggle="tab" onclick="data_stats()" ><i class="icon-signal"></i> Stats<i class="icon-chevron-right"></i></a></li>
<li><a href="#menu4" data-toggle="tab" onclick="data_info()" ><i class="icon-book"></i> Informasi<i class="icon-chevron-right"></i></a></li>
</ul>
<ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
<li>
<a href="#"><i class="icon-flag"></i> Research</a>
</li>
</ul>
</div>
<!--/span-->
<div class="span9" id="content">
<ul class="nav nav-tabs" >
<li class="active" ><a data-toggle="tab" href="#home" id="1a" >Home </a></li>
<li><a data-toggle="tab" href="#menu1" id="a" >Products </a></li>
<li><a data-toggle="tab" href="#menu2" id="ab" >Apps Store </a></li>
<li><a data-toggle="tab" href="#menu3" id="abc" >Stats </a></li>
<li><a data-toggle="tab" href="#menu4" id="abcd" >Informasi </a></li>
<li><a data-toggle="tab" href="#menu5" id="userlist" >User List </a></li>
<li><a data-toggle="tab" href="#menu6" id="profil" >Profil </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>PRODUCTS </h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>APPS STORE </h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>STATS </h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu4" class="tab-pane fade">
<h3>INFORMASI </h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu5" class="tab-pane fade">
<h3>USER LIST </h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu6" class="tab-pane fade">
<h3>PROFILE</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
<!--/.fluid-container-->
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#1a').show();
$('#a').hide();
$('#ab').hide();
$('#abc').hide();
$('#abcd').hide();
$('#userlist').hide();
$('#profil').hide();
});
function data_home(){
$('ul li').removeClass('active');
$('#1a').tab().parents('li').addClass('active');
}
function data_produk(){
$('#a').show();
$('ul li').removeClass('active');
$('#a').tab().parents('li').addClass('active');
}
function data_apps(){
$('#ab').show();
$('ul li').removeClass('active');
$('#ab').tab().parents('li').addClass('active');
}
function data_stats(){
$('#abc').show();
$('ul li').removeClass('active');
$('#abc').tab().parents('li').addClass('active');
}
function data_info(){
$('#abcd').show();
$('ul li').removeClass('active');
$('#abcd').tab().parents('li').addClass('active');
}
function data_userlist(){
$('#userlist').show();
$('ul li').removeClass('active');
$('#userlist').tab().parents('li').addClass('active');
}
function data_profil(){
$('#profil').show();
$('ul li').removeClass('active');
$('#profil').tab().parents('li').addClass('active');
}
function check_akses(){
var url_logout = '<?php echo base_url() ?>index.php/home/login';
var url_akses = '<?php echo base_url() ?>index.php/users/sesi';
$.ajax({
url : url_akses,
dataType: 'html',
success : function(pesan){
if(pesan=='ok'){
$.messager.show({
title:'Salam',
msg:'Selamat Datang Di OMFOREN',
showType:'show'
});
}
else {
window.location = url_logout;
}
},
});
}
</script>
</body>
</html>
silahkan tinggalkan komentar anda.,
Komentar
Posting Komentar