Facebook Youtube linkedin Twitter feedburner Skype Me

ලස්සන jQuery Tab Menu එකක් බ්ලොගයට දා ගන්න 17





සෑම් | 8/27/2010 | , ,



මෙන්න මම ඔයලට තවත් මැක්සා ගැජට් එකක් ගෙනවා..මේ ගැජට් එකෙන් වෙන්නේ ඔයලාට එකම ගැජට් එකක වැඩ ගොඩක් දාන්න පුලුවන්..ඉතින් ඔයලත් මේ ගැජට් එකට අසා නම් මම ඔයලට එක දා ගන්න උදව් කරන්නම්..මම පහල කියල තියෙන විදියට වැඩ ටික කරන්න


පලමුව ඔයාලා Layout >> Edit Html >> යන්න..මතක ඇතුව Expand Widget Templates තැනට හරිය දෙන්න..දැන් ඔයලා යතුරු පුවරුවේ Ctrl+F යතුරු එක වර ඔබන්න..දැන් ඔයාලට ලැබේයි සේර්ච් බාර් එකක්.

එතන </head> කියලා ටයිප් කරන්න..දැන් ඔයලාගේ HTML box එකේ මේ code එක Higlight වෙලා තියෙනවා පෙනෙයි..දැන් ඔයලා </head> කොඩ් එකට පහලින් මම පහල දිලා තියෙන කොඩ් එක Copy,past කරන්න..



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
//Get all the LI from the #tabMenu UL
$(&#39;#tabMenu &gt; li&#39;).click(function(){
//perform the actions when it&#39;s not selected
if (!$(this).hasClass(&#39;selected&#39;)) {
//remove the selected class from all LI
$(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);
//Reassign the LI
$(this).addClass(&#39;selected&#39;);
//Hide all the DIV in .boxBody
$(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);
//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);
}
}).mouseover(function() {
//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass(&#39;mouseover&#39;);
$(this).removeClass(&#39;mouseout&#39;);
}).mouseout(function() {
//Add and remove class
$(this).addClass(&#39;mouseout&#39;);
$(this).removeClass(&#39;mouseover&#39;);
});
//Mouseover with animate Effect for Category menu list
$(&#39;.boxBody #category li&#39;).click(function(){
//Get the Anchor tag href under the LI
window.location = $(this).children().attr(&#39;href&#39;);
}).mouseover(function() {
//Change background color and animate the padding
$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
$(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});
}).mouseout(function() {
//Change background color and animate the padding
$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
$(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});
});
//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$(&#39;#.boxBody li&#39;).click(function(){
window.location = $(this).children().attr(&#39;href&#39;);
}).mouseover(function() {
$(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
}).mouseout(function() {
$(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
});
});
</script>



දැන් ඔයාලා ]]></b:skin> කොඩ් එක හොය ගන්න ]]></b:skin> කොඩ් එකට උඩින් මම පහල දිලා තියේන කොඩ් එක Copy , Past කරන්න


#tabMenu {margin:0; padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://amatullah83.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
.box {width:227px}
.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;
height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span { font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}


දැන් Template එක Save කරන්න....Save Template

දැන් ඔයලා Layout >> Page Element >> Add a gadget >> "Html/java script" එකක් ගන්න..එකට මම පහල දිලා තියෙන කොඩ් එකක copy කරගෙන ඔයාලා "Html/java script" එකට past කරන්න.


<div class="box">

<ul id="tabMenu">
<li class="posts selected"></li> <!-- default button-->
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>

<div class="boxTop"></div>

<div class="boxBody">
<!-- default page-->
<div id="posts" class="show">
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li class="last">Post 3</li>
</ul>
</div>
<div id="comments">
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li class="last">Comment 3</li>
</ul>
</div>
<div id="category">
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li class="last">Category 3</li>
</ul>
</div>
<div id="famous">
<ul>
<li>Famous post 1</li>
<li>Famous post 2</li>
<li class="last">Famous post 3</li>
</ul>
</div>
<div id="random">
<ul>
<li>Random post 1</li>
<li>Random post 2</li>
<li class="last">Random post 3</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>



ඊට පස්සේ "Html/java script" එක Save කරන්න..
දැන් වැඩේ ගොඩ..


දැන් ඔයලාගේ බ්ලොග් එකටත් ලස්සන jQuery Tab Menu එකක් තියෙනෙවා
කොහොමද වැඩේ...
මතක ඇතුව ඔයාලගේ ප්‍රතිචාරයක් මේ ලිපියට දෙන්න..

ඔබට ජය

Fb comments:



17 Comment + :

ශාන් said...

එල එල මචන්.. එල. නියමෙට කියලා දීලා තියෙන්වා

Jeew said...

හ්ම්... ලිපිය බැළුවා... වැඩේ කරගෙනම ප්‍රතිචාරයක් දාන්නම්කෝ.... බොහොම ස්තූතියි මේ වගේ අළුත් අළුත් දේවල් දෙනවට..

Pramod Indunith said...

හේ.... නියමයි.... මේ වගේ ගැජට්ස් තියෙනවනම් තවත් දාන්න.... ඩෙක් වටිනවා.... එළ

Hero said...

මෙන්න ගැජට්...ස්තුති

Anonymous said...

Nice post

අ - c - ත said...

thanx
මාත් ටෙස්ට් කරලා බැලුවා නියමයි.තව ඒවා නැද්ද?

අ - c - ත said...

uda pic eke dakunu paththe thiyena ekath dannako

සෑම් said...

@ශාන්
ස්තුති මචෝ කොමන්ට් එකට

සෑම් said...

@Jeew

එල එල

සෑම් said...

@Pramod Indunith

අනිවා මල්ලි..

සෑම් said...

@Hero

ස්තුති

සෑම් said...

@Anonymous

Thaks

සෑම් said...

@අ - c - ත

එල එල..තව තියෙනව සහෝ ඉදිරියෙදි දෙන්නම්

කමල් said...

ඔහොම යං අපි ඉන්නවා ඔයාලත් එක්ක.....සුබ අනාගතයක්...

Anonymous said...

machan mama danna baluwa mam ara dewani coding eka blog ekata dala save template karala dunnama mama view blog eka baluwama mama ara dapu okkoma codings tika penna thiyena.

udaw karanna puluwanda.

බබා... said...

මරු..........

sanjaya man said...

me meke apata one post danna baida

මේම ලිපිය ගැන ඔයාලට හිතෙන කැමති දේයක් කියන්න.
ඔයලාගේ අදහස් මට හුගක් වටිනවා