JQuery UI Part 10 : Membuat Widget Tabs Dengan JQuery UI
Membuat Widget Tabs Dengan JQuery UI – widget tabs merupakan salah satu fitur yang berguna untuk pengelompokan konten. misalnya teman-teman memiliki beberapa judul menu besar. yang masing-masing judul nya memiliki konten nya masing-masing. bukan tidak bisa jika tidak menggunakan widget tabs. tapi akan sangat membuang-buang space pada halaman website. akan lebih bagus dan rapi jika menggunakan widget tabs. langsung saja kita masuk ke cara membuat widget tabs dengan jquery ui yang akan saya sertakan contoh nya juga agar dapat memebrikan pemahaman yg lebih untuk teman-teman yang mungkin baru mulai belajar jquery ui.
Membuat Widget Tabs Dengan JQuery UI
Membuat widget tabs dengan jquery ui sangat lah mudah. kita tidak perlu ribet-ribet lagi mengetikkan syntax javascript dan css yang terlalu panjang. kita cukup menggunakan fungsi tabs() yang telah di sediakan oleh jquery ui. jquery ui telah merangkum semua syntax javascript dan css untuk membuat widget tabs menjadi sebuah fungsi saja. silahkan perhatikan penjelasan berikut ini untuk cara membuat widget tabs dengan jquery ui.
tabs.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 10 : Membuat Widget Tabs Dengan Jquery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Widget Tabs Dengan Jquery UI | www.malasngoding.com</h1> <div id="tabs"> <ul> <li><a href="#tabs-pertama">Tutorial</a></li> <li><a href="#tabs-kedua">Malas Ngoding</a></li> <li><a href="#tabs-ketiga">JQuery UI</a></li> </ul> <div id="tabs-pertama"> <p> Tutorial jquery ui part 10 : Membuat Widget Tabs Dengan Jquery UI. ini merupakan tab pertama. di tandai dengan tabs masing-masing sesuai id. widget tab berguna untuk memberikan pengelompokan pada data dan banyak lagi kegunaan lainnya. </p> </div> <div id="tabs-kedua"> <p> www.malasngoding.com adalah sebuah situs tempat belajar pemrograman dasar, menengah hingga lanjutan. malasngoding.com menyediakan tutorial-tutorial berkualitas dan di harapkan dapat membantu siapa saja yang membaca tutorial di www.malasngoding.com dalam mempelajari pemrograman web, mobile maupun desktop. </p> <ul> <li>Web Programming</li> <li>Web Design</li> <li>Mobile App Development</li> </ul> </div> <div id="tabs-ketiga"> <p> JQuery ui merupakan library yang di kembangkan dari jquery. jquery ui di khususkan untuk bagian front-end atau bagian user interface. jquery ui menyediakan beberapa effect yang di kembangkan dari jquery dan juga beberapa widget yang sagat berguna. tinggal di gunakan dengan memberikan fungsi yang telah di sediakan oleh jquery ui. </p> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $( "#tabs" ).tabs(); }); </script> </html> |
style.css
|
1 2 3 4 5 6 7 |
body{ font-family: sans-serif; } h1{ text-align: center; } |
perhatikan pada contoh syntax di atas untuk cara membuat widget tabs. pertama kita membuat rangka tabs nya dengan html. dan memberikan dan memberikan id atau class. saya memberikan id dengan nama tabs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div id="tabs"> <ul> <li><a href="#tabs-pertama">Tutorial</a></li> <li><a href="#tabs-kedua">Malas Ngoding</a></li> <li><a href="#tabs-ketiga">JQuery UI</a></li> </ul> <div id="tabs-pertama"> <p> Tutorial jquery ui part 10 : Membuat Widget Tabs Dengan Jquery UI. ini merupakan tab pertama. di tandai dengan tabs masing-masing sesuai id. widget tab berguna untuk memberikan pengelompokan pada data dan banyak lagi kegunaan lainnya. </p> </div> <div id="tabs-kedua"> <p> www.malasngoding.com adalah sebuah situs tempat belajar pemrograman dasar, menengah hingga lanjutan. malasngoding.com menyediakan tutorial-tutorial berkualitas dan di harapkan dapat membantu siapa saja yang membaca tutorial di www.malasngoding.com dalam mempelajari pemrograman web, mobile maupun desktop. </p> <ul> <li>Web Programming</li> <li>Web Design</li> <li>Mobile App Development</li> </ul> </div> <div id="tabs-ketiga"> <p> JQuery ui merupakan library yang di kembangkan dari jquery. jquery ui di khususkan untuk bagian front-end atau bagian user interface. jquery ui menyediakan beberapa effect yang di kembangkan dari jquery dan juga beberapa widget yang sagat berguna. tinggal di gunakan dengan memberikan fungsi yang telah di sediakan oleh jquery ui. </p> </div> </div> |
lalu kemudian berikan fungsi tabs() pada id tabs.
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $( "#tabs" ).tabs(); }); </script> |
membuat widget tabs dengan jquery ui
See the Pen membuat widget tabs dengan jquery ui by Malas Ngoding (@malasngoding) on CodePen.0
Tutorial Menarik Lainnya
JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI
JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI
JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI
JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI
