[Yii Framework] Membuat Toggle/Spoiler

Toggle/Spoiler adalah salah satu teknik untuk menyembunyikan sebuah tampilan dimana dapat ditampilkan jika user menginginkannya. Yah, mungkin bagi anda yang sering buka kaskus pasti tau bagaimana itu spoiler.. Nah, sekarang saya akan bahas bagaimana step-step untuk membuatnya untuk aplikasi web kita..

Sebenarnya contoh coding seperti ini sudah ada pada code halaman “admin” kita jika kita menggunakan “CRUD Generate” yang sudah disediakan oleh Yii Framework. Pertama,  pada halaman view yang ingin anda buat spoilernya, buatlah code javascript berikut:

<?php
Yii::app()->clientScript->registerScript('search', "
$('.tombol').click(function(){
	$('.spoiler').toggle();
	return false;
});
");
?>

Penjelasan  : Pada code di atas, kita membuat sebuah code yang akan menjadikan sebuah tampilan di spoiler/sembunyikan. Di code tersebut kita juga mengizinkan user menampilkan halaman yang di sembunyikan dengan cara melakukan klik pada sebuah tombol yang memiliki class “tombol”.

Lalu masukkan code berikut:

<?php echo CHtml::link('Buka Spoiler','#',array('class'=>'tombol')); ?>
<div class="spoiler" style="display:none">
Masukkan tampilan yang ingin anda sembunyikan disini
</div>

Penjelasan : Pada code tersebut saya membuat sebuah link yang memiliki class “tombol” dimana jika link tersebut di pilih oleh user maka program akan menjalankan perintah javascript yang sudah kita buat tadi. Lalu saya membuat sebuah tag <div> yang memiliki class “spoiler” yang akan disembunyikan saat pertama kali halaman dibuka, hal tersebut terlihat dari “style=”display:none””. Jadi semua yang ada di dalam tag <div> akan di sembunyikan terlebih dahulu saat halaman pertama kali dibuka, lalu akan di tampilkan saat user menekan link yang sudah ada..

 

Selesai… Selamat mecoba..

Semoga membantu…😀

7 Responses to [Yii Framework] Membuat Toggle/Spoiler

  1. andry_yosua says:

    wah, kalo kaya gitu semua yang punya class=spoiler bakal kebuka dong
    kenapa ga gini
    $(‘.tombol’).click(function(){
    $(this).children().find(‘.spoiler’).toggle();
    return false;
    });

  2. andry_yosua says:

    maksud saya gini:

    ‘tombol’)); ?>

    Masukkan tampilan yang ingin anda sembunyikan disini

    $(‘.tombol’).click(function(){
    $(this).parent().find(‘.spoiler’).toggle();
    return false;
    });

  3. sabitzhabit says:

    okeh gan, thanks masukannya..

  4. emenz1990 says:

    gan code ini ditaruh dimana yakkk,

    $(‘.tombol’).click(function(){
    $(this).parent().find(‘.spoiler’).toggle();
    return false;
    });

    ane cb2 taruh ditempat potensial kok kgk nemu2 biar spoilernya per tombol

  5. di tarok di view nya gan..

  6. emenz1990 says:

    gan, ini kalau isi gridview, kok setiap kita filter, spoilernya tutup, g kayak yg d advance search

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: