Dewa Blogger: Hasil penelusuran untuk cara-menonaktifkan-fungsi-seleksi

Halaman

    Social Items

Home / Hasil penelusuran untuk cara-menonaktifkan-fungsi-seleksi
Cara Menonaktifkan Fungsi Seleksi dengan CSS Cara Menonaktifkan Fungsi Seleksi dengan CSS

Cara Menonaktifkan Fungsi Seleksi dengan CSS - Mencegah orang melaksanakan seleksi terhadap teks yang ada di blog kadang sangat diperlukan, apa lagi di jaman yang serba mudah menyerupai kini ini tidak sedikit orang yang sembarang mengambil atau mencopas goresan pena orang lain tanpa izin.

Untuk itu dibutuhkan pencegahan. Kalau dulu orang melaksanakan pencegahan dengan memanfaatkan fungsi Javascript, namun cara tersebut masih dapat diakali dengan menonaktifkan fitur Javascript di browser yang digunakan.

Kali ini Saya akan mencoba melaksanakan pencegahan atau setidaknya menyulitkan orang lain untuk menyeleksi teks yang ada di blog kita dengan memanfaatkan fungsi CSS.

Berikut yaitu penerapan CSS dan HTML untuk mencegah seleksi teks pada artikel di blog sobat.

Pertama, buka Blogger > Template > Klik edit HTML > Terapkan aba-aba di bawah ini sempurna sebelum ]]></b:skin> atau </style>

.blog-content{  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none; }

Kemudian simpan template.

Selanjutnya untuk penerapan pada tag HTML di postingan (tab HTML) dapat teman terapkan menyerupai pola di bawah ini pada goresan pena yang ingin di proteksi.

<div class="blog-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam perspiciatis dolorum! Quis dignissimos voluptatem illum facilis suscipit repellat non voluptates hic laboriosam nesciunt rem voluptatum provident obcaecati ea eum reiciendis nisi explicabo.</div>

See the Pen Fungsi Seleksi by (@arlinadesign) on CodePen.



Jika tidak ingin repot-repot menambahkan aba-aba tag HTML di atas secara manual, cukup tambahkan CSS di atas pada CSS post-body di template sobat.

.post-body{  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none; }

Dan jikalau ingin mengaktifkan seleksi pada goresan pena tertentu yang ada di dalam post-body sebagai parent class yang dinonaktifkan, teman cukup tambahkan CSS di bawah ini ke dalam tag CSS tertentu. Misal pada tag pre

pre{  -webkit-user-select: text;  -khtml-user-select: text;  -moz-user-select: text;  -ms-user-select: text;  user-select: text; }

Dengan menerapkan User-select:none maka akan mencegah orang lain melaksanakan seleksi terhadap text. Untuk mencegah orang lain melaksanakan seleksi terhadap seluruh text di blog, gunakan CSS diatas di tag body.


 Browser Support :

Tidak Support IE9 kebawah.


Ok demikian tips singkat kali ini wacana Cara Menonaktifkan Fungsi Seleksi dengan CSS, supaya bermanfaat.

Cara Menonaktifkan Fungsi Seleksi Dengan Css

hal yang berafiliasi dengan komunikasi antarmuka antara aplikasi dengan pengguna Konfigurasi jQuery UI Dialog

jQuery UI Dialog dipakai untuk menangani hal-hal yang berafiliasi dengan komunikasi antarmuka antara aplikasi dengan pengguna. Karena mustahil jikalau sebuah aplikasi bisa berbicara dan menyarankan sesuatu untuk dilakukan oleh pengguna, kotak obrolan menjadi salah satu cara yang bisa dipakai untuk berkomunikasi.

Dasar Penggunaan

Buat sebuah elemen divisi sembarang, kemudian isi elemen tersebut dengan sesuatu. Seleksi elemen tersebut dengan jQuery, kemudian terapkan metode .dialog():

HTML

<div id="dialog">     Konten di sini... </div>

jQuery UI

$('#dialog').dialog();

Lihat Demo

Konfigurasi jQuery UI Dialog

Opsi Nilai Deskripsi
title "Judul Dialog" Menentukan judul kotak dialog.
autoOpen true Jika bernilai true, maka kotak obrolan akan tampil pada dikala halaman pertama kali diakses. Jika bernilai false, kotak obrolan tidak akan tampil dikala halaman diakses hingga sebuah pemicu memerintahkan kotak obrolan tersebut untuk tampil. Pemicu biasanya berupa tombol atau suatu agresi (default: true)
false
width 100, 200, 300, … Menentukan lebar kotak obrolan (default: 300)
height 100, 200, 300, … Menentukan tinggi kotak obrolan (default: "auto")
maxWidth 100, 200, 300, … Menentukan lebar maksimal kotak obrolan (default: false)
maxHeight 100, 200, 300, … Menentukan tinggi maksimal kotak obrolan (default: false)
minWidth 100, 200, 300, … Menentukan lebar minimal kotak obrolan (default: 150)
minHeight 100, 200, 300, … Menentukan tinggi minimal kotak obrolan (default: 150)
show "fade", "slide", ... (efek jQuery UI) Menentukan imbas khusus dikala kotak obrolan tampil (default: null)
hide "fade", "slide", ... (efek jQuery UI) Menentukan imbas khusus dikala kotak obrolan ditutup (default: null)
closeText "close", "tutup", ... Menentukan teks pada tombol epilog kotak obrolan di sebelah kanan atas. Secara umum tidak terlihat sebab opsi ini memang tidak terlalu penting. Bahkan, dalam tema jQuery UI, teks ini juga tidak akan ditampilkan:.ui-dialog-titlebar-close span {display:none}(default: "close")
modal true Pilihan untuk menampilkan tabir transparan dikala kotak obrolan muncul. (default: false)
false
draggable true Pilihan untuk memilih apakah kotak obrolan sanggup diseret (drag) atau tidak. (default: true)
false
resizable true Pilihan untuk memilih apakah kotak obrolan sanggup diubah ukurannya atau tidak. (default: true)
false
buttons {
  "Tombol1": function() {},
  "Tombol2": function() {},
  "Tombol3": function() {}
}		 Menambahkan tombol di dalam kotak dialog. Bagian ini biasanya yang sedikit rumit, sebab selain menampilkan tombol, Anda juga harus bisa membuat tombol tersebut berfungsi sehingga kotak obrolan bisa hidup.

Contoh Penerapan

autoOpen:false

Menentukan opsi autoOpen:false akan membuat kotak obrolan tidak muncul pada dikala pertama kali halaman diakses dan hanya akan muncul jikalau diperintah.

Kita buat sebuah elemen divisi sebagai kotak obrolan dan sebuah tombol sebagai pemicunya:

HTML

<div id="dialog">     Konten di sini... </div> <button id="open">Buka Dialog</button>

jQuery UI

$('#dialog').dialog({     autoOpen: false });  $('#open').button({     icons: {         primary: "ui-icon-folder-open"     } }).click(function() {     $('#dialog').dialog("open"); });

Lihat Demo

.dialog("open") dan .dialog("close") yaitu metode yang dipakai untuk menampilkan dan menyembunyikan kotak dialog. Selain memakai opsi autoOpen:false, menghilangkan kotak obrolan juga bisa dilakukan dengan cara yang lebih sederhana yaitu dengan CSS atau dengan fungsi .hide():

#dialog {display:none}
$('#dialog').hide();

title:"Kotak Dialog", width:250, height:200

Menambahkan judul “Kotak Dialog” dan memilih lebar kotak obrolan sebesar 250 piksel dan tinggi kotak obrolan sebesar 200 piksel:

$('#dialog').dialog({     title: "Kotak Dialog",     width: 250,     height: 200 });

Lihat Demo

show:"blind", hide:"puff"

Menciptakan imbas blind pada dikala kotak obrolan ditampilkan dan imbas puff pada dikala kotak obrolan ditutup:

HTML

<div id="dialog" style="display:none;">     Konten di sini... </div> <button id='open'>Buka Dialog</button>

jQuery UI

$('#open').button({     icons: {         primary: "ui-icon-folder-open"     } }).click(function() {     $('#dialog').dialog({         title: "Kotak Dialog",         show: "blind",         hide: "puff"     }); });

Lihat Demo

modal:true

Menentukan opsi modal:true akan membuat tabir di belakang kotak obrolan dikala kotak obrolan ditampilkan:

$('#dialog').dialog({     title: "Kotak Dialog",     modal: true });  $('#open').button({     icons: {         primary: "ui-icon-folder-open"     } }).click(function() {     $('#dialog').dialog("open"); });

Lihat Demo

draggable:false, resizable:false

Menentukan opsi draggable:false dan resizable:false akan menonaktifkan fitur draggable dan resizable pada kotak dialog:

$('#dialog').dialog({     title: "Kotak Dialog",     draggable: false,     resizable: false });
hal yang berafiliasi dengan komunikasi antarmuka antara aplikasi dengan pengguna Konfigurasi jQuery UI Dialog
draggable:true, resizable:true

Lihat Demo

Menghidupkan Kotak Dialog

Tombol dalam kotak obrolan dengan kemampuan untuk menjalankan perintah akan menghidupkan kotak obrolan dan tidak hanya sekedar berakhir sebagai kotak peringatan. Anda bisa membuat kotak obrolan yang sanggup memerintahkan elemen lain untuk melaksanakan sesuatu.

Pada dasarnya, opsi buttons sanggup dituliskan ibarat ini:

buttons: {     "OK": function() {         // Fungsi yang akan bekerja jikalau         // tombol `OK` diklik dibentuk di sini...     },     "Cancel": function() {         // Fungsi yang akan bekerja jikalau         // tombol `Cancel` diklik dibentuk di sini...     } }

Sebagai contoh, kita akan membuat dua buah tombol dalam kotak obrolan untuk mengendalikan elemen yang berada di luar kotak dialog:

HTML

<div id="dialog"></div> <div id="kotak">Kendalikan Saya!</div>

CSS

#kotak {   width:170px;   height:200px;   background:#4AB847;   border:2px solid #369834;   padding:10px;   font-size:16px;   font-weight:bold;   color:white;   cursor:pointer; }

jQuery UI

$('#dialog').dialog({     title: "Tombol dalam Dialog",     autoOpen: false,     buttons: {         "SlideUp": function() {             $('#kotak').slideUp(1000);         },         "SlideDown": function() {             $('#kotak').slideDown(1000);         }     } });  // Tampilkan kotak obrolan dikala `#kotak` didekati pointer $('#kotak').mouseenter(function() {     $('#dialog').dialog("open"); });

Lihat Demo

Modal Konfirmasi

Sebenarnya cara kerjanya sangat sederhana. Saat sebuah tombol diklik, itu akan memicu sebuah fungsi untuk menampilkan kotak konfirmasi. Salah satu tombol di dalam kotak konfirmasi merupakan perintah gotong royong dari tombol yang diklik tadi. Sedangkan tombol yang Anda kira sebagai pemicu utama untuk menjalankan perintah gotong royong hanyalah tombol untuk menampilkan kotak obrolan konfirmasi:

hal yang berafiliasi dengan komunikasi antarmuka antara aplikasi dengan pengguna Konfigurasi jQuery UI Dialog
Modal konfirmasi dengan jQuery UI

HTML

<div class="separator">     <img class="item" alt="hal yang berafiliasi dengan komunikasi antarmuka antara aplikasi dengan pengguna Konfigurasi jQuery UI Dialog" src="my-image.jpg">     <button id="delete">Hapus Gambar!</button> </div>  <div id="confirm-box">     <span class="ui-icon ui-icon-alert" style="float:left;margin:0 10px 50px 0;"></span>Apakah Anda yakin akan menghapus gambar ini? Hal ini tidak bisa dibatalkan dan gambar ini akan terhapus selamanya. </div>

CSS

.separator {   position:relative;   float:left; }  .separator button {   position:absolute;   top:10px;   left:10px; }

jQuery UI

$('#confirm-box').dialog({     modal: true,     autoOpen: false,     title: "Konfirmasi",     buttons: {         "Ya": function() {             $('img.item').parent().hide("explode", {                 pieces: 36             }, 1000);             $(this).dialog("close");         },         "Batal": function() {             $(this).dialog("close");         }     } });  // Tampilkan kotak obrolan konfirmasi dikala tombol hapus diklik $('#delete').button({     icons: {         primary: "ui-icon-trash"     } }).click(function() {     $('#confirm-box').dialog("open"); });

Lihat Demo


Sumber https://www.dte.web.id/

Konfigurasi Jquery Ui Dialog

Langganan: Postingan (Atom)