Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery
Tab yang digunakan untuk membuat beberapa bagian pada halaman web yang dapat bertukar, sama seperti akordeon. Ini membantu untuk mengelompokkan konten dan melihat konten dari grup tertentu pada satu waktu.
Tab dibuat dengan mengikuti markup tertentu adalah sebagai berikut :
- Tab harus dilampirkan di dalam daftar memerintahkan atau unordered daftar
- Setiap heading tab harus dibungkus secara individual dalam item daftar dan tag enclosed yang disertakan dengan atribut href yang menentukan konten untuk setiap panel tab
- Setiap panel tab dapat kosong tetapi harus memiliki ID sendiri sesuai dengan nama hash yang dimasukkan dalam elemen jangkar tab terkait.
Isi di dalam panel tab dapat didefinisikan pada halaman yang sama atau dapat dimuat melalui Ajax, keduanya ditangani oleh atribut href yang terkait dengan tag Anchor dari panel itu. Di bawah ini kita menulis kode untuk tab 4-panel sederhana menggunakan jQuery UI.
Tab yang ditentukan dalam tag div dengan id. Id yang ditentukan di dalam kode jQuery. Di sini kita telah memilih tab 2 sebagai tab default yang akan dipilih ketika halaman web terbuka. Anda dapat mengubahnya dengan menentukan nilai yang berbeda pada pilihan aktif. Catatan: tab yang diindeks mulai dari "0".
Di bawah contoh menggambarkan jQuery Tabs :
Contoh 1 :
kode contoh ini adalah tab jQuery sederhana, semua tab dapat diakses.<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#anekatorial a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="anekatorial">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>Anekatorial</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#anekatorial").tabs({
active: 0
})
})
</script>
</body>
</html>
Output :
Contoh 2 :
menjaga semua tab tetap tertutup secara default, Anda juga dapat memilih untuk menyimpan semua tab yang ditutup secara default. Untuk melakukan ini kita menggunakan opsi dilipat dan mengatur nilainya ke "true" dan menetapkan nilai pilihan aktif ke false.
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#anekatorial a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="anekatorial">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>Anekatorial</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#anekatorial").tabs({
active: false,
collapsible: true
})
})
</script>
</body>
</html>
Output :
Contoh 3 :
dalam contoh ini kita akan menonaktifkan tab. Kita dapat memilih untuk menonaktifkan tab tertentu atau semua tab dengan menggunakan opsi Disable. Pertama, kita menonaktifkan semua tab yang kita atur nilainya "true" untuk opsi Disable.
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#anekatorial a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="anekatorial">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>Anekatoriak</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$( "#anekatorial" ).tabs({
disabled:true
})
})
</script>
</body>
</html>
Output :
Contoh 4 :
dalam contoh ini kita akan menonaktifkan beberapa tab tertentu. Dalam kode di bawah ini kita menonaktifkan tab 1 dan 3 (0 nd 2nd dalam hal pengindeksan):
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#anekatorial a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="anekatorial">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>Anekatorial</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$( "#anekatorial" ).tabs({
active: 1,
disabled:[0, 2]
})
})
</script>
</body>
</html>
Output :
Contoh 5 :
kita dapat memilih elemen yang akan dibuka secara default, juga secara default klik mouse event membuka tab, juga kita akan mengubahnya ke Mouse-Hover untuk membuka atau aktif tab itu
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#anekatorial a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="anekatorial">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>Anekatorial</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$( "#anekatorial" ).tabs({
event:'mouseover'
})
})
</script>
</body>
</html>
Output :
Contoh 6 :
pada contoh ini kita akan mengubah tinggi halaman tab tergantung pada isi dari tab tersebut. Untuk melakukan itu kita akan diminta untuk menentukan min-height sesingkat yang Anda dapat menentukan. Dan properti overflow yang akan meningkatkan tinggi halaman tab tergantung pada konten.
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
rel='stylesheet'>
</head>
<style>
b{
float: right;
margin: 7px;
color: lime;
}
#anekatorial a:hover{
color: lime;
background: gray;
}
</style>
<body>
<br>
<br>
<div id="anekatorial">
<ul>
<li><a href="#Algorithms">Algorithms</a></li>
<li><a href="#Data_Structure">Data Structure</a></li>
<li><a href="#Practice">Practice</a></li>
<li><a href="#interview">interview</a></li>
<b>Anekatorial</b>
</ul>
<div id='Algorithms'>
<p>
The answer to this is simple, we can have all the
above things only if we have performance. So
performance is like currency through which we can
buy all the above things. Another reason
for studying performance is – speed is fun!
</p>
</div>
<div id='Data_Structure'>
<p>
For example, let us say, we want to store marks of
all students in a class, we can use an array to store
them. This helps in reducing the use of number of
variables as we don’t need to create a separate
variable for marks of every subject. All marks can
be accessed by simply traversing the array.
</p>
</div>
<div id='Practice'>
<p>
Asymptotic Analysis is the big idea that handles
above issues in analyzing algorithms. In Asymptotic
Analysis, we evaluate the performance of an algorithm
in terms of input size (we don’t measure the actual
running time). We calculate, how does the time
(or space) taken by an algorithm increases with
the input size.
</p>
</div>
<div id='interview'>
<p>
Also, in Asymptotic analysis, we always talk about
input sizes larger than a constant value. It might
be possible that those large inputs are never given
to your software and an algorithm which is
asymptotically slower, always performs better for
your particular situation. So, you may end up choosing
an algorithm that is Asymptotically slower but faster
for your software.
</p>
</div>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#anekatorial").tabs().css({
'min-height': '100px',
'overflow': 'auto'
});
})
</script>
</body>
</html>
Output :
Post a Comment for "Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery"