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
Beberapa trick script jQuery plug-in yg Beben comot dari web The Electric ToolBox. Sebelum memulai harap diperhatikan:
mozilla : true
version : 1.9.2
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
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:
- Setiap script plug-in dapat diletakan dibawah bawaan script jQuery inti, atau bisa juga diatas/sebelum kode </body>
- Setiap kode HTML diletakan didalam tag <body>...</body> atau bisa juga Add a Gadget ► HTML/Javascript
- Setiap kode CSS (internal) letakan sebelum kode ]]></b:skin>
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>
$(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 likefunction 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" />
This is an example of text that will be shown and hidden.
This is an example of text that will be shown and hidden.
Loading... |
4 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...