Tutorial ini adalah sambungan dari Tutorial “ASP.NET dengan JQuery” : Part1, Part2
Pada bagian ketiga ini akan dibahas beberapa topik yaitu:
- JQuery UI
- JQuery Plugin
JQuery UI
Jika anda pernah menggunakan Ajax Control Toolkit pada ASP.NET AJAX maka anda tentu sudah familiar dengan control-control seperti Accordion, DateTimePicker, HTMLEditor, dll. JQuery juga mempunyai JQuery UI yang juga memiliki widget/control yang serupa dengan ACT, bahkan mungkin lebih banyak dan bervariasi. Untuk menggunakan JQuery UI anda dapat mendownload library-nya di http://jqueryui.com. JQuery UI mendukung beberapa fitur menarik diantaranya :
Interactions
- Draggable
- Droppable
- Resizable
- Selectable
- Sortable
Widget
- Accordion
- Dialog
- Slider
- Tab
- DatePicker
- ProgressBar
Effect
- Blind
- Bounce
- Clip
- Drop
- Explode
- Fold
- Highlight
- Pulsate
- Scale
- Shake
- Slide
- Transfer
Fitur Draggable
Dengan menggunakan JQuery UI anda dapat menambahkan fitur draggable kedalam aplikasi anda.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Menggunakan JQuery UI Draggable</title>
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#drag").draggable();
});
</script>
<style type="text/css">
#drag
{
width:150px;
height:150px;
border:solid 2px #000;
padding:15px;
color:White;
font-weight:bold;
background-color:Blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="drag">
<p>Drag saya dunk !!</p>
</div>
</form>
</body>
</html>
Fitur Dropable
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dropable Feature</title>
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#drag").draggable();
$("#drop").droppable({
drop: function() {
$(this).find('p').html('Dropped!');
}
});
});
</script>
<style type="text/css">
#drag
{
width:150px;
height:150px;
border:solid 2px #000;
padding:15px;
color:White;
font-weight:bold;
background-color:Blue;
}
#drop
{
width:400px;
height:400px;
border:solid 2px #000;
padding:15px;
color:White;
font-weight:bold;
background-color:Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="drag">
<p>Drag saya dunk !</p>
</div>
<div id="drop">
<p>Drop ke saya</p>
</div>
</form>
</body>
</html>
Tab Widget
Anda juga dapat menambahkan tab dengan menggunakan JQueryUI.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Membuat Tab</title>
<link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="lib/ui/ui.core.js" type="text/javascript"></script>
<script src="lib/ui/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Bla bla bla bla bla</p>
</div>
<div id="tabs-2">
<p>Bla bla bla bla…</p>
</div>
<div id="tabs-3">
<p>bla bla bla</p>
</div>
</div>
</form>
</body>
</html>
Accordion Widget
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Menggunakan Accordion</title>
<link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="lib/ui/ui.core.js" type="text/javascript"></script>
<script src="lib/ui/ui.accordion.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien
</p>
<p>
JQuery adalah Open Source Javascript Framework atau Javascript Library yang membantu kita sebagai developer untuk bekerja dengan menggunakan javascript secara lebih mudah, cepat, dan efisien
</p>
</div>
</div>
</div>
</form>
</body>
</html>
DatePicker Widget
DatePicker widget dapat digunakan untuk memilih tanggal yang diinginkan.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Menggunakan DatePicker Widget</title>
<link href="lib/themes/base/ui.all.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="lib/ui/ui.core.js" type="text/javascript"></script>
<script src="lib/ui/ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Date: <input type="text" id="datepicker"></p>
</div>
</form>
</body>
</html>
JQuery Plugin
Selain menggunakan JQueryUI anda juga dapat mendownload berbagai macam plugin yang dapat anda gunakan pada aplikasi anda tanpa harus membuat dari awal. Plugin yang disediakan dapat didownload dan digunakan secara gratis. Anda dapat mengunjungi alamat berikut untuk mendownload JQuery Plugin http://plugins.jquery.com/.
Menggunakan Form Validator Plugin
Anda juga dapat melakukan validasi untuk inputan dengan menggunakan salah satu plugin gratis yang disediakan oleh JQuery.
Untuk menggunakan validation plugin copykan folder ‘formValidator’ kedalam folder ‘lib’ pada website anda, kemudian tulis kode berikut.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Menggunakan Validation Plugin</title>
<link href="lib/formValidator/css/template.css" rel="stylesheet" type="text/css" />
<link href="lib/formValidator/css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="lib/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="lib/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#form1").validationEngine();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Menggunakan Validation Plugin</h2>
<fieldset>
<legend>User informations</legend>
<label>
<span>First name</span>
<asp:TextBox CssClass="validate[required,custom[onlyLetter],length[0,100]] text-input" ID="firstname" runat="server" />
</label><br />
<label>
<span>Last name</span>
<asp:TextBox CssClass="validate[required,custom[onlyLetter],length[0,100]] text-input" ID="TextBox1" runat="server" />
</label><br />
<label>
<span>Date : (format YYYY-MM-DD)</span>
<asp:TextBox CssClass="validate[required,custom[date]] text-input" ID="date" runat="server" />
</label><br />
<label>
<span>Age : </span>
<asp:TextBox CssClass="validate[required,custom[onlyNumber],length[0,3]] text-input" ID="age" runat="server" />
</label><br />
<label>
<span>Telephone : </span>
<asp:TextBox CssClass="validate[required,custom[telephone]] text-input" ID="telephone" runat="server" />
</label><br />
</fieldset>
<fieldset>
<legend>Password</legend>
<label>
<span>Password : </span>
<asp:TextBox CssClass="validate[required,length[6,11]] text-input" ID="password" runat="server" />
</label><br />
<label>
<span>Confirm password : </span>
<asp:TextBox CssClass="validate[required,confirm[password]] text-input" ID="password2" runat="server" />
</label>
</fieldset>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
Actual Training 
wow, this tutorial is complete