Beben si bloglang anu ganteng kalem tea tadinya mau kasih lists mengenai artikel² gaya punya dari web/blog yang ditemuin sama Beben selama walking in the world :P Tapi takut kebanyakan dan malah bikin kebelinger, ya sudah dipilih saja yg semoga terpakai artikel tutorialnya untuk sobat yg melancong kemari. Giliran kali ini kita akan membicarakan mengenai
jQuery Plugin! Sangkin banyaknya trik mengenai tema jQuery plug-in ini, maka dengan menemukan web berikut yg membeberkan 20 trik dari jQuery plugins. Ke 20 trik ini sangat basic sekali dan memang banyak diimplementasikan kedalam blog/web dalam hias menghias, edit, menambah agar blog kita full stylish punya \m/
Disini Beben hanya akan menggarisbawahi saja bagaimana cara pemakaian dan penyimpanan kode kedalam template. Sobat kita dari negara Jepang Id twitter @webcreatorbox akan mengulas 20 collection jQuery Plugin Trick.
- Mouse hover for image.
- Eksternal link new windows.
- Scroll to top.
- Click for tag full div.
- Change color for table.
- Find broken link for image.
- Css hacks for browse.
- Preload image.
- Message in bottom for IE6 browse.
- Hidden div.
- Put a label on form focus.
- Into text form, and eliminate the focus (change the text color)
- Counting the number of characters input.
- Decorate the radio buttons and checkboxes.
- Sliding panel.
- Accordion.
- Tooltips.
- See or link for print.
- View latest twitter tweet.
- Add sound effects.
Mungkin akan terlihat belum jelas dan apaan itu semuanya :D Walau ngawur dalam mengidentifikasikan nama trik²nya, yg penting ngerti =))
Nb:
>> Jika ada script jQuery, bisa diletakan diatas tag
</body> atau sebelum tag
</head> (utamakan sebelum tag penutup body saja)
>> Kalau ada kode CSS letakinnya sebelum kode tag
]]></b:skin> >> Kode HTML letakin didalam tag <body>...</body> template (bisa juga Add a Gadget ► HTML/Javascript)
Silahkan mengunjungi halaman berikut guna melihat jelas kode dan scriptnya WebCreatorBox. Jika kebetulan diantara sobat belum ada yg memakai trik jQuery plugin pada templatenya, maka bisa dicoba bumbu-bumbu dari sobat kita itu. Penulisan kode dan script 20 trik ini menggunakan bahasa yg memang dibuat bisa di add secara bersamaan :-bd
Demo 20 of jQuery code Tricks Collection Jadi secara kasar seperti berikut jika ditengok dalam bentuk HTML itu ;))
<!DOCTYPE html>
<html>
<head>
<title>Insert title</title>
<style type="text/css">
<style>
/* 4 */
.sampleBox {
background: #ffc;
padding:10px;
cursor: pointer
}
/* 5 */
table{background: #666}
tr{background: #fff}
td{padding: 5px}
.odd{background: #ddd }
/* 7 */
.browserBox{padding: 10px}
/* 8 */
.imgBox {
background:url(.../images/loading.gif) 50% 50% no-repeat;
}
/* 9 */
.error {
background:#ff6699;
padding: 20px;
text-align:center;
}
/* 10 */
.deleteBox {
border: #ccc 1px solid;
padding: 10px
}
.deleteBox .delete {
cursor: pointer;
color: #3cf;
margin-top:10px;
}
/* 11 */
.labelfocus {color:#f39 }
/* 12 */
.focus {color: #969696}
/* 14 */
.checkbox,.radio {
z-index: -1;
position: absolute;
}
.CheckBoxLabelClass {
background: #fff url(".../images/checkbox.png") no-repeat 2px 0;
margin-right:20px;
padding-left:22px;
}
.radiolabel {
background: #fff url(".../images/radio.png") no-repeat 2px 0;
margin-right:20px;
padding-left:22px;
}
.LabelSelected,.RadioSelected {
background-position: 2px bottom;
}
/* 15 */
.open {
background: #fc6;
color: #fff;
cursor: pointer;
width:45px;
padding: 10px
}
#slideBox{
padding: 10px;
border: 1px #ccc solid;
display:none;
}
/* 16 */
#accordion {
border: 1px #ccc solid;
border-top:none;
width:450px;
}
#accordion dt{
background: #ddd;
padding: 10px;
border-top: 1px #ccc solid;
}
#accordion dt a {
color: #000;
text-decoration:none;
display:block;
}
#accordion dd{padding: 10px}
/* 17 */
.tooltip {
margin: 100px 0 0;
list-style: none
}
.tooltip li {
margin: 0 10px;
float: left;
position: relative;
text-align:center;
}
.tooltip a {
padding: 14px 10px;
display: block;
text-decoration: none;
font-weight: bold;
width:200px;
}
.tooltip li span {
background: #ffc;
border: 1px solid #fc6;
height: 45px;
position: absolute;
top: -85px;
left: 0;
text-align: center;
padding: 20px 12px 10px;
z-index: 2;
display: none;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
// 1
$(function(){
$('a img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
}
});
});
// 2
$(function(){
$("a[href^='http://']").attr("target","_blank");
});
// 3
$(function(){
$("#toTop a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
// 4
$(function(){
$(".sampleBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
// 5
$(function(){
$("tr:odd").addClass("odd");
});
// 6
$(function () {
$('img').error(function(){
$(this).attr('src', 'http://webcreatorbox.com/sample/images/missing.jpg');
});
});
// 7
$(function () {
// IE(IE7??)
if ($.browser.msie && $.browser.version > 6 ) $(".browserBox").css("background", "#ff99cc" );
// IE(IE6??)
if ($.browser.msie && $.browser.version <= 6 ) $(".browserBox").css("background", "#ffff99" );
// Firefox
if ($.browser.mozilla ) $(".browserBox").css("background", "#c8ffd0" );
// Safari
if( $.browser.webkit ) $(".browserBox").css("background", "#b1e1ff" );
});
// 8
$(function () {
$('.imgBox img').hide();
});
var i = 0;
var int=0;
$(window).bind("load", function() {
var int = setInterval("doThis(i)",500);
});
function doThis() {
var images = $('img').length;
if (i >= images) {
clearInterval(int);
}
$('img:hidden').eq(0).fadeIn(500);
i++;
}
// 9
$(function () {
if ( $.browser.msie && $.browser.version <= 6 ) {
$('body').prepend('<div class="error">blahblehbloh</div>');
}
});
// 10
$(function () {
$(".deleteBox .delete").click(function(){
$(this).parents(".deleteBox").animate({ opacity: "hide" }, "slow");
});
});
// 11
$(function () {
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
});
$("form :input").blur(function() {
$("label[for='" + this.id + "']").removeClass("labelfocus");
});
});
// 12
$(function(){
$(".focus").focus(function(){
if(this.value == "Enter a keyword"){
$(this).val("").css("color","#f39");
}
});
$(".focus").blur(function(){
if(this.value == ""){
$(this).val("Enter a keyword").css("color","#969696");
}
});
});
// 13
$(function () {
$("textarea").keyup(function(){
var counter = $(this).val().length;
$("#countUp").text(counter);
if(counter == 0){
$("#countUp").text("0");
}
if(counter >= 10){
$("#countUp").css("color","red");
} else{$("#countUp").css("color","#666");}
});
});
// 14
$(function(){
$(".checkbox").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
$(".radio").change(function(){
if($(this).is(":checked")){
$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
$(this).next("label").addClass("RadioSelected");
}
});
});
// 15
$(function(){
$(".open").click(function(){
$("#slideBox").slideToggle("slow");
});
});
// 16
$(function() {
$('#accordion dd').hide();
$('#accordion dt a').click(function(){
$('#accordion dd').slideUp();
$(this).parent().next().slideDown();
return false;
});
});
// 17
$(function(){
$(".tooltip a").hover(function() {
$(this).next("span").animate({opacity: "show", top: "-75"}, "slow");}, function() {
$(this).next("span").animate({opacity: "hide", top: "-85"}, "fast");
});
});
// 18
$(function(){
$('a.print').click(function(){
window.print();
return false;
});
});
// 19
$(function(){
$.getJSON("http://twitter.com/statuses/user_timeline/BebenKoben.json?callback=?", function(data) {
$("#twitter").html(data[0].text);
});
});
// 20
$(function(){
// ????
$('a.click').click(function(){
$('embed').remove();
$('body').append('<embed src="http://www.premiercabs.com.au/wp-content/themes/premier/images/click.wav" autostart="true" hidden="true" loop="false">');
});
});
$(function(){
$('a.hover').mouseover(function(){
$('embed').remove();
$('body').append('<embed src="http://www.premiercabs.com.au/wp-content/themes/premier/images/click.wav" autostart="true" hidden="true" loop="false">');
});
});
</script>
</body>
</html>
Jika ada bingung dalam pemakaian dan penempatan kode-kode silahkan berkomentar...sapa tauk Beben bisa bantu :)
Happy blogging \m/
