29.3.15
23
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 :
  1. Untuk halaman HTML khususnya digunakan untuk menyeleksi pemakaian element DOM, sehingga website lebih dinamis, interaktif dan ramah pengguna
  2. Support CSS 3 untuk memanipulasi atribut id/class pada selektor CSS
  3. Event dan widget
  4. AJAX Aplications
  5. Efek gerak seperti transisi dan animasi
  6. Ekstensi dan Plug-ins
  7. Kompatibilitas yang mendukung hampir semua Browser modern (all peramban support)
  8. 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.


script jQueryUI



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>


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;


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 :




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..!!?

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menyeleksi Fitur Objek Dengan jQuery UI
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

23 komentar

  1. .Sepertinya Pertamax nih. :d

    .Wihh keren, bisa gitu yah.? Baru tau nih mbak.
    .Selama ini mengira tidak bakal ada objek yang bisa di Geser sana-Geser sini.
    .baca ulang lagi ah. Thanks mbak. :))

    BalasHapus
    Balasan
    1. SELAMAT dech buat pertamaxnya, jangan langsung dihabisin ya, sisain buat sahabat yang lain, hehe..!!

      Sebenarnya sih efek drag seperti ini sudah ada jika kita membuka aplikasi di browser google-Chrome, jika kita membuka 3 halaman (3 Tab), maka tab 1 bisa kita geser lalu pindahkan posisinya ke tempat tab 3, dan sebaliknya tab 2 bisa kita letakkan posisinya ke tempat tab 1 atau tab 2.

      http://1.bp.blogspot.com/-Lfq0c3rJBIg/VRgY19TrwmI/AAAAAAAABzo/Di1m52Tyekc/s1600/Chrome%2BBrowser.png

      jendela baru pada google Chrome menggunakan efek drag, Coba KLIK halaman tab 1, tahan KLIK, lalu pindahkan posisinya dengan menggeser untuk menggantikan posisi pada tab 3, inilah yang disebut draggable effect.

      Hapus
    2. .Kalau pada tab google chrome saya sudah tahu mbak, bahkan di mozilla versi finalnya juga udah bisa di drag dari tab 1 ke tab lainnya.
      .Tapi yang saya maksud pada artikel mbak kan terkhusus untuk Blog. Gitulho. :)

      Hapus
    3. sama kok mas, gak ada yang istimewa di post ini, sama seperti tab baru chrome, saat membuka halaman awal tab browser, coba KLIK kanan, lalu pilih periksa elemen, perhatikan Template yang chrome gunakan sama seperti HTML website, jadi saya hanya memindahkan semua fungsi-fungsi script yang digunakan dalam sebuah pembahasan artikel blog.

      blog dengan web sama mas, yang berbeda adalah elemen script yang terkandung didalam tag HTML pada masing-masing halaman, artinya jika wbsite peramban bisa menampilkan ini, itu dalam halaman, maka dalam blog juga bisa kita tampilkan efek yang sama.

      Hapus
    4. .Ohhh, gitu toh ternyata. hehe. Maaf ya mbak Devy, soalnya masih dangkal banget pengetahuannya ni. :))
      .Terima kasih mbak sudah menjelaskannya secara detail. cheer

      Hapus
  2. bisa di drag sekehendak hati..
    sudah ngerasain demonya, saya siapin (c) special :)

    BalasHapus
    Balasan
    1. Soalnya gambarnya sudah jinak mas, jadi akan mengikuti siapa saja yang memerintah untuk berpindah, maka gambar akan berpindah posisi sesuai perintah majikannya, hehe..!!

      Hapus
  3. Balasan
    1. jadi gak ada alasan lagi kan mas kalau untuk membuat efek drag seperti itu, harus membutuhkan penjabaran kode script yang panjang atau banyak, cukup 6 baris, efek yang menarik sudah bisa kita bentuk, semuanya bisa mas lakukan dengan jQuery UI.

      Hapus
    2. tinggal arti dari susunan kerangka inih yg blom jelas.. seperti bahasa alien. ..aahh.. kata kang Jum ..PUYENG..

      Hapus
  4. sangat bermanfaat,. sunduL

    BalasHapus
  5. model jquery begini rupanya, padahal tdk panjang2 amat ya Vy.. maksudnya bukan si Amat ya..

    knapa mesti dibungkus atau disimpan di tempat lain..seperti host2 begitu ya Vy..
    atokah pertanyaan inih yg sok tau hehehe..

    BalasHapus
  6. Ini script PHP ya :-?

    BalasHapus
  7. Baru minggu kemaren dapet matkul tentang PHP dan Javascript, jadi masih dasar banget . . masih bingung kalo harus ngembangin kayak widget2 gini . . paham dikit lah tentang javascript itu aja berkat sering ngubek2 template . . tapi nggak paham2 amat . .

    BalasHapus
  8. dipelajari dulu deh siapa tahu tertarik buat template sendiri tinggal terapin

    BalasHapus
    Balasan
    1. nah itu dia....belajar jquery ui akan semakin menarik bila kita mulai bisa menerapkannya pada beberapa tampilan, termasuk dalam blog anda....

      Hapus
  9. saya bisa bawa-bawa gambarnya nih.tadinya saya mau bawa keluar gambarnya mba siapa tau bisa nyaingin demian pesulap itu.hehe

    BalasHapus
    Balasan
    1. saya juga mau bawa pulang tuh gambar hen...
      tapi kayaknya gak bisa dilepas....rencana mau ganti batu akik. heeee

      Hapus
  10. Jquery semakin berkembang bahasannya nih mbak semoga suatu hari saya bisa belajar semuanya

    BalasHapus
    Balasan
    1. kalau menggunakan jquery ui akan lebih atraktif juga dan bisa dimodifikasi dalam bentuk apa aja.

      Hapus
  11. wah, bisa digerak-gerakkan dengan cursor ya mbak, kalau yang satu ini, luar biasa dan diluar dugaan pengetahuan saya :D

    BalasHapus
  12. lebih singkat sih dev dan tidak membingungkan kalau mau nulis panjang kodenya.
    kayaknya bisa juga di pasangin apa aja dengan cara ini ya.
    kalau saya css ama html aja belum fasih banget...makanya banyak juga belajar di blog ini sista. makasih udah berbagi ilmunya. maaf baru bisa silaturrahmi, kemarin pas kena keluar kota. maunya sih ke luar angkasa, biar bisa fresh gitu. heeee. ok makasih

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK