Membuat Tombol Gaya iPhone dengan iButton jQuery Plug-in

Simple Checkboxes

Ini menunjukkan bentuk yang paling sederhana dari iButton. Tombol ini murni pada atribut checkbox element.

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $(":checkbox").iButton();
});
</script>

Using Metadata

Anda juga dapat memanfaatkan jQuery Metadata Plug-in untuk mengubah pilihan pada setiap elemen individual:

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $(":checkbox").iButton();
});
</script>

<div class="row">
  <label class="label" for="ex03">Yes/no label</label>
  <input type="checkbox" id="ex03" class="{labelOn: 'Yes', labelOff: 'No'}" />
</div>

<div class="row">
  <label class="label" for="ex04">True/false label</label>
  <input type="checkbox" id="ex04" class="{labelOn: 'True', labelOff: 'False', easing: 'easeOutBounce', duration: 500}" />
  (with easeOutBounce easing animation)
</div>

API Examples

Plug-in iButton metode API juga mudah digunakan. API ini memungkinkan Anda untuk melakukan hal-hal seperti, mengubah nilai elemen, menonaktifkan elemen dan menghapus widget iButton untuk mengembalikannya pada kotak centang asli.

Sample Code

<script type="text/javascript">
// toggle button's enable/disabled status
$("#ex05").iButton("disable");

// destroy an iButton widget
$("#ex06").iButton("destroy");
</script>

Radio Button Example

Di bawah ini adalah contoh untuk menampilkan iButton pada sekelompok tombol. Hanya salah satu pilihan dapat diperiksa pada satu waktu. Tombol ini dapat digunakan jika Anda ingin pengguna hanya dapat memilih satu pilihan dari daftar.

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $(":radio").iButton();
});
</script>

Radio Button Example (w/ Radio Uncheck Allowed)

Di bawah ini adalah contoh untuk menampilkan iButton pada sekelompok tombol. Hanya salah satu pilihan dapat diperiksa pada satu waktu. Tombol ini dapat digunakan jika Anda ingin pengguna hanya dapat memilih satu pilihan dari daftar.

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $("#radio_allowRadioUncheck :radio").iButton({allowRadioUncheck: true});
});
</script>

Size Button via CSS

Anda juga dapat menggunakan CSS untuk mengontrol tampilan dan nuansa dari iButton tersebut. Di bawah ini kami telah menggunakan CSS untuk membuat tombol lebar dengan pegangan yang sempit.

Sample Code

<style type="text/css">
#css .ibutton-container {
  width: 175px;
}

#css .ibutton-container .ibutton-handle {
  width: 5px;
}
</style>

Custom Labels of Various Sizes

Anda juga dapat menggunakan label panjang dan pendek dipasangkan bersama-sama.

Sample Code

<script type="text/javascript">
$("#ex10").iButton({
    labelOn: "A really, really long label"
  , labelOff: "Tiny"
});
</script>

Using Events

Events memungkinkan Anda untuk memperluas fungsionalitas dari plug-in dengan melakukan tugas-tugas tambahan bila ada kejadian tertentu. Di bawah ini perubahan digunakan untuk memperbarui teks berdasarkan nilai dari checkbox.

Sample Code

<script type="text/javascript">
$("#ex11")
  // attach the iButton behavior
  .iButton({
     labelOn: "Yes"
   , labelOff: "No"
   , change: function ($input){
      // update the text based on the status of the checkbox
      $("#send-email").html($input.is(":checked") ? "Yes, send me more e-mail!" : "Ugh... no more e-mail already!");
    }
  })
  // trigger the change event (to update the text)
  .trigger("change");
</script>

Requirements

Untuk menggunakan iButton plug-in, Anda memerlukan berikut ini::

<!---// load jQuery and the jQuery iButton Plug-in //--->
• jQuery.v1.2.6 (or higher)*
• jquery.ibutton.js Plug-in
<!---// load the iButton CSS stylesheet //--->
• jquery.ibutton.css

Opsional, Anda juga mungkin ingin menggunakan:

• jQuery.metadata.js Plug-in — Dengan menggunakan Metadata plug-in, memungkinkan kita untuk menentukan pilihan untuk tombol dalam class attribute dari bentuk elemen.
• jQuery.easing.js Plug-in — memperluas pilihan untuk meringankan dalam animasi dari tombol geser.

Sebelum widget iButton dapat ditampilkan, kita harus memiliki satu atau lebih kotak centang (checkbox) atau elemen radio yang akan dimanipulasi, seperti contoh:


Sample Code

<p> 
  <label for="iButton"> 
    E-mail notifications 
  </label> 
  <input type="checkbox" id="iButton" value="true" /> 
</p>

Langkah berikutnya adalah untuk menciptakan sebuah instance dari widget iButton. kita harus memastikan untuk menginisialisasi widget setelah semua yang diperlukan DOM elemen tersedia, yaitu menggunakan document.ready event yang tepat untuk menginisialisasi widget.


Sample Code

<script type="text/javascript"> 
$(document).ready(function (){ 
  $("#iButton").iButton(); 
}); 
</script>

Sumber:

http://www.givainc.com
http://awardwinningfjords.com