jQuery UI Season #1 | For Widget
Menyeleksi Fitur Objek Dengan jQuery UI - jQuery adalah sekumpulan element perintah file script dari berbagai gabungan fitur-fitur seperti CSS, JavaScript, ekstensi, plug-ins dan masih banyak lagi, sedangakan UI merupakan singkatan dari User Interface (penggunaan file dalam ruang antar muka) atau bisa disebut juga dengan penyeleksi fitur yang terpanggil dalam halaman JavaScript itu sendiri. Banyak fitur-fitur element yang terkandung dalam jQuery, beberapa diantaranya adalah :
Pembahasan ini saya khususkan buat sahabat semua pecinta SAHABAT BLOGGER 77 terutama yang banyak mengeluhkan penulisan sebuah kode script yang sangat panjang dalam membuat sebuah tutorial efek, sehingga banyak yang berkomentar dengan nada seperti ini:
1. CSSnya banyak sekali mbak.! ➞ Comment From Wahab Saputra
2. Keren, tapi bingungin itu kodenya banyak sekali mbak.! ➞ Comment From Hendri Hendriyana
3. wow keren, tapi scriptnya lumanyan banyak ➞ From Heri Assidiqi
Alasannya, karena semua dasar kode harus kita tuliskan secara menyeluruh untuk memanggil efeknya dalam sebuah implementasi effect, namun dengan menggunakan jQuery UI Anda tidak perlu lagi menuliskan kode-kode diatas secara awal sampai akhir. Semuanya bisa Anda persingkat dengan penulisan script jQuery seperti ini:
Fitur Widget dalam jQuery UI
1.1 <script src="//Data-URL/jquery-1.10.2.js"></script>
1.2 <script src="//Data-URL/ui/1.11.4/jquery-ui.js"></script>
Dengan menggunakan JQuery seperti diatas Anda bisa menuangkan semua inspirasi serta kreatifitas Anda untuk membuat sebuah website yang lebih dinamis, interaktif dan ramah pengguna dengan menyediakan aplikasi tampilan widget yang keren dan menarik di blog Anda.
Sekarang mari kita lihat, apa kehebatan script yang terkandung dalam jQuery UI diatas. Pertemuan kali ini saya akan coba membuat sebuah gambar dengan efek drag (menggeser untuk memindahkan posisi gambar dengan perintah mouse), tanpa CSS yang panjang, perintah JavaScript, cukup menggunakan script jQuery UI seperti ini:
Hasilnya :
DEMO SHOW
Loh.!! kan hanya sebuah gambar saja mbak DEVY, efek drag itu seperti apa.?
Disana ada sebuah gambar yang saya letakkan pada position-left, gambar tersebut bisa Anda pindahkan posisinya dimana saja sesuai perintah Mouse Anda. Caranya, cukup KLIK gambar, lalu tahan KLIK (jangan lepaskan KLIK mouse Anda), tinggal geser posisi gambar kekanan, kekiri, keatas atau kebawah sesuai keinginan Anda, maka gambar akan bergeser mengikuti panah mouse Anda kemanapun pergi. Menarik bukan.?, nah.! setelah ini efek apa yang akan Anda buat selanjutnya untuk membuat halaman website Anda terlihat dinamis, interaktif dan ramah pengguna, dengan jQuery UI apa saja bisa, itu sih terserah Anda guys mau membuat apa..!! hehe..
Next time saya akan berikan yang lebih menarik lagi dari hari ini, sampai jumpa..!!?
- Untuk halaman HTML khususnya digunakan untuk menyeleksi pemakaian element DOM, sehingga website lebih dinamis, interaktif dan ramah pengguna
- Support CSS 3 untuk memanipulasi atribut id/class pada selektor CSS
- Event dan widget
- AJAX Aplications
- Efek gerak seperti transisi dan animasi
- Ekstensi dan Plug-ins
- Kompatibilitas yang mendukung hampir semua Browser modern (all peramban support)
- User Agent, Feature detection dan masih banyak lagi.
Kesimpulan :
jQuery merupakan sekumpulan library JavaScript yang dibuat untuk mempermudah pembuatan sebuah halaman website dengan HTML yang dapat berjalan saat pengguna membuka halaman website tersebut. Sedangkan dasar Script jQuery dibuat untuk memudahkan alur-alur tata letak ruang halaman untuk mengatur pemakaian document perintah seperti menyeleksi object dengan element DOM, membuat sebuah widget yang ramah (User-Friendly) serta membuat aplikasi dengan AJAX.
jQuery merupakan sekumpulan library JavaScript yang dibuat untuk mempermudah pembuatan sebuah halaman website dengan HTML yang dapat berjalan saat pengguna membuka halaman website tersebut. Sedangkan dasar Script jQuery dibuat untuk memudahkan alur-alur tata letak ruang halaman untuk mengatur pemakaian document perintah seperti menyeleksi object dengan element DOM, membuat sebuah widget yang ramah (User-Friendly) serta membuat aplikasi dengan AJAX.
Pembahasan ini saya khususkan buat sahabat semua pecinta SAHABAT BLOGGER 77 terutama yang banyak mengeluhkan penulisan sebuah kode script yang sangat panjang dalam membuat sebuah tutorial efek, sehingga banyak yang berkomentar dengan nada seperti ini:
1. CSSnya banyak sekali mbak.! ➞ Comment From Wahab Saputra
2. Keren, tapi bingungin itu kodenya banyak sekali mbak.! ➞ Comment From Hendri Hendriyana
3. wow keren, tapi scriptnya lumanyan banyak ➞ From Heri Assidiqi
Alasannya, karena semua dasar kode harus kita tuliskan secara menyeluruh untuk memanggil efeknya dalam sebuah implementasi effect, namun dengan menggunakan jQuery UI Anda tidak perlu lagi menuliskan kode-kode diatas secara awal sampai akhir. Semuanya bisa Anda persingkat dengan penulisan script jQuery seperti ini:
<script src=”//(data-script URL)/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
...
// Kode Jquery anda tuliskan disini
});
if (document)getElement By (id(#),class(.)) {
else,{
// Letakkan sebuah widget disini..
// effect for animation (or) transition file..
},
};
</script>
<script type=”text/javascript”>
$(document).ready(function() {
...
// Kode Jquery anda tuliskan disini
});
if (document)getElement By (id(#),class(.)) {
else,{
// Letakkan sebuah widget disini..
// effect for animation (or) transition file..
},
};
</script>
Fitur Widget dalam jQuery UI
1.1 <script src="//Data-URL/jquery-1.10.2.js"></script>
1.2 <script src="//Data-URL/ui/1.11.4/jquery-ui.js"></script>
var widget_uuid = 0,
widget_slice = Array.prototype.slice;
$.cleanData = (function( orig ) {
return function( elems ) {
var events, elem, i;
for ( i = 0; (elem = elems[i]) != null; i++ ) {
try {
events = $._data( elem, "events" );
if ( events && events.remove ) {
$( elem ).triggerHandler( "remove" );}
} catch ( e ) {}}
orig( elems );};
})( $.cleanData );
$.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype,
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];
name = name.split( "." )[ 1 ];
fullName = namespace + "-" + name;
if ( !prototype ) {prototype = base;base = $.Widget;}
// create selector for plugin
$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
return !!$.data( elem, fullName );};
$.widget.extend = function( target ) {
var input = widget_slice.call( arguments, 1 ),
inputIndex = 0,
inputLength = input.length,key,value;
for ( ; inputIndex < inputLength; inputIndex++ ) {
for ( key in input[ inputIndex ] ) {
value = input[ inputIndex ][ key ];
if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {
// Clone objects
if ( $.isPlainObject( value ) ) {
target[ key ] = $.isPlainObject( target[ key ] ) ?
$.widget.extend( {}, target[ key ], value ) :
// Don't extend strings, arrays, etc. with objects
$.widget.extend( {}, value );
// Copy everything else by reference
} else {target[ key ] = value;}
}
}}return target;
};
$.widget.bridge = function( name, object ) {
var fullName = object.prototype.widgetFullName || name;
$.fn[ name ] = function( options ) {
var isMethodCall = typeof options === "string",
args = widget_slice.call( arguments, 1 ),
returnValue = this;
if ( isMethodCall ) {
this.each(function() {
var methodValue,
instance = $.data( this, fullName );
if ( options === "instance" ) {
returnValue = instance;
return false;}
if ( !instance ) {
return $.error( "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'" );}
if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
return $.error( "no such method '" + options + "' for " + name + " widget instance" );
}
}});
} else {
// Allow multiple hashes to be passed on init
if ( args.length ) {
options = $.widget.extend.apply( null, [ options ].concat(args) );}
this.each(function() {
var instance = $.data( this, fullName );
if ( instance ) {
instance.option( options || {} );
if ( instance._init ) {instance._init();}
} else {
$.data( this, fullName, new object( options, this ) );}
});
}return returnValue;
};
};
$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
$.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
if ( typeof options === "string" ) {
options = { effect: options };}
var hasOptions,effectName = !options ?method :
options === true || typeof options === "number" ?
defaultEffect :
options.effect || defaultEffect;
options = options || {};
if ( typeof options === "number" ) {options = { duration: options };}
hasOptions = !$.isEmptyObject( options );
options.complete = callback;
if ( options.delay ) {element.delay( options.delay );}
if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
element[ method ]( options );
} else if ( effectName !== method && element[ effectName ] ) {
element[ effectName ]( options.duration, options.easing, callback );
} else {
element.queue(function( next ) {
$( this )[ method ]();
if ( callback ) {
callback.call( element[ 0 ] );}
next();
});
}};
});
var widget = $.widget;
widget_slice = Array.prototype.slice;
$.cleanData = (function( orig ) {
return function( elems ) {
var events, elem, i;
for ( i = 0; (elem = elems[i]) != null; i++ ) {
try {
events = $._data( elem, "events" );
if ( events && events.remove ) {
$( elem ).triggerHandler( "remove" );}
} catch ( e ) {}}
orig( elems );};
})( $.cleanData );
$.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype,
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];
name = name.split( "." )[ 1 ];
fullName = namespace + "-" + name;
if ( !prototype ) {prototype = base;base = $.Widget;}
// create selector for plugin
$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
return !!$.data( elem, fullName );};
$.widget.extend = function( target ) {
var input = widget_slice.call( arguments, 1 ),
inputIndex = 0,
inputLength = input.length,key,value;
for ( ; inputIndex < inputLength; inputIndex++ ) {
for ( key in input[ inputIndex ] ) {
value = input[ inputIndex ][ key ];
if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {
// Clone objects
if ( $.isPlainObject( value ) ) {
target[ key ] = $.isPlainObject( target[ key ] ) ?
$.widget.extend( {}, target[ key ], value ) :
// Don't extend strings, arrays, etc. with objects
$.widget.extend( {}, value );
// Copy everything else by reference
} else {target[ key ] = value;}
}
}}return target;
};
$.widget.bridge = function( name, object ) {
var fullName = object.prototype.widgetFullName || name;
$.fn[ name ] = function( options ) {
var isMethodCall = typeof options === "string",
args = widget_slice.call( arguments, 1 ),
returnValue = this;
if ( isMethodCall ) {
this.each(function() {
var methodValue,
instance = $.data( this, fullName );
if ( options === "instance" ) {
returnValue = instance;
return false;}
if ( !instance ) {
return $.error( "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'" );}
if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
return $.error( "no such method '" + options + "' for " + name + " widget instance" );
}
}});
} else {
// Allow multiple hashes to be passed on init
if ( args.length ) {
options = $.widget.extend.apply( null, [ options ].concat(args) );}
this.each(function() {
var instance = $.data( this, fullName );
if ( instance ) {
instance.option( options || {} );
if ( instance._init ) {instance._init();}
} else {
$.data( this, fullName, new object( options, this ) );}
});
}return returnValue;
};
};
$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
$.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
if ( typeof options === "string" ) {
options = { effect: options };}
var hasOptions,effectName = !options ?method :
options === true || typeof options === "number" ?
defaultEffect :
options.effect || defaultEffect;
options = options || {};
if ( typeof options === "number" ) {options = { duration: options };}
hasOptions = !$.isEmptyObject( options );
options.complete = callback;
if ( options.delay ) {element.delay( options.delay );}
if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
element[ method ]( options );
} else if ( effectName !== method && element[ effectName ] ) {
element[ effectName ]( options.duration, options.easing, callback );
} else {
element.queue(function( next ) {
$( this )[ method ]();
if ( callback ) {
callback.call( element[ 0 ] );}
next();
});
}};
});
var widget = $.widget;
Dengan menggunakan JQuery seperti diatas Anda bisa menuangkan semua inspirasi serta kreatifitas Anda untuk membuat sebuah website yang lebih dinamis, interaktif dan ramah pengguna dengan menyediakan aplikasi tampilan widget yang keren dan menarik di blog Anda.
Sekarang mari kita lihat, apa kehebatan script yang terkandung dalam jQuery UI diatas. Pertemuan kali ini saya akan coba membuat sebuah gambar dengan efek drag (menggeser untuk memindahkan posisi gambar dengan perintah mouse), tanpa CSS yang panjang, perintah JavaScript, cukup menggunakan script jQuery UI seperti ini:
<link rel="stylesheet" href="data-URL/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="data-URL/jquery-1.10.2.js"></script>
<script src="data-URL/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//sahabatblogger77.blogspot.com/resources/demos/style.css">
<style>
#draggable {
width:205px;height:205px;
background:url(http://URL-Gambar Anda.png) no-repeat center center;
border:none}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
<div id="draggable" class="ui-widget-content">
</div>Hasilnya :
Loh.!! kan hanya sebuah gambar saja mbak DEVY, efek drag itu seperti apa.?
Disana ada sebuah gambar yang saya letakkan pada position-left, gambar tersebut bisa Anda pindahkan posisinya dimana saja sesuai perintah Mouse Anda. Caranya, cukup KLIK gambar, lalu tahan KLIK (jangan lepaskan KLIK mouse Anda), tinggal geser posisi gambar kekanan, kekiri, keatas atau kebawah sesuai keinginan Anda, maka gambar akan bergeser mengikuti panah mouse Anda kemanapun pergi. Menarik bukan.?, nah.! setelah ini efek apa yang akan Anda buat selanjutnya untuk membuat halaman website Anda terlihat dinamis, interaktif dan ramah pengguna, dengan jQuery UI apa saja bisa, itu sih terserah Anda guys mau membuat apa..!! hehe..
