Rabu, 29 September 2010

Javascript and jQuery Plug-in

Pasang mata dan telinga, siapkan stamina dan kreatifitas sobat untuk membaca postingan Beben si bloglang ganteng kalem tea mengenai jQuery plug-in, Javascript, dan artikel gaya lainnya \m/ Kali ini akan menitikberatkan pada jQuery plug-in sob ;) Jujur saja kalau mau memosting mengenai tema tersebut tidak akan ada habisnya Beben bisa bahas :)) Makanya kali ini akan membahas beberapa trik dan tips beserta webnya sekalian :P (jarang-jarang dapet web usefully nih) Sobat dalam memakai trik ini harus sudah punya script jQuery yah. Kalau belom punya mah tidak akan berhasil ;)) Selalu update jika sudah memiliki, kan sudah ada sama si embah google disediain :D

jQuery inti

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>
Beberapa trick script jQuery plug-in yg Beben comot dari web The Electric ToolBox. Sebelum memulai harap diperhatikan:
  1. Setiap script plug-in dapat diletakan dibawah bawaan script jQuery inti, atau bisa juga diatas/sebelum kode </body>
  2. Setiap kode HTML diletakan didalam tag <body>...</body> atau bisa juga Add a Gadget ► HTML/Javascript
  3. Setiap kode CSS (internal) letakan sebelum kode ]]></b:skin>
Aturan diatas hanya berlaku bagi blog berbasis blogspot! Karena openingnya panjang maka klik dulu read more guna mengetahui trik²nya yak sob :)) Cek gi dot...

Detecting the browser engine and version with jQueryDetecting the browser engine and version with jQuery

Scriptnya:
<script type='text/javascript'>
$.each($.browser, function(key, val) {
document.write(key + " : " + val + "<br />");
});
</script>
Ini akan terlihat seperti:
mozilla : true
version : 1.9.2

Target links to _top with jQueryTarget links to _top with jQuery

Capek dengan membuat link open new windows!!! Tanpa embel² atribut new windows sobat dapat membuat setiap links yg ada terbuka di windows baru dg jQuery plug-in ini.
<script type='text/javascript'>
$(document).ready(function() {
if(top.location != location) {
$('a').each(function() {
if(!this.target) {
this.target = '_blank';
}
});
$('form').each(function() {
if(!this.target) {
this.target = '_blank';
}
});
}
});
</script>

Change the cursor with JavascriptChange the cursor with Javascript

Mau mengganti cursor dengan menggunakan javascript via Add a Gadget ► HTML/Javascript
<script language="Javascript">
function example_change_cursor() {
document.body.style.cursor = document.getElementById('example-cursor').options[document.getElementById('example-cursor').selectedIndex].value;
}
function example_restore_cursor() {
document.body.style.cursor = 'default';
}
</script>
<select id="example-cursor">
<option>default</option>
<option>crosshair</option>
<option>e-resize</option>
<option>help</option>
<option>move</option>
<option>n-resize</option>
<option>ne-resize</option>
<option>nw-resize</option>
<option>pointer</option>
<option>progress</option>
<option>s-resize</option>
<option>se-resize</option>
<option>sw-resize</option>
<option>text</option>
<option>w-resize</option>
<option>wait</option>
</select>
<input type="button" onclick="example_change_cursor()" value="Change Cursor" />
<input type="button" onclick="example_restore_cursor()" value="Restore Default" />
Its look like

This is an example of text that will be shown and hidden.

This is an example of text that will be shown and hidden.

Karena banyak silahkan sobat satroni di halaman berikut ;) Electric Tool Box. Be a creative and see you tomorrow with other trick still on www.electrictoolbox.com

Tidak ada komentar:

Posting Komentar