Pages

Jumat, 21 Maret 2014

JQuery UI on ASP.NET

Jika sebelumnya kita sudah tidak asing dengan Javascript Framework seperti jQuery, Mootools, ExtJS atau yang lainnya, pada artikel ini kita akan membahas tentang jQuery UI. jQuery UI merupakan pengembangan dari jQuery yang memudahkan kita untuk membuat UI (User Interface) web yang interaktif dengan berbagai fitur dan theme.
Untuk menggunakan jQuery UI anda dapat mendownload library-nya di http://jqueryui.com. jQuery UI mendukung beberapa fitur menarik diantaranya :
Interactions Widget Effect  
Draggable
 Accordion
Blind
 Highlight
Droppable
Dialog
Bounce
Pulsate
Resizable
Slider
Clip
 Scale
Selectable
Tab
Drop
 Shake
Sortable
 DatePicker
Explode
Slide
  ProgressBar
 Fold
Transfer
Sekarang kita akan membahas penggunaan salah satu widget jQuery UI DatePicker pada ASP.NET.
1. Tambahkan library jQuery yang telah disediakan ketika kita membuat project baru.
   1: <head runat="server">
   2:     <title>Menggunakan jQuery UI DatePicker pada ASP.NET</title>
   3:     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   4:     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
   5: </head>
2. Tambahkan library jQuery UI + CSS + Image yang telah anda download dengan melakukan Add Existing Item.
   1: <link href="Style/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
   2: <script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
   3: <script src="Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>
Make sure solution project anda sebagai berikut.
Capture
3. Berikutnya kita dapat menggunakan textbox Html control maupun server control. Pada contoh ini kita menggunakan textbox server control.
   1: <asp:TextBox ID="txtDatePicker" CssClass="datepicker" runat="server"></asp:TextBox>
4. Tambahkan kode berikut pada <head>, kemudian Run(F5).
   1: <script type="text/javascript">
   2:         $(function () {
   3:             $(".datepicker").datepicker();
   4:         });
   5:     </script>
Capture
Kita juga dapat mengkostumasinya dengan animasi, mengganti format tanggalnya, interaksinya, dll. Anda dapat menyimak dokumentasinya lebih lanjut pada http://jqueryui.com/demos/datepicker/
   1: <script type="text/javascript">
   2:         $(function () {
   3:             $(".datepicker").datepicker({
   4:                 dateFormat: 'dd-MM-yy',
   5:                 showOn: 'button',
   6:                 buttonImage: 'images/calendar.png',
   7:                 buttonImageOnly: true,
   8:                 showAnim: 'slideDown'
   9:             });
  10:         });
  11:     </script>
Capture Summary
Dengan penggunaan jQuery UI menyediakan berbagai interaksi, widget, animasi yang memudahkan kita untuk membuat UI yang interaktif. Microsoft juga menyediakan Microsoft Ajax Content Delivery Network (CDN) yang dapat digunakan secara gratis, jadi anda tidak perlu repot-repot untuk mengupload library code jQuery UI, anda dapat menyimaknya disini.

Sumber :
http://mugi.or.id/blogs/danzgreyta/archive/2010/09/23/jquery-ui-on-asp-net.aspx
Diposting oleh di 22.27
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)