cara membuat fungsi jQuery sendiri

masih seperti biasa di bangku istimewa di depan komputer, sambil di temani dengan segelas jus alpukat srupuuuttt ahh :D #ada yang maooo, heheh sebenernya bingung mau nulis apa lagi ya ? tapi kali hari ini saya sedang ber experiment menggunakan JQuery, kalian tau kan apa itu jquery ?? kalau belum mengerti coba lihat terlebih dahulu di postingan saya tentang pengenalan jQuery pengenealn dasar jquery soalnya syarat awal untuk beeksperiment dalam tutorial kali ini ya harus paham apa itu jQuery, dan saya akan membahsa bagaimana cara membuat fungsi menggunakan jquery, syntaxnya aga sedikit berbeda seperti fungsi javascript pada umumnya, fungsi pada jQuery digunakan untuk mempermudah dalam pemanggilan syntax jQuery pada suatu objek atau element tertentu, dan kita bisa menyimpan sebagai koleksi library fungsi jQUery library kita agar suatu saat kita membutuhkan kita tinggal memanggil fungsi tersebut tanpa harus mengetik ulang dari sumberkode secara keseluruhan. mari langsung saja memulai

pertama buta terlebihdahulu dokumen baru html
kemudian jangan lupa memanggil core dari jQuery tersebut tuliskan script berikut

    
<script src="jquery.js" type="text/javascript"></script>

kemudian kita akan membuat fungsi untuk menggerakan suatu element yang bisa bergerak ke kanan dan kekiri, kita juga bisa mengatur seting - seting untuk menjalankan fungsi yang di buat. ketikan kode berikut

(function($){
        $.fn.gerak = function(opsi){
            var opsi = $.extend({
                jarak       : 200,
                kecepatan   : 2000
            },opsi);
            $(this).animate({"right":opsi.jarak},opsi.kecepatan);
            $(this).animate({"left":opsi.jarak},opsi.kecepatan);
        }

    }(jQuery));

untuk cara pemanggilan fungsi yang kita buat caranya mudah tingggal ketikan saja kode seperti ini
```
 
$(document).ready(function(){
     $("#kotak").gerak();
});
```

kemudian buat juga element html yang ingin kita gerakan :
 <div style="width:100px;height:100px;background:#396C42;"></div>

```
hasil dari seluruh kodenya seperti ini
```

<html>
<head>
    <title>contoh fungsi jQuery</title>
     <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript">
     (function($){
        $.fn.gerak = function(opsi){
            var opsi = $.extend({
                jarak       : 200,
                kecepatan   : 2000
            },opsi);
            $(this).animate({"right":opsi.jarak},opsi.kecepatan);
            $(this).animate({"left":opsi.jarak},opsi.kecepatan);
        }

    }(jQuery));
     </script>
     <script type="text/javascript">
     $(document).ready(function(){
        $("#kotak").gerak();
     });
     </script>
</head>
<body>
<div id="kotak" style="width:100px;height:100px;background:#396C42;"></div>
</body>
</html>

oh iya satu lagi untuk mengatur kecepatan dan jaraknya anda bisa rubah script

 $("#kotak").gerak();

menjadi seperti berikut

$("div").gerak({
    jarak       : 400,
    kecepatan   : 3000
 });

okk itu hanya fungsi sederhana yang say buat semoga anda dapat mengembangkannya menjadi lebih baik, sekian dari saya terimakasihh, jika berkenan silahkan tinggalkan komentar untuk bertanya atau request tutor lain :)

728x90 AdSpace

Tutorial Flash dan PHP lengkap

Latest News

cara membuat fungsi jQuery sendiri

1 comments:

Labels

Popular Posts

Time

Category

Media Partner

Total Pageviews

Video