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.
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
Jadi secara kasar seperti berikut jika ditengok dalam bentuk HTML itu ;))
Jika ada bingung dalam pemakaian dan penempatan kode-kode silahkan berkomentar...sapa tauk Beben bisa bantu :)<!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>
Happy blogging \m/
Tidak ada komentar:
Posting Komentar