Tutorial Ilmu Komputer

jQuery - Membatasi Jumlah Karakter pada Textarea

Untuk suatu alasan kita perlu membatasi kareakter yang diinputkan oleh user atau pengunjung pada textarea. Misalnya pada shoutbox, sehingga pesannya yang muncul tidak terlalu panjang. Di bawah textarea akan ditampilkan karakter yang tersisa untuk bisa diinputkan. Lihat contoh berikut:

Maksimal 150 karakter

Source Code

<!DOCTYPE html>
<html>
<head>
<title>Limit Textarea</title>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $("#message").keyup(function(){
   if(this.value.length>150){
    this.value=this.value.substring(0,150);
   }
   $("#remaining").text("Karakter tersisa : " + (150-this.value.length));
    })
  })
</script>
</head>

<body>
<textarea cols="30" id="message" rows="8" >Tulis pesan di sini</textarea>
<p id="remaining">Maksimal 150 karakter</p>
</body>
</html>

Pertama kita cek apakah value dari textarea lebih besar dari 150, gunakan event keyup. Bila lebih maka kita ambil 150 karakter saja dengan fungsi substring(awal, jumlah). Terakhir kita tampilkan karakter tersisa pada tag p dengan id remaining.

0 komentar

JQuery UI - Membuat List Sortable

Sortable Standard

Microsoft Office
Visual Foxpro
PHP
jQuery
Visual Basic

Source code

<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
 });
</script>
<style>
 ul#sortable{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;}
 ul#sortable li{list-style:none; margin: 0 3px 3px 3px; padding: 0.4em; padding-left:20px; height:20px;}
</style>
<h3>Sortable Default</h3>
<ul id="sortable">
 <li class="ui-state-default">Microsoft Office</li>
 <li class="ui-state-default">Visual Foxpro</li>
 <li class="ui-state-default">PHP</li>
 <li class="ui-state-default">jQuery</li>
 <li class="ui-state-default">Visual Basic</li>
</ul>

Sortable dengan PlaceHolder

Microsoft Office
Visual Foxpro
PHP
jQuery
Visual Basic

Source code

<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable" ).sortable({
   placeholder: "ui-state-highlight"
  });
  $( "#sortable" ).disableSelection();
 });
</script>
<style>
 ul#sortable{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;}
 ul#sortable li{list-style:none; margin: 0 3px 3px 3px; padding: 0.4em; padding-left:20px; height:20px;}
</style>
<h3>Sortable dengan Placeholder</h3>
<ul id="sortable">
 <li class="ui-state-default">Microsoft Office</li>
 <li class="ui-state-default">Visual Foxpro</li>
 <li class="ui-state-default">PHP</li>
 <li class="ui-state-default">jQuery</li>
 <li class="ui-state-default">Visual Basic</li>
</ul>

Dua Sortable yang Berhubungan

Microsoft Office
Visual Foxpro
PHP
jQuery
Visual Basic

Microsoft Office
Visual Foxpro
PHP
jQuery
Visual Basic

Source code

<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable1, #sortable2" ).sortable({
   connectWith: ".connected"
  }).disableSelection();
 });
</script>
<style>
 ul#sortable1,ul#sortable2{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;float:left}
 ul#sortable1 li, ul#sortable2 li{list-style:none; margin: 0 3px 3px 3px; padding: 0.4em; padding-left:20px; height:20px;}
</style>
<h3>Dua List Sortable yang  Berhubungan</h3>
<ul id="sortable1" class="connected">
 <li class="ui-state-default">Microsoft Office</li>
 <li class="ui-state-default">Visual Foxpro</li>
 <li class="ui-state-default">PHP</li>
 <li class="ui-state-default">jQuery</li>
 <li class="ui-state-default">Visual Basic</li>
</ul>
<ul id="sortable2" class="connected">
 <li class="ui-state-highlight">Microsoft Office</li>
 <li class="ui-state-highlight">Visual Foxpro</li>
 <li class="ui-state-highlight">PHP</li>
 <li class="ui-state-highlight">jQuery</li>
 <li class="ui-state-highlight">Visual Basic</li>
</ul>

Sortable dalam Grid

Source code

<link href='development-bundle/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'/>
<script src='development-bundle/jquery-1.5.1.js'></script>
<script src='development-bundle/ui/jquery.ui.core.js'></script>
<script src='development-bundle/ui/jquery.ui.widget.js'></script>
<script src='development-bundle/ui/jquery.ui.position.js'></script>
<script src='development-bundle/ui/jquery.ui.mouse.js'></script>
<script src='development-bundle/ui/jquery.ui.sortable.js'></script>
<script language="javascript">
 $(function() {
  $( "#sortable" ).sortable({
   placeholder: "ui-state-highlight"
  }).disableSelection();
 });
</script>
<style type="text/css">
 ul#sortable{list-style-type: none ; margin: 0; padding: 0; width:200px; font-size:12px;}
 ul#sortable li{width:50px; height:50px; text-align:center; line-height:50px; font-size:30px; float:left; margin:2px;list-style:none; }
</style>
<h3>Sortable dalam Grid</h3>
<ul id="sortable">
 <li class="ui-state-default">1</li>
 <li class="ui-state-default">2</li>
 <li class="ui-state-default">3</li>
 <li class="ui-state-default">4</li>
 <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
 <li class="ui-state-default">7</li>
 <li class="ui-state-default">8</li>
 <li class="ui-state-default">9</li>
</ul>

0 komentar

jQuery UI - Membuat Tabs View

Tabs atau Tab view merupakan control untuk menampilkan beberapa content dan dikelompokkan ke dalam tab-tab. Tabs berisi navigasi untuk menampilkan atau berpindah dari konten satu ke konten lainnya..

Tabs Standar

Untuk mambuat tabs standar kita memerlukan tige jenis script

CSS jQuery UI jquery.ui.all.css.
Library jQuery jquery-1.5.1.js.
Script jQuery UI:
- jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.mouse.js yang merupakan script utama setiap memanggil widget jquery ui. dan
- jquery.ui.tabs.js untuk widget tabs.

Selengkapnya tentang cara download dan instalasi jquery UI.

Section 1
Section 2
Section 3

List satu
List dua
List tiga

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
   $("#tabs").tabs()
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs Standar</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Tabs on Mouseover

Tabs bisa juga dibuka saat mouseover dengan menambahkan event:"mouseover".

Section 1
Section 2
Section 3

List satu
List dua
List tiga

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
   $("#tabs").tabs({
     event:"mouseover"
   })
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs on Mouseover</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Tabs Collapse

Collapse maksudnya, semua konten dapat ditutup (collapsed). Coba klik dua kali pada salah satu tab.

Section 1
Section 2
Section 3

List satu
List dua
List tiga

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
   $("#tabs").tabs({
     collapsible:true
   })
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs Collapse</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Tabs Sortable

Tabs juga bisa diurutkan atau dipindah-pindah dengan men-drag tab. Untuk itu perlu dipanggil script jquery.ui.sortable.js.

Section 1
Section 2
Section 3

List satu
List dua
List tiga

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
  $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<h3>Tabs Sortable</h3>

<div id="tabs" style="width:400px;">
    <ul>
        <li><a href="#tabs-1">Section 1</a></li>
        <li><a href="#tabs-2">Section 2</a></li>
        <li><a href="#tabs-3">Section 3</a></li>
    </ul>
    <div id="tabs-1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="tabs-2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <ul>
        <li>List satu</li>
        <li>List dua</li>
        <li>List tiga</li>
    </ul>
    </div>
    <div id="tabs-3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

0 komentar

jQuery UI - Membuat Menu Accordion

Accordion digunakan untuk mengelompokkan content dalam panel-panel terpisah, dimana kita dapat membuka/menutup panel-panel yang yang diinginkan. Disamping itu, accordion bisa digunakan untuk menglompokkan menu-menu yang sejenis. Walaupun content-content bisa dibuka/ditutup, accordion hanya bisa dibuka satu saja. Artinya ketika anda membuka panel yang lainnya, panel sebelumnya akan otomatis tertutup seperti pada Tabs.

Accordion Standar

Untuk mambuat accordion kita memerlukan tige jenis script

CSS jQuery UI jquery.ui.all.css.
Library jQuery jquery-1.5.1.js.
Script jQuery UI:
- jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.mouse.js yang merupakan script utama setiap memanggil widget jquery ui. dan
- jquery.ui.accordion.js untuk widget accordion.

Selengkapnya tentang cara download dan instalasi jquery UI.

Section 1

Section 2

List satu
List dua
List tiga

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.accordion.js"></script>
<script>
 $(function() {
  $( "#accordion" ).accordion();
 });
</script>
<style>
 .ui-widget{
  font-size:10px;
 }
</style>
    <div id="accordion" style="width:400px;">
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <ul>
                <li>List satu</li>
                <li>List dua</li>
                <li>List tiga</li>
            </ul>
        </div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>         
        </div>
    </div>

Menentukan panel yang terbuka (Active)

Secara default, panel yang terbuka (active) adalah yang pertama. Kita bisa menentukan panel mana yang aktif saat pertama kali muncul dengan menambahkan active pada accordion. Penomoran panel dimulai dari 0, misalnya anda ingin panel yang kedua dibuka isi dengan active:1. Lihat demo berikut :

Section 1

Section 2

List satu
List dua
List tiga

Section 3

Atau jika anda ingin semua panel tertutup isi active:false.

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.accordion.js"></script>
<script>
 $(function() {
  $( "#accordion" ).accordion({
    active:1
  });
 });
</script>
<style>
 .ui-widget{
  font-size:10px;
 }
</style>
    <div id="accordion" style="width:400px;">
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <ul>
                <li>List satu</li>
                <li>List dua</li>
                <li>List tiga</li>
            </ul>
        </div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>         
        </div>
    </div>

Accordion Mouseover

Accordion tidak hanya bisa dibuka/ditutup ketika diklik, tetapi juga ketika mouse diarahkan ke panel (on mouseover). Pada contoh berikut ditambahkan setting autoHeight:false supaya content ditampilkan semua dan tidak discroll.

Section 1

Section 2

List satu
List dua
List tiga

Section 3

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.accordion.js"></script>
<script>
 $(function() {
  $("#accordion").accordion({
   event: "mouseover",
   autoHeight:false
  })
 });
</script>
<style>
 .ui-widget{
  font-size:10px;
 }
</style>
    <div id="accordion" style="width:400px;">
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <ul>
                <li>List satu</li>
                <li>List dua</li>
                <li>List tiga</li>
            </ul>
        </div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>         
        </div>
    </div>

Accordion Collapse

Seperti yang dijelaskan sebelumnya, accordion tidak bisa dibuka semuanya tetapi bisa ditutup semuanya, coba klik dua kali pada salah satu panel.

Section 1

Section 2

List satu
List dua
List tiga

Section 3

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.accordion.js"></script>
<script>
 $(function() {
  $("#accordion").accordion({
   autoHeight:false,
   collapsible: true, 
  })
 });
</script>
<style>
 .ui-widget{
  font-size:10px;
 }
</style>
    <div id="accordion" style="width:400px;">
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <ul>
                <li>List satu</li>
                <li>List dua</li>
                <li>List tiga</li>
            </ul>
        </div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>         
        </div>
    </div>

Accordion Resizable

Accordion bisa diubah ukurannya (resize) dengan memanggil script tambahan yaitu jquery.ui.resizable.js.

Section 1

Section 2

List satu
List dua
List tiga

Section 3

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.accordion.js"></script>
<script src="development-bundle/ui/jquery.ui.resizable.js"></script>
<script>
 $(function() {
  $("#accordion").accordion({
   fillSpace:true,
   collapsible: true, 
  })  
  $( "#acresize" ).resizable({
   minHeight: 140,
   minWidth: 200,
   resize: function() {
    $( "#accordion" ).accordion( "resize" );
   }
  }); 
 });
</script>
<style>
 .ui-widget{
  font-size:10px;
 }
</style>
<div id="acresize" style="padding:10px; width:380px; height:250px;" class="ui-widget-content">
<div id="accordion">
<h3>
<a href="javascript:void(0)">Section 1</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h3>
<a href="javascript:void(0)">Section 2</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ul>
<li>List satu</li>
<li>List dua</li>
<li>List tiga</li>
</ul>
</div>
<h3>
<a href="javascript:void(0)">Section 3</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>

Acordion Sortable

Posisi accordion bisa diubah dan diurutkan dengan mendrag salah satu panel.

Section 1

Section 2

List satu
List dua
List tiga

Section 3

Panggil script jquery.ui.sortable.js, pada setiap content tambahkan elemen "div" seperti yang dicetak tebal berikut:

Source code

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.accordion.js"></script>
<script src="development-bundle/ui/jquery.ui.sortable.js"></script>
<script>
 $(function() {
  var stop = false;
  $( "#accordion h3" ).click(function( event ) {
   if ( stop ) {
    event.stopImmediatePropagation();
    event.preventDefault();
    stop = false;
   }
  });
  $( "#accordion" )
   .accordion({
    header: "> div > h3"
   })
   .sortable({
    axis: "y",
    handle: "h3",
    stop: function() {
     stop = true;
    }
   });
 });
</script>
<style>
 .ui-widget{
  font-size:10px;
 }
</style>



<div id="accordion" style="width:400px;">
 <div>
  <h3><a href="#">Section 1</a></h3>
  <div>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
    <div>
  <h3><a href="#">Section 2</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <ul>
                <li>List satu</li>
                <li>List dua</li>
                <li>List tiga</li>
            </ul>
        </div>
 </div>
    <div>    
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>   
        </div>      
 </div>
</div>

0 komentar

Tutorial jQuery UI Kotak Dialog (Dialog Box)

Biasanya kita memunculkan pesan atau informasi melaui alert atau confirm pada javascript. Tapi dengan jQuery UI kita bisa membuat kotak dialog yang inovatif, bisa didrag dan resize. Content dialog bisa berupa text, gambar , atau form login seperti pada twitter.

Kotak dialog standar

Source Code:

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js"></script>
<script>
 $(function() {
  $( "#dialog" ).dialog();
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<div id="dialog" title="Judul Dialog">
 <p>Ini adalah contoh isi dialog standar</p>
</div>

Untuk mambuat dialog box kita memerlukan tige jenis script

CSS jQuery UI jquery.ui.all.css.
Library jQuery jquery-1.5.1.js.
Script jQuery UI:
- jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.mouse.js yang merupakan script utama setiap memanggil widget jquery ui. dan
- jquery.ui.dialog.js untuk widget dialog.

Selengkapnya tentang cara download dan instalasi jquery UI.

Kotak dialog dengan button

Ini adalah dialog yang dibuka dengan tombol.

Source Code:

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js"></script>
<script>
 $(function() {
  $( "#dialog" ).dialog({autoOpen: false});

  $( "#buka" ).click(function() {
   $( "#dialog" ).dialog( "open" );
   return false;
  });
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<div id="dialog" title="Dialog Button">
 <p>Ini adalah dialog yang dibuka dengan tombol</p>
</div>

<button id="buka">Buka</button>

Kotak dialog resizable dan draggable

Ini adalah contoh isi resizable draggable. Anda bisa menggeser dan mengubah ukurannya.

Source Code:

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js"></script>
<script>
 $(function() {
  $( "#dialog" ).dialog();
  
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<div id="dialog" title="Judul Resizable Draggable">
 <p>Ini adalah contoh isi resizable draggable. Anda bisa menggeser dan mengubah ukurannya.</p>
</div>

Supaya bisa didrag dan diresize, hanya tinggal memanggil jquery.ui.resizable.js dan jquery.ui.draggable.js.

Kotak dialog dengan animasi

Ini adalah contoh isi dengan animasi effect. Bounce ketika muncul dan explode ketika di close

Source Code:

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js"></script>
<script src="development-bundle/ui/jquery.effects.core.js"></script>
<script src="development-bundle/ui/jquery.effects.bounce.js"></script>
<script src="development-bundle/ui/jquery.effects.explode.js"></script>
<script>
 $(function() {
  $( "#dialog" ).dialog({
   modal:true,
   show:"bounce",
   hide:"explode"
  });
  
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<div id="dialog" title="Dialog Animation">
 <p>Ini adalah contoh isi dengan animasi effect. Bounce ketika muncul dan explode ketika di close</p>
</div>

Untuk menambahkan effect kita perlu memanggil script effect yang diinginkan ditambah dengan jquery.effects.core.js.

Kotak dialog Konfirmasi

Anda yakin mau menghapus data ini?

Source Code:

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.button.js"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js"></script>

<script>
 $(function() {
  $( "#dialog-confirm" ).dialog({
   height:150,
   modal: true,
   buttons: {
    "Delete": function() {
     $( this ).dialog( "close" );
     alert("Data terhapus!");
    },
    "Cancel": function() {
     $( this ).dialog( "close" );
    }
   }
  });
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<div id="dialog-confirm" title="Konfirmasi">
 <p>Anda yakin mau menghapus data ini?</p>
</div>

Tambahkan script jquery.ui.button.js.

Kotak dialog Login

Source Code:

<link href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="development-bundle/jquery-1.5.1.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js"></script>
<script>
 $(function() {
  $( "#dialog" ).dialog({
   autoOpen:false,
   modal: true,
   buttons: {
    "Login": function() {
     $( this ).dialog( "close" );
    },
    "Cancel": function() {
     $( this ).dialog( "close" );
    }
   }
  });
  $( "#buka" ).click(function() {
   $( "#dialog" ).dialog( "open" );
   return false;
  });
 });
</script>
<style>
 .ui-widget{
  font-size:11px;
 }
</style>
<div id="dialog" title="Login">
 <form>
 <fieldset>
  <label for="username">Username</label>
  <input type="text" name="username" id="username" />
  <label for="password">Password</label>
  <input type="password" name="password" id="password"/>
 </fieldset>
 </form>
</div>
<button id="buka">Login</button>

0 komentar

Tutorial jQuery UI - Download dan Instalasi

Plugin merupakan salah satu faktor utama yang membuat jQuery begitu cepat populer. Kesederhanaan jQuery API membuat para programer dengan mudah berkreasi menciptakan fungsi-fungsi tambahan untuk jQuery. Jquery UI (User Interface) merupakan salah satu plugin yang paling poluler, dimana anda dapat membangun aplikasi web yang interactive.

Kompatibility

1.8.14 (jquery 1.3.2+)
1.7.3 (jQuery 1.3+)

Instalasi jQuery UI
Sebenarnya instalasi bukan berarti install seperti software, tetapi memasang atau menempatkan library jquery ui pada web.

Download jquery ui di sini.
Pilih versi 1.8.14 Stable
File yang didownload berbentuk ZIP, jadi anda extract terlebih dahulu.
Copy folder development-bundle ke folder root website anda. Misalnya untuk memanggil datepicker:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>jQuery UI Example Page</title>
  <link type="text/css" href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="development-bundle/jquery-1.5.1.js"></script>
  <script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>        
  <script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>        
  <script type="text/javascript">
   $(function(){
    $('#datepicker').datepicker();
   });
  </script>
  <style type="text/css">
   .ui-widget{font-size:12px;}
  </style> 
 </head>
 <body>
  <div id="datepicker"></div>
 </body>
</html>

Jadi singkatnya kita harus memanggil tiga script yaitu:

JQuery yaitu jquery-1.5.1.js.
JQuery UI yaitu jquery.ui.core.js dan jquery.ui.datepicker.js (untuk datepicker).
Theme yaitu jquery.ui.all.css.

Anda juga bisa memanggil jquery-ui-1.8.14.custom.js untuk memanggil semua widget jquery ui. Namun saran saya sebaiknya anda memanggil satu per satu karena hal tersebut dapat memperlambat loading halaman web anda.

Menerapkan jQuery UI pada Blog

Untuk menerapkannya dalam blog kita tidak bisa mendownload kemudian mengcopy folder jquery ui ke blog. Untuk itu kita panggil saja script jquery yang sudah online taruh diatas tag </head> pada template blog. Untuk versi 1.8.4 ada pada alamat http://jquery-ui.googlecode.com/svn/tags/1.8.4. Misalnya untuk datepicker:

<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.8.14/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8.14/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8.14/ui/jquery.ui.core.js"></script>        
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8.14/ui/jquery.ui.datepicker.js"></script>

Fungsi - Fungsi yang ditawarkan oleh jQuery UI (versi 1.8.14) diantaranya:

Interactions
- Dragable
- Dropable
- Resizable
- Selectable
- Sortable
Widget
- Accordion
- AutoComplete
- Button
- Datepicker
- Dialog
- Progressbar
- Slider
- Tabs
Efects
- Color Animation
- Toogles Class
- Add Class
- Remove Class
- Switch Class
- Effect
- Toogle
- Hide
- Show
Utilities
- Position

Accordian

Header 1

Isi accordion 1

Header 2

Isi accordion 2

Header 3

Isi accordion 3

Header 4

Isi accordion 4

Auto Complete

Ketik "a"
Tags:

Button

DatePicker

Dialog

Selamat Datang di Tutorial Ilmu Komputer

Progress Bar

Slider

Tab View

Ini untuk tab satu

Ini untuk tab dua

Ini untuk tab Tiga

0 komentar

Tutorial Menampilkan Datepicker dengan jQuery UI

Date picker digunakan untuk menampilkan tanggal dari sistem calender yang ada di komputer. Datepicker memudahkan kita menginputkan data tanggal pada text field. Lihat contoh datepicker berikut:

1. Datepicker Standard

Date:

Surce code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>

<script>
 $(function() {
  $( "#datepicker" ).datepicker();
 });
</script>
Date: <input id="datepicker" type="text" />

Sebelum memanggil fungsi datepicker, yang paling penting adalah kita harus memanggil script jquery.min.js, jquery-ui.min.js, dan jquery-ui.css. jquery.min.js merupakan library utama jquery. Versi jquery yang digunakan mulai dari 1.3.2 ke atas yang bisa di download di sini. Yang kedua jquery-ui.min.js library jquery ui (User Interface) versi yang saya gunakan adalah 1.8 yang bisa di doanload di sini. Yang terakhir adalah css untuk jquery ui jquery-ui.css.

Barulah kita memanggil fungsi datepicker dengan script $( "#datepicker" ).datepicker(). #datepicker adalah id dari textfield dimana datepicker akan dimunculkan. Mudah bukan? ya, memang itulah yang membuat jquery begitu populer, dengan sedikit baris kode menghasilkan tampilan yang luar biasa. Oke, kita lanjut dengan memodifikasi tampilan datepicker. . .

2. Mengubah Format Tanggal Datepicker

Defaultnya, format tanggal pada datepicker adalah "mm/dd/yyyy". Kita bisa mengubahnya dengan mengisi format. Seperti contoh berikut:

Date:

Source Code:

<script>
 $(function() {
  $( "#datepicker" ).datepicker({
    dateFormat:"dd/MM/yyyy";
  });
 });
</script>

Huruf kapital "MM" berarti bulann akan ditampilkan namanya, sedangkan huruf kecil "mm" berarti bulan akan ditampilkan dalam bentuk angka.

3. Mengisi Rentangan Tanggal pada Datepicker

Membatasi maksudnya tanggal yang bisa dipilih hanya tanggal sekian sampai tanggal sekian sesuai keinginaan anda, tanggal yang lainnya akan menjadi disable. Contohnya:

Date:

Coba geser ke bulan sebelum dan sesudahnya.

Source Code:

<script>
 $(function() {
  $( "#datepicker" ).datepicker({ minDate: -10, maxDate: "+1M +3D" });
 });
</script>

minDate adalah tanggal awal dan maxDate adalah tanggal akhir. -10 berarti sepuluh hasi sebelum tanggal sekarang. Selain itu bisa digunakan satuan D untuk hari, W untuk minggu, M untuk Bulan, dan Y untuk tahun.

4. Mengubah Format Bahasa (Regional Setting)

Date:

Source Code:

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js' type='text/javascript'/>
<script>
$(function() {
  $( "#datepicker" ).datepicker( $.datepicker.regional[ "id" ] );
});
</script>

Untuk mengubah bahasa (regional), perlu ditambahkan script jquery-ui-i18n.min.js, kemudian pada regional diisi dengan kode negara.

5. Menu Dropdown untuk Bulan dan Tahun

Date:

Source Code:

<script>
$(function() {
 $( "#datepicker" ).datepicker({
  changeMonth: true,
  changeYear: true
 });
});
</script>

6. Range tanggal dengan dua text field

From : to

Misalnya pada text field from anda memilih 2 januari, maka pada text field to anda hanya bisa memilih tanggal 2 januari dan setelahnya, begitu juga sebaliknya.

Source Code:

<script>
    $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
</script>
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>

Buat dua buah text field dengan id from dan to.

Tutorial Ilmu Komputer

Sortable Standard

Sortable dengan PlaceHolder

Dua Sortable yang Berhubungan

Sortable dalam Grid

Tabs Standar

Tabs on Mouseover

Tabs Collapse

Tabs Sortable

Accordion Standar

Menentukan panel yang terbuka (Active)

Accordion Mouseover

Accordion Collapse

Accordion Resizable

Acordion Sortable

Kotak dialog standar

Kotak dialog dengan button

Kotak dialog resizable dan draggable

Kotak dialog dengan animasi

Kotak dialog Konfirmasi

Kotak dialog Login

Accordian

Auto Complete

Button

DatePicker

Dialog

Progress Bar

Slider

Tab View

1. Datepicker Standard

2. Mengubah Format Tanggal Datepicker

3. Mengisi Rentangan Tanggal pada Datepicker

4. Mengubah Format Bahasa (Regional Setting)

5. Menu Dropdown untuk Bulan dan Tahun

6. Range tanggal dengan dua text field

MY PAGE RANK

Sponsor

Facabook

Followers

Labels