java, c# , linux, program devloper: jquery 카테고리 글 목록http://blog1.phps.kr/blog.visualp.com2021-05-29T03:27:52+09:00Textcube 1.10.7 : Tempo primo오른쪽 베너java, tomcat, c#http://blog1.phps.kr/6432014-02-18T13:55:14+09:002014-02-18T13:55:11+09:00<P>[원문] : <A href="http://blog.bits.kr/90">http://blog.bits.kr/90</A><BR><BR>$(document).ready(function(){<BR> var $doc = $(document);<BR> var position = 0;<BR> var top = $doc.scrollTop(); //현재 스크롤바 위치<BR> var screenSize = 0; // 화면크기<BR> var halfScreenSize = 0; // 화면의 반</P>
<P> /*사용자 설정 값 시작*/<BR> var pageWidth = 1000; // 페이지 폭, 단위:px<BR> var leftOffet = 409; // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px<BR> var leftMargin = 909; // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다.<BR> var speed = 1500; // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)<BR> var easing = 'swing'; // 따라다니는 방법 기본 두가지 linear, swing<BR> var $layer = $('#floating'); // 레이어 셀렉팅<BR> var layerTopOffset = 188; // 레이어 높이 상한선, 단위:px<BR> $layer.css('z-index', 10); // 레이어 z-인덱스<BR> /*사용자 설정 값 끝*/</P>
<P> //좌우 값을 설정하기 위한 함수<BR> function resetXPosition()<BR> {<BR> $screenSize = $('body').width();// 화면크기<BR> halfScreenSize = $screenSize/2;// 화면의 반<BR> xPosition = halfScreenSize + leftOffet;<BR> if ($screenSize < pageWidth)<BR> xPosition = leftMargin;<BR> $layer.css('left', xPosition);<BR> }</P>
<P> // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해<BR> if (top > 0 )<BR> $doc.scrollTop(layerTopOffset+top);<BR> else<BR> $doc.scrollTop(0);</P>
<P> // 최초 레이어가 있을 자리 세팅<BR> $layer.css('top',layerTopOffset);<BR> resetXPosition();</P>
<P> //윈도우 크기 변경 이벤트가 발생하면<BR> $(window).resize(resetXPosition);</P>
<P> //스크롤이벤트가 발생하면<BR> $(window).scroll(function(){<BR> yPosition = $doc.scrollTop()+layerTopOffset;<BR> $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});<BR> });<BR>});<BR>//레이어 HTML 마크업은 아주 간단하게. ID만 주는정도로 끝..(position:absolute는 줘야 합니다..)<BR><div id="floating" style="position:absolute;" ><BR> 레이어 내용<BR></div></P><p><strong><a href="http://blog1.phps.kr/643?commentInput=true#entry643WriteComment">댓글 쓰기</a></strong></p>jquery text rolling,Scrolling Text using jQueryjava, tomcat, c#http://blog1.phps.kr/5402012-12-24T10:01:08+09:002012-12-24T10:01:04+09:00[원문] : <A href="http://www.kevinmusselman.com/2009/10/scrolling-text-jquery-animate/">http://www.kevinmusselman.com/2009/10/scrolling-text-jquery-animate/</A><BR><BR><BR>
<DIV style="MARGIN-TOP: 15px; FONT-WEIGHT: bold">Scroll Text Up</DIV>
<DIV style="BORDER-BOTTOM: #004f72 1px ridge; POSITION: relative; BORDER-LEFT: #004f72 1px ridge; WIDTH: 500px; HEIGHT: 20px; OVERFLOW: hidden; BORDER-TOP: #004f72 1px ridge; BORDER-RIGHT: #004f72 1px ridge" id=scrolltextup>
<DIV style="POSITION: absolute; TEXT-ALIGN: center; WIDTH: 500px; TOP: -9px; LEFT: 0px" id=textup jQuery1356310679277="7">
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="51">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="53">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="55">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="57">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="59">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="61">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="63">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="64">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="67">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="68">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="71">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="73">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="76">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="77">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="80">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="81">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="84">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="85">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="87">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px" jQuery1356310679277="89">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV>
<DIV style="LINE-HEIGHT: 20px">+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.<BR>+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DIV></DIV></DIV>
<DIV style="MARGIN-TOP: 15px; FONT-WEIGHT: bold">Scroll Text to Left <SPAN style="FONT-STYLE: italic; FONT-SIZE: 10px; FONT-WEIGHT: normal">mouseover to stop the animation</SPAN></DIV>
<DIV style="BORDER-BOTTOM: #004f72 1px ridge; POSITION: relative; BORDER-LEFT: #004f72 1px ridge; WIDTH: 500px; HEIGHT: 20px; OVERFLOW: hidden; BORDER-TOP: #004f72 1px ridge; BORDER-RIGHT: #004f72 1px ridge" id=scrollwrapper>
<DIV style="WIDTH: 5000px"><SPAN style="POSITION: absolute; WIDTH: 1000px; LEFT: -252px" id=scrollcontent jQuery1356310679277="5"><SPAN style="TEXT-ALIGN: left; WIDTH: 500px; FLOAT: left" jQuery1356310679277="88">+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. </SPAN><SPAN style="TEXT-ALIGN: left; WIDTH: 500px; FLOAT: left">+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. </SPAN></SPAN></DIV></DIV>
<P>A client of mine recently wanted the option to have scrolling text for breaking news type items. For the most part I think that scrolling text isn’t the greatest thing to use but there are certain situations where its good. The real simple and fast way to do it is to simply use a <marquee> tag like this <marquee width=”100%;” behavior=”SCROLL” direction=”left” scrollamount=”10″> Lorem ipsum doler </marquee></P>
<P>The problem with this is it doesn’t do a continuous loop. What I mean by this is that it doesn’t start over till the text has completely finished scrolling. This means you see a lot of white space. Also jQuery seems to be a smoother animation. I knew jQuery had the <SPAN style="FONT-SIZE: 14px; FONT-WEIGHT: bold">animate</SPAN> function, so I used that. I found some plugins and examples where they had images being repeated but said they couldn’t do text cause they didn’t know the width. I guess they didn’t know css. So lets start with the css/html part of it.</P>
<H2>Scrolling Text to the Left</H2>
<P>The first thing we need to do is to get the width of the text that is being scrolled. So we need to create a div wrapper and set the width to be really big. This way the text wont be wrapped because of parent elements. We also set the display to none and visibility to hidden. This is done so that we don’t ever see this text. The display none keeps the browser from rendering the div in the browser, otherwise with just the visibility set to hidden we would see a big white space. Then we add another element inside with the text.</P><PRE><CODE>
<div id="textwrapper" style="width:5000px; display:none; visibility:hidden;">
<span id="textwidth" style="disply:none;">
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed magna ligula, tempus feugiat pellentesque et,pulvinar
eu tellus. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>
</div>
</CODE>;
</PRE>
<P>Now the html for the actual text being scrolled. We have a scrollwrapper element which contains the width of the the text being scrolled. We also need to set the position to relative so that the text being scrolled will be absolutely positioned relative to this element and not the page. The next element is used to make sure the text doesn’t wrap just like we did previously, we set the width to an arbitrarily large number. Then we have the scrollcontent element. This is the element that is going to be moving. This is positioned absolutely and we set the left position to the width of the scrollwrapper element to make sure it starts on the far right. Then we need one more wrapper inside.</P><PRE style="MARGIN: 0px"><CODE>
<div id="scrollwrapper" style="overflow:hidden; border:1px solid #004F72;
position:relative; width:500px; height:20px;">
<div style="width:5000px;">
<span id="scrollcontent" style="position:absolute; left:500px;">
<span id="firstcontent" style="float:left; text-align:left;">
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed magna ligula, tempus feugiat pellentesque et, pulvinar
eu tellus.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>
</span>
</div>
</div>
</CODE>
</PRE>
<P>Here is the javascript but first let me explain how I am using the jquery animation function. The first object passed to it is what I’m animating. I am changing the property “left” to go to the negative of the scrollwidth. The next thing I pass to it is an object of some of the properties. The first property I am setting is “step”. This is a function that will get called everytime the animation runs. The next property is “duration” which is the amount of time it will take to finish the animation in milliseconds. The next is “easing” which is the equation used to do the animation. jQuery comes with 2 equations: linear and swing. Default is swing but we’ll set it to linear. The last property we’ll set is “complete” which is a function that’ll be called when the animation is done.</P><PRE><CODE>
$("#textwrapper").css({"display":"block"});
var scrollwidth = $("#textwidth").width();
$("#textwrapper").remove();
var scrollwrapperwidth = $("#scrollwrapper").width();
if(scrollwidth < scrollwrapperwidth) scrollwidth = scrollwrapperwidth;
$("#scrollcontent").css({"width":scrollwidth});
$("#firstcontent").css({"width":scrollwidth});
var appending = scrollwrapperwidth-scrollwidth;
var noappend = 0;
function animatetext(rate){
var dist = scrollwidth+parseFloat($("#scrollcontent").css("left"));
if(!rate)rate = 1;
var duration = Math.abs(dist/(rate/100));
$("#scrollcontent").animate({"left":"-"+scrollwidth},{
step: function() {
if(parseFloat($("#scrollcontent").css("left"))< parseFloat(appending)
&& !noappend){
noappend = 1;
$("#scrollcontent").css({"width":scrollwidth+scrollwidth});
$("#scrollcontent").append("<span style='float:left; text-align:left;
width:"+scrollwidth+"px;'>"
+$("#scrollcontent").children(":first").html()+"</span>");
}
},
duration: duration,
easing: "linear",
complete:function(){
$("#scrollcontent").children(":first").remove();
$("#scrollcontent").css({"left":0});
$("#scrollcontent").css({"width":scrollwidth});
noappend=0;
animatetext(6);
}
});
}
$("#scrollcontent").mouseover(function(e){
$("#scrollcontent").stop();
});
$("#scrollcontent").mouseout(function(e){
animatetext(6);
});
$(document).ready(function(){
animatetext(6);
});
</CODE>
</PRE>
<P>First in the javascript we will get the width of the text. We first need to set the css of the textwrapper to "block" so that it will render the child elements width. Then we will get the width of the inner element "textwidth" and then delete the textwrapper element.<BR>If the javascript variable "scrollwidth" is less than the width that we want it to scroll we need to set it. Then we set 2 variables, appending and noappend. These variables are used in the "step" function. So when the position of the scrolling text is less than the position "appending" and we haven't already appended text (the noappend flag), then we'll set the width of the scrollcontent to double the width since we are appending the same text in there again. Then when the animation is completed we will remove the first element, change the left position to 0, change the width of the scrolling content back to the scrollwidth and then call this function again. Also if we want to stop the animation on mouseover as I have it, we simply call the .stop().</P>
<P>NOTE: since the .animate function takes a duration and not a speed, to keep the same speed we need to calculate the duration. That way if you are dynamically changing the text the speed wont change just because you have more or less text. To do this it is pretty straight forward. Since we are using linear as our easing property, the equation is simply d=rt, where d is the distance we need to travel and r is the rate and t is the time. So we get the distance by taking the scrollwidth and adding it to the current left position of the scrollcontent. Then we simple pass in a rate of 1- whatever and calcuate the time in milliseconds.</P>
<H2>Scrolling Text Up</H2>
<P>Scolling text up is even easier. The html looks like this. We need a wrapper with position relative and height equal to whatever you want. Then we need the child element which will be the element being moved. Then we need at least one element inside that to contain the text but can have more if you want. Also the line-height needs to be set to whatever the height is of the outerwrapper.</P><PRE><CODE>
<div id="scrolltextup" style="border:1px ridge #004F72; overflow:hidden;
position:relative; width:500px; height:20px;">
<div id="textup" style="text-align:center; position:absolute; top:0;
left:0; width:500px;">
<div style="line-height:20px;">
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</CODE>
</PRE>
<P>Here is the javascript to do it. We get height of the entire thing. This time we are change the "top" property. Since the distance to animate will always be the same we don't need to calculate duration and can just pass in the duration.</P><PRE><CODE>
var scrollheight = $("#textup").height();
function scrolltextup(dur){
$("#textup").animate({"top":"-=20"},{
duration: dur,
easing: "linear",
complete:function(){
$("#textup").children(":last").after("<div style='line-height:20px;'>"+
$("#textup").children(":first").html()+"</div>");
if($("#textup").children(":first").height() <=
(parseInt($("#textup").css("top"))*-1)){
$("#textup").children(":first").remove();
$("#textup").css({"top":0});
}
setTimeout("scrolltextup(3000)", 500);
}
});
}
</CODE>
</PRE><p><strong><a href="http://blog1.phps.kr/540?commentInput=true#entry540WriteComment">댓글 쓰기</a></strong></p>32 jQuery and CSS Drop Down Menu Examples and Tutorialjava, tomcat, c#http://blog1.phps.kr/4232011-11-11T09:01:42+09:002011-11-11T09:01:39+09:00<DIV class=post-meta><SPAN class=post-categories>[원문]-http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/<BR><A title="View all posts in jQuery" href="http://www.tutorialchip.com/category/jquery/" rel="category tag"><BR>jQuery</A></SPAN> <SPAN class=post-tags><SPAN class=post-tags-cats-divider>\</SPAN> <A href="http://www.tutorialchip.com/tag/drop-down/" rel=tag>drop down</A></SPAN> </DIV>
<H1 class=entry-title>32 jQuery and CSS Drop Down Menu Examples and Tutorial</H1>
<DIV class=post-info><SPAN class="post-author post-vcard"><SPAN class=fn><A title="Posts by lifeobject" href="http://www.tutorialchip.com/author/lifeobject/" rel=author>lifeobject</A></SPAN></SPAN> on <SPAN class="post-date post-published post-time" title="December 28, 2010"><A title="32 jQuery and CSS Drop Down Menu Examples and Tutorial" href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/" rel=bookmark>December 28, 2010</A></SPAN> <SPAN class=post-comments><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/#comments">with 3 Comments</A></SPAN> </DIV>
<DIV id=sponsor-sidebar2>
<DIV id=sponsor-sidebar2-data>
<DIV id=text-28 class=widget_text>
<DIV class=sponsor-sidebar2-widget-wrap>
<DIV class=textwidget>
</DIV>
</DIV></DIV></DIV></DIV>
<DIV class=entry-content>
<DIV style="POSITION: fixed; DISPLAY: block; MARGIN-LEFT: -105px; TOP: 16px" id=dd_ajax_float jQuery1602176826860104874="1">
<DIV class=dd_button_v></DIV>
<DIV class=dd_button_v>
<?xml:namespace prefix = fb /><SPAN></SPAN></DIV>
<DIV class=dd_button_v>
<DIV style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: normal; BORDER-RIGHT-STYLE: none; TEXT-INDENT: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 50px; PADDING-RIGHT: 0px; DISPLAY: inline-block; BORDER-TOP-STYLE: none; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; HEIGHT: 60px; FONT-SIZE: 1px; VERTICAL-ALIGN: baseline; BORDER-LEFT-STYLE: none; PADDING-TOP: 0px; cssFloat: none" id=___plusone_0></DIV></DIV>
<DIV class=dd_button_v>
</DIV>
<DIV class=dd_button_v><SPAN style="TEXT-ALIGN: center; LINE-HEIGHT: 1; DISPLAY: inline-block; VERTICAL-ALIGN: baseline" class=IN-widget><SPAN style="PADDING-BOTTOM: 0px !important; TEXT-INDENT: 0px !important; MARGIN: 0px; PADDING-LEFT: 0px !important; PADDING-RIGHT: 0px !important; DISPLAY: inline-block !important; FONT-SIZE: 1px !important; VERTICAL-ALIGN: baseline !important; PADDING-TOP: 0px !important"><SPAN id=li_ui_li_gen_1320969840890_1-container class=IN-top><SPAN id=li_ui_li_gen_1320969840890_1 class=IN-top><SPAN id=li_ui_li_gen_1320969840890_1-inner class=IN-top><SPAN id=li_ui_li_gen_1320969840890_1-content class=IN-top>1</SPAN></SPAN></SPAN></SPAN></SPAN><BR><SPAN style="PADDING-BOTTOM: 0px !important; TEXT-INDENT: 0px !important; MARGIN: 0px; PADDING-LEFT: 0px !important; PADDING-RIGHT: 0px !important; DISPLAY: inline-block !important; FONT-SIZE: 1px !important; VERTICAL-ALIGN: baseline !important; PADDING-TOP: 0px !important"><SPAN id=li_ui_li_gen_1320969840875_0><A id=li_ui_li_gen_1320969840875_0-link href="javascript:void(0);"><SPAN id=li_ui_li_gen_1320969840875_0-logo>in</SPAN><SPAN id=li_ui_li_gen_1320969840875_0-title><SPAN id=li_ui_li_gen_1320969840875_0-title-text>Share</SPAN></SPAN></A></SPAN></SPAN></SPAN>
</DIV>
<DIV class=dd_button_v><SPAN class="db-wrapper db-clear db-medium"><SPAN class=db-ie><SPAN class=db-container><SPAN class="db-body db-medium"><SPAN class=db-count>1</SPAN><SPAN class=db-copy>digg</SPAN><A class=db-anchor>digg</A></SPAN></SPAN></SPAN></SPAN></DIV>
<DIV class=dd_button_v>
<DIV class="dd_delicious_normal_image dd_delicious"><A onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/')+'&title='+encodeURIComponent('32 jQuery and CSS Drop Down Menu Examples and Tutorial'),'delicious', 'toolbar=no,width=550,height=550'); return false;" href="http://delicious.com/save"><SPAN id=DD_DELICIOUS_AJAX_587>1</SPAN></A></DIV></DIV>
<DIV class=dd_button_extra_v>
<DIV class=st_email_custom st_processed="yes"><SPAN id=dd_email_text>email</SPAN></DIV></DIV>
<DIV id=dd_name><A href="http://www.diggdigg2u.com" target=_blank>Digg Digg</A></DIV></DIV>
<DIV class=dd_content_wrap>
<P>Beautiful and professional drop down menus remain hot choice for the develops, blogger, web designers and programmers. So today, i am going to concentrate on perfect and comprehensive programming article about jQuery and CSS based drop down menus. This post is for you, if you are interested to to build jQuery and CSS based simple or multi-level drop down menu by these professional and perfect tutorials.</P>
<H2>1. “Outside the Box” Navigation with jQuery</H2>
<P>Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/outside-the-box-navigation-with-jquery/" rel="attachment wp-att-538"><IMG class="aligncenter size-medium wp-image-538" title="Outside the Box Navigation with jQuery" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Outside-the-Box-Navigation-with-jQuery-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/" target=_blank>View Tutorial</A> – <A href="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/example%20files/all-examples.html" target=_blank>View Demo</A></P>
<H2>2. Sexy Drop Down Menu w/ jQuery & CSS</H2>
<P>In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/sexy-drop-down-menu-with-jquery-and-css/" rel="attachment wp-att-539"><IMG class="aligncenter size-medium wp-image-539" title="Sexy Drop Down Menu with jQuery and CSS" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Sexy-Drop-Down-Menu-with-jQuery-and-CSS-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html" target=_blank>View Tutorial</A> – <A href="http://www.sohtanaka.com/web-design/examples/drop-down-menu/" target=_blank>View Demo</A></P>
<H2>3. Designing the Digg Header: How To & Download</H2>
<P>The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/designing-the-digg-header/" rel="attachment wp-att-540"><IMG class="aligncenter size-medium wp-image-540" title="Designing the Digg Header" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/Designing-the-Digg-Header-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://css-tricks.com/designing-the-digg-header-how-to-download/" target=_blank>View Tutorial</A> – <A href="http://css-tricks.com/examples/DiggHeader/#" target=_blank>View Demo</A></P>
<H2>4. Create The Fanciest Dropdown Menu You Ever Saw</H2>
<P>Recently he has changed his website design and the layout, but this tutorial is sweet, and one amazing navigation! Here is a bit about Brian</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/create-the-fanciest-dropdown-menu-you-ever-saw/" rel="attachment wp-att-541"><IMG class="aligncenter size-medium wp-image-541" title="Create The Fanciest Dropdown Menu You Ever Saw" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/Create-The-Fanciest-Dropdown-Menu-You-Ever-Saw-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw" target=_blank>View Tutorial</A> – <A href="http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html" target=_blank>View Demo</A></P>
<H2>5. A Circular Menu with Sub Menus</H2>
<P>A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/a-circular-menu-with-sub-menus/" rel="attachment wp-att-542"><IMG class="aligncenter size-medium wp-image-542" title="A circular menu with sub menus" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/A-circular-menu-with-sub-menus-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.cssplay.co.uk/menus/circular-sub.html" target=_blank>View Tutorial</A> – <A href="http://www.cssplay.co.uk/menus/circular-sub.html" target=_blank>View Demo</A></P>
<H2>6. A Different Top Navigation</H2>
<P>In this tutorial, we will be doing precisely that. We will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/a-different-top-navigation/" rel="attachment wp-att-543"><IMG class="aligncenter size-medium wp-image-543" title="A Different Top Navigation" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/A-Different-Top-Navigation-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/" target=_blank>View Tutorial</A> – <A href="http://nettuts.s3.amazonaws.com/386_navigation/top-nav-demo/index.html" target=_blank>View Demo</A></P>
<H2>7. Perfect Signin Dropdown Box Likes Twitter with jQuery</H2>
<P>Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/perfect-signin-dropdown-box-likes-twitter-with-jquery/" rel="attachment wp-att-544"><IMG class="aligncenter size-medium wp-image-544" title="Perfect signin dropdown box likes Twitter with jQuery" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/Perfect-signin-dropdown-box-likes-Twitter-with-jQuery-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/" target=_blank>View Tutorial</A> – <A href="http://aext.net/example/twitterlogin/" target=_blank>View Demo</A></P>
<H2>8. Sliding Jquery Menu Tutorial</H2>
<P>Hi there welcome to another tutorial, in this tutorial il show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/sliding-jquery-menu-tutorial/" rel="attachment wp-att-545"><IMG class="aligncenter size-medium wp-image-545" title="Sliding Jquery Menu Tutorial" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Sliding-Jquery-Menu-Tutorial-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target=_blank>View Tutorial</A> – <A href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target=_blank>View Demo</A></P>
<H2>9. Fancy Sliding Menu for Mootools</H2>
<P>Due to the popularity of the script.aculo.us version of the Fancy Sliding Menu I decided a Mootools version was now in order. It looks exactly the same as the the script.aculo.us, it works exactly the same as the script.aculo.us version, the only difference is it runs on Mootools.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/fancy-sliding-menu-for-mootools/" rel="attachment wp-att-546"><IMG class="aligncenter size-medium wp-image-546" title="Fancy Sliding Menu for Mootools" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Fancy-Sliding-Menu-for-Mootools-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.andrewsellick.com/71/fancy-sliding-menu-for-mootools" target=_blank>View Tutorial</A> – <A href="http://www.andrewsellick.com/examples/tabslideV2-mootools/" target=_blank>View Demo</A></P>
<H2>10. Create Vimeo Like Top Navigation</H2>
<P>The base for this tutorial is simple CSS drop down menu based on unordered list.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/create-vimeo-like-top-navigation/" rel="attachment wp-att-547"><IMG class="aligncenter size-medium wp-image-547" title="Create Vimeo-like top navigation" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Create-Vimeo-like-top-navigation-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target=_blank>View Tutorial</A> – <A href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/" target=_blank>View Demo</A></P>
<H2>11. Dynamic PHP CSS Menu</H2>
<P>PHP menu that will allow me to play with lots of options and situations. My application required some special code because it’s based on member groups and so, my menu was supposed to reflect the permissions attached to each group in part.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/dynamic-php-css-menu/" rel="attachment wp-att-548"><IMG class="aligncenter size-medium wp-image-548" title="Dynamic PHP CSS menu" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Dynamic-PHP-CSS-menu-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html" target=_blank>View Tutorial</A> – <A href="http://www.roscripts.com/uploads/articles/216/" target=_blank>View Demo</A></P>
<H2>12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls</H2>
<P>One of the designers on our UI team requested a screen mockup with a page layout that is similar to your typical email client. The page is divided vertically into 2 panes. The left pane contains a 2 level hierarchy of categories and subcategories. As the user selects different subcategories the designer wants the right pane’s content to be updated with the corresponding information. Just like Outlook, the designer wants the subcategories to be displayed within expanding and collapsing panels.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/creating-an-outlook-navigation-bar-using-the-listview-and-accordion-controls/" rel="attachment wp-att-549"><IMG class="aligncenter size-medium wp-image-549" title="Creating an Outlook Navigation Bar using the ListView and Accordion Controls" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Creating-an-Outlook-Navigation-Bar-using-the-ListView-and-Accordion-Controls-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://mattberseth.com/blog/2007/12/creating_an_outlook_navigation.html" target=_blank>View Tutorial</A> – <A href="http://mattberseth2.com/demo/Default.aspx?Name=Creating+an+Outlook+Navigation+Bar+using+the+ListView+and+Accordion+Controls&Filter=All" target=_blank>View Demo</A></P>
<H2>13. Animated Drop Down Menu with jQuery</H2>
<P>Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/animated-drop-down-menu-with-jquery/" rel="attachment wp-att-550"><IMG class="aligncenter size-medium wp-image-550" title="Animated Drop Down Menu with jQuery" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/Animated-Drop-Down-Menu-with-jQuery-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/" target=_blank>View Tutorial</A> – <A href="http://clarklab.net/blog/articles/dropdown/example.html" target=_blank>View Demo</A></P>
<H2>14. Make a Mega Drop-Down Menu with jQuery</H2>
<P>Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/make-a-mega-drop-down-menu-with-jquery/" rel="attachment wp-att-555"><IMG class="aligncenter size-medium wp-image-555" title="Make a Mega Drop-Down Menu with jQuery" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/Make-a-Mega-Drop-Down-Menu-with-jQuery-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/" target=_blank>View Tutorial</A> – <A href="http://www.sitepoint.com/examples/megadropdowns/completed.html" target=_blank>View Demo</A></P>
<H2>15. A Cross-Browser Drop Down Cascading Validating Menu</H2>
<P>If you love this you will be over the moon about the Mk.3 version.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/a-cross-browser-drop-down-cascading-validating-menu/" rel="attachment wp-att-556"><IMG class="aligncenter size-medium wp-image-556" title="A cross-browser drop-down cascading validating menu" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/A-cross-browser-drop-down-cascading-validating-menu-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/" target=_blank>View Tutorial</A> – <A href="http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/" target=_blank>View Demo</A></P>
<H2>16. Drop-Down Menus, Horizontal Style</H2>
<P>Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/drop-down-menus-horizontal-style/" rel="attachment wp-att-557"><IMG class="aligncenter size-medium wp-image-557" title="Drop-Down Menus, Horizontal Style" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Drop-Down-Menus-Horizontal-Style-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.alistapart.com/articles/horizdropdowns/" target=_blank>View Tutorial</A> – <A href="http://www.alistapart.com/d/horizdropdowns/horizontal.htm" target=_blank>View Demo</A></P>
<H2>17. Superfish jQuery menu plugin by Joel Birch</H2>
<P>Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/superfish-jquery-menu-plugin-by-joel-birch/" rel="attachment wp-att-558"><IMG class="aligncenter size-medium wp-image-558" title="Superfish jQuery menu plugin by Joel Birch" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/Superfish-jQuery-menu-plugin-by-Joel-Birch-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://users.tpg.com.au/j_birch/plugins/superfish/" target=_blank>View Tutorial</A> – <A href="http://users.tpg.com.au/j_birch/plugins/superfish/#examples" target=_blank>View Demo</A></P>
<H2>18. JavaScript Dropdown Menu with Multi Levels</H2>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/javascript-dropdown-menu-with-multi-levels/" rel="attachment wp-att-559"><IMG class="aligncenter size-medium wp-image-559" title="JavaScript Dropdown Menu with Multi Levels" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/JavaScript-Dropdown-Menu-with-Multi-Levels-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.leigeber.com/2008/11/drop-down-menu/" target=_blank>View Tutorial</A> – <A href="http://sandbox.leigeber.com/dropdown-menu/index.html#" target=_blank>View Demo</A></P>
<H2>19. jQuery (mb) Menu 2.7</H2>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/jquery-mb-menu-2-7/" rel="attachment wp-att-560"><IMG class="aligncenter size-medium wp-image-560" title="jQuery (mb) Menu 2.7" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/jQuery-mb-Menu-2.7-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://pupunzi.open-lab.com/2009/01/18/mbmenu/" target=_blank>View Tutorial</A> – <A href="http://pupunzi.com/" target=_blank>View Demo</A></P>
<H2>20. Menumatic</H2>
<P>MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/menumatic/" rel="attachment wp-att-561"><IMG class="aligncenter size-medium wp-image-561" title=Menumatic alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Menumatic-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://greengeckodesign.com/menumatic" target=_blank>View Tutorial</A> – <A href="http://greengeckodesign.com/projects/MenuMatic/examples/horizontal/index.htm" target=_blank>View Demo</A></P>
<H2>21. Smooth Navigational Menu</H2>
<P>Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site. The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/smooth-navigational-menu/" rel="attachment wp-att-562"><IMG class="aligncenter size-medium wp-image-562" title="Smooth Navigational Menu" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Smooth-Navigational-Menu-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" target=_blank>View Tutorial</A> – <A href="http://greengeckodesign.com/projects/MenuMatic/examples/vertical/index.htm?q=projects/menumatic/examples/vertical/" target=_blank>View Demo</A></P>
<H2>22. Longed-For Multi-Level Drop-Down Menu Script</H2>
<P>The main feature of this menu is the clear separation between the HTML code, software code and visual appearance. No more onmouseover or onmouseout or, worse, multidimensional array of elements in a .js file. The HTML code of the menu is a simple treelike unordered list:</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/longed-for-multi-level-drop-down-menu-script/" rel="attachment wp-att-563"><IMG class="aligncenter size-medium wp-image-563" title="Longed-For Multi-Level Drop-Down Menu Script" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Longed-For-Multi-Level-Drop-Down-Menu-Script-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://javascript-array.com/scripts/multi_level_drop_down_menu/?st" target=_blank>View Tutorial</A> – <A href="http://javascript-array.com/scripts/multi_level_drop_down_menu/?st" target=_blank>View Demo</A></P>
<H2>23. jQuery & CSS Example – Dropdown Menu</H2>
<P>Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/jquery-css-example-%e2%80%93-dropdown-menu/" rel="attachment wp-att-564"><IMG class="aligncenter size-medium wp-image-564" title="jQuery & CSS Example – Dropdown Menu" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/jQuery-CSS-Example-–-Dropdown-Menu-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target=_blank>View Tutorial</A> – <A href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target=_blank>View Demo</A></P>
<H2>24. Reinventing a Drop Down with CSS and jQuery</H2>
<P>For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/reinventing-a-drop-down-with-css-and-jquery/" rel="attachment wp-att-565"><IMG class="aligncenter size-medium wp-image-565" title="Reinventing a Drop Down with CSS and jQuery" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/Reinventing-a-Drop-Down-with-CSS-and-jQuery-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx" target=_blank>View Tutorial </A>- <A href="http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/" target=_blank>View Demo</A></P>
<H2>25. Simple jQuery Dropdowns</H2>
<P>There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/simple-jquery-dropdowns/" rel="attachment wp-att-566"><IMG class="aligncenter size-medium wp-image-566" title="Simple jQuery Dropdowns" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/Simple-jQuery-Dropdowns-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://css-tricks.com/simple-jquery-dropdowns/" target=_blank>View Tutorial</A> – <A href="http://css-tricks.com/examples/SimplejQueryDropdowns/" target=_blank>View Demo</A></P>
<H2>26. jQuery iPod-style Drilldown Menu</H2>
<P>We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/jquery-ipod-style-drilldown-menu/" rel="attachment wp-att-567"><IMG class="aligncenter size-medium wp-image-567" title="jQuery iPod-style Drilldown Menu" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/jQuery-iPod-style-Drilldown-Menu-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu" target=_blank>View Tutorial</A> – <A href="http://www.filamentgroup.com/examples/menusHierarchical/" target=_blank>View Demo</A></P>
<H2>27. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready</H2>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/jquery-menu-dropdown-ipod-drilldown-and-flyout-styles/" rel="attachment wp-att-568"><IMG class="aligncenter size-medium wp-image-568" title="jQuery Menu Dropdown iPod Drilldown and Flyout styles" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/jQuery-Menu-Dropdown-iPod-Drilldown-and-Flyout-styles-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/" target=_blank>View Tutorial</A> – <A href="http://www.filamentgroup.com/examples/menus/ipod.php" target=_blank>View Demo</A></P>
<H2>28. mcDropdown jQuery Plug-in</H2>
<P>While the list of requirements was not long, we knew there would be substantial technical obstacles to overcome. The biggest obstacle to solve would be how to ensure that the menu and all of its submenus remain on the screen at all times.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/mcdropdown-jquery-plug-in/" rel="attachment wp-att-569"><IMG class="aligncenter size-medium wp-image-569" title="mcDropdown jQuery Plug-in" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/mcDropdown-jQuery-Plug-in-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm" target=_blank>View Demo</A> – <A href="http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm" target=_blank>View Tutorial</A></P>
<H2>29. jQuery Drop Line Tabs</H2>
<P>This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI. The menu also manages to sneak in a little CSS3, making use of the “border-radius” property to give each link within the sub ULs rounded edges when the mouse hovers over them..</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/jquery-drop-line-tabs/" rel="attachment wp-att-570"><IMG class="aligncenter size-medium wp-image-570" title="jQuery Drop Line Tabs" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/jQuery-Drop-Line-Tabs-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/" target=_blank>View Tutorial</A> – <A href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/" target=_blank>View Demo</A></P>
<H2>30. Cut & Paste jQuery Mega Menu</H2>
<P>Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/cut-paste-jquery-mega-menu/" rel="attachment wp-att-571"><IMG class="aligncenter size-medium wp-image-571" title="Cut & Paste jQuery Mega Menu" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Cut-Paste-jQuery-Mega-Menu-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.javascriptkit.com/script/script2/jkmegamenu.shtml" target=_blank>View Tutorial</A> – <A href="http://www.javascriptkit.com/script/script2/jkmegamenu.shtml" target=_blank>View Demo</A></P>
<H2>31. Professional Dropdown</H2>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/professional-dropdown/" rel="attachment wp-att-572"><IMG class="aligncenter size-medium wp-image-572" title="Professional dropdown" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/Professional-dropdown-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.stunicholls.com/menu/pro_dropdown_2.html" target=_blank>View Tutorial</A> – <A href="http://www.stunicholls.com/menu/pro_dropdown_2.html" target=_blank>View Demo</A></P>
<H2>32. Drop Down Menu with Nested Submenus</H2>
<P>Drop down menus are among the coolest things on the web. Beside that they are also very good for creating navigations that contain many elements. The main problems of creating drop down menus lies in the Internet Explorer’s inappropriate way of displaying :hover pseudo class (not recognized anywhere except in A tag), and the problem in calculating the z-index when an element is positioned absolutely inside a relatively positioned element.</P>
<P><A href="http://www.tutorialchip.com/jquery/32-jquery-and-css-drop-down-menu-examples-and-tutorial/attachment/drop-down-menu-with-nested-submenus/" rel="attachment wp-att-573"><IMG class="aligncenter size-medium wp-image-573" title="Drop down menu with nested submenus" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Drop-down-menu-with-nested-submenus-520x204.jpg" width=520 height=204></A></P>
<P><A href="http://www.emanuelblagonic.com/2006/10/11/create-your-own-drop-down-menu-with-nested-submenus-using-css-and-a-little-javascript/" target=_blank>View Tutorial</A> – <A href="http://playground.emanuelblagonic.com/creating-nested-drop-down-menus/" target=_blank>View Demo</A></P></DIV>
</DIV>
<DIV class=post-meta><SPAN class=post-categories>Filed Under: <A title="View all posts in jQuery" href="http://www.tutorialchip.com/category/jquery/" rel="category tag">jQuery</A></SPAN> <SPAN class=post-tags>Tagged With: <A href="http://www.tutorialchip.com/tag/drop-down/" rel=tag>drop down</A>, <A href="http://www.tutorialchip.com/tag/menu/" rel=tag>menu</A>, <A href="http://www.tutorialchip.com/tag/tutorial/" rel=tag>tutorial</A></SPAN> </DIV><p><strong><a href="http://blog1.phps.kr/423?commentInput=true#entry423WriteComment">댓글 쓰기</a></strong></p>jquery , tab menu tutorial , 탭메뉴 튜토리얼java, tomcat, c#http://blog1.phps.kr/4222011-11-10T08:45:08+09:002011-11-10T08:45:04+09:00<DIV class=post-image-wrap></DIV>
<DIV class=post-meta><SPAN class=post-categories><A title="View all posts in jQuery" href="http://www.tutorialchip.com/category/jquery/" rel="category tag">jQuery</A></SPAN> <SPAN class=post-tags><SPAN class=post-tags-cats-divider>\</SPAN> <A href="http://www.tutorialchip.com/tag/tabs/" rel=tag>tabs</A></SPAN> </DIV>
<H1 class=entry-title>jQuery Tabs Tutorial: 18 Exceptional Techniques</H1>
<DIV class=post-info><SPAN class="post-author post-vcard"><SPAN class=fn><A title="Posts by lifeobject" href="http://www.tutorialchip.com/author/lifeobject/" rel=author>lifeobject</A></SPAN></SPAN> on <SPAN class="post-date post-published post-time" title="December 18, 2010"><A title="jQuery Tabs Tutorial: 18 Exceptional Techniques" href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/" rel=bookmark>December 18, 2010</A></SPAN> <SPAN class=post-comments><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/#comments">with 0 Comment</A></SPAN> </DIV>
<DIV id=sponsor-sidebar2>
<DIV id=sponsor-sidebar2-data>
<DIV id=text-28 class=widget_text>
<DIV class=sponsor-sidebar2-widget-wrap>
<DIV class=textwidget>
<A title="jQuery Tabs Tutorial: 18 Exceptional Techniques" href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/"><IMG class=post-image title="Slick Tabbed Content Area" alt="Slick Tabbed Content Area" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/Slick-Tabbed-Content-Area.jpg" width=200 height=200></A></DIV>
</DIV></DIV></DIV></DIV>
<DIV class=entry-content>
<DIV style="POSITION: absolute; DISPLAY: block; MARGIN-LEFT: -105px; TOP: 444px" id=dd_ajax_float jQuery1603233642642343271="1">
<DIV class=dd_button_v></DIV>
<DIV class=dd_button_v>
<?xml:namespace prefix = fb /><SPAN></SPAN></DIV>
<DIV class=dd_button_v>
<DIV style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: normal; BORDER-RIGHT-STYLE: none; TEXT-INDENT: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 50px; PADDING-RIGHT: 0px; DISPLAY: inline-block; BORDER-TOP-STYLE: none; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; HEIGHT: 60px; FONT-SIZE: 1px; VERTICAL-ALIGN: baseline; BORDER-LEFT-STYLE: none; PADDING-TOP: 0px; cssFloat: none" id=___plusone_0></DIV></DIV>
<DIV class=dd_button_v>
</DIV>
<DIV class=dd_button_v><SPAN style="TEXT-ALIGN: center; LINE-HEIGHT: 1; DISPLAY: inline-block; VERTICAL-ALIGN: baseline" class=IN-widget><SPAN style="PADDING-BOTTOM: 0px !important; TEXT-INDENT: 0px !important; MARGIN: 0px; PADDING-LEFT: 0px !important; PADDING-RIGHT: 0px !important; DISPLAY: inline-block !important; FONT-SIZE: 1px !important; VERTICAL-ALIGN: baseline !important; PADDING-TOP: 0px !important"><SPAN id=li_ui_li_gen_1320882452421_1-container class=IN-top><SPAN id=li_ui_li_gen_1320882452421_1 class=IN-top><SPAN id=li_ui_li_gen_1320882452421_1-inner class=IN-top><SPAN id=li_ui_li_gen_1320882452421_1-content class=IN-top>1</SPAN></SPAN></SPAN></SPAN></SPAN><BR><SPAN style="PADDING-BOTTOM: 0px !important; TEXT-INDENT: 0px !important; MARGIN: 0px; PADDING-LEFT: 0px !important; PADDING-RIGHT: 0px !important; DISPLAY: inline-block !important; FONT-SIZE: 1px !important; VERTICAL-ALIGN: baseline !important; PADDING-TOP: 0px !important"><SPAN id=li_ui_li_gen_1320882452406_0><A id=li_ui_li_gen_1320882452406_0-link href="javascript:void(0);"><SPAN id=li_ui_li_gen_1320882452406_0-logo>in</SPAN><SPAN id=li_ui_li_gen_1320882452406_0-title><SPAN id=li_ui_li_gen_1320882452406_0-title-text>Share</SPAN></SPAN></A></SPAN></SPAN></SPAN>
</DIV>
<DIV class=dd_button_v><SPAN class="db-wrapper db-clear db-medium"><SPAN class=db-ie><SPAN class=db-container><SPAN class="db-body db-medium"><SPAN class=db-count>1</SPAN><SPAN class=db-copy>digg</SPAN><A class=db-anchor>digg</A></SPAN></SPAN></SPAN></SPAN></DIV>
<DIV class=dd_button_v>
<DIV class="dd_delicious_normal_image dd_delicious"><A onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/')+'&title='+encodeURIComponent('jQuery Tabs Tutorial: 18 Exceptional Techniques'),'delicious', 'toolbar=no,width=550,height=550'); return false;" href="http://delicious.com/save"><SPAN id=DD_DELICIOUS_AJAX_247>4</SPAN></A></DIV></DIV>
<DIV class=dd_button_extra_v>
<DIV class=st_email_custom st_processed="yes"><SPAN id=dd_email_text>email</SPAN></DIV></DIV>
<DIV id=dd_name><A href="http://www.diggdigg2u.com" target=_blank>Digg Digg</A></DIV></DIV>
<DIV class=dd_content_wrap>
<P>Tabs are very useful for web designers and developers to present a lot of information professionally without losing usability. I am also using tabs on my blog to present classes, plugins, themes, scripts and more. Popularity of tabs is increasing day by day and lot of blogs are using tabbed content to manage their data without compromising layout.</P>
<H2>1. Create a Slick Tabbed Content Area Using CSS & jQuery</H2>
<P>This is an excellent tutorial by tutplus. They have build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.</P>
<DIV style="WIDTH: 530px" id=attachment_248 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/slick-tabbed-content-area/" rel="attachment wp-att-248"><IMG class="size-medium wp-image-248" title="Slick Tabbed Content Area" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Slick-Tabbed-Content-Area-520x520.jpg" width=520 height=520></A>
<P class=wp-caption-text>Slick Tabbed Content Area</P></DIV>
<P><A href="http://www.extratuts.com/amazing-jquery-tabs-tutorials" target=_blank>View Tutorial</A> – <A href="http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html" target=_blank>View Demo</A></P>
<H2>2. Create a Tabbed Interface Using jQuery</H2>
<P>This is another beautiful tutorial by the same site. This tutorial can be utilized to create completely unique interfaces without having to be a coding God – using only one line of code!</P>
<DIV style="WIDTH: 331px" id=attachment_251 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/create-a-tabbed-interface/" rel="attachment wp-att-251"><IMG class="size-full wp-image-251" title="Create A Tabbed Interface" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Create-A-Tabbed-Interface.jpg" width=321 height=261></A>
<P class=wp-caption-text>Create A Tabbed Interface</P></DIV>
<P><A href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target=_blank>View Tutorial</A> – <A href="http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html" target=_blank>View Demo</A></P>
<H2>3. Simple Tabs w/ CSS & jQuery</H2>
<P>This is a nice tutorial that can be easy to understand even for a beginner.</P>
<DIV style="WIDTH: 524px" id=attachment_252 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/simple-tabs/" rel="attachment wp-att-252"><IMG class="size-full wp-image-252" title="Simple Tabs" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/Simple-Tabs.jpg" width=514 height=480></A>
<P class=wp-caption-text>Simple Tabs</P></DIV>
<P><A href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/" target=_blank>View Tutorial</A> – <A href="http://www.sohtanaka.com/web-design/examples/tabs/" target=_blank>View Demo</A></P>
<H2>4. jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</H2>
<P>Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.</P>
<DIV style="WIDTH: 530px" id=attachment_253 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/jquery-tabbed-interface/" rel="attachment wp-att-253"><IMG class="size-medium wp-image-253" title="jQuery Tabbed Interface" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/jQuery-Tabbed-Interface-520x334.gif" width=520 height=334></A>
<P class=wp-caption-text>jQuery Tabbed Interface</P></DIV>
<P><A href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial" target=_blank>View Tutorial</A> – <A href="http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html" target=_blank>View Demo</A></P>
<H2>5. Playing with jQuery Tabs</H2>
<P>According to author, Creating tabs is as simple as setting up some simple HTML and “enabling” it with a line of JavaScript code.</P>
<DIV style="WIDTH: 530px" id=attachment_254 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/playing-with-jquery-tabs/" rel="attachment wp-att-254"><IMG class="size-medium wp-image-254" title="Playing with jQuery Tabs" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Playing-with-jQuery-Tabs-520x99.jpg" width=520 height=99></A>
<P class=wp-caption-text>Playing with jQuery Tabs</P></DIV>
<P><A href="http://insideria.com/2009/03/playing-with-jquery-tabs.html" target=_blank>View Tutorial</A> – <A href="http://www.coldfusionjedi.com/demos/jquerytabs/test2.html" target=_blank>View Demo</A></P>
<H2>6. Slide Tabbed Box Using jQuery</H2>
<P>There are so many kinds of tabbed menu nowadays. Still I really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust me it only takes a few minutes.</P>
<DIV style="WIDTH: 419px" id=attachment_257 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/slidetabbed-box-using-jquery/" rel="attachment wp-att-257"><IMG class="size-full wp-image-257" title="Slide Tabbed Box Using jQuery" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/SlideTabbed-Box-Using-jQuery.jpg" width=409 height=323></A>
<P class=wp-caption-text>Slide Tabbed Box Using jQuery</P></DIV>
<P><A href="http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/" target=_blank>View Tutorial</A> – <A href="http://www.hieu.co.uk/Examples/SlideTabs/index.html" target=_blank>View Demo</A></P>
<H2>7. Javascript: jQuery Tabs</H2>
<P>In modern web applications you often need to make something visually appealing and without using something like Flash, the best thing for this is Javascript. This is the first of a series of articles showing how to use these frameworks to make your application a better place – Tabs using JQuery.</P>
<DIV style="WIDTH: 530px" id=attachment_258 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/jquery-tabs/" rel="attachment wp-att-258"><IMG class="size-medium wp-image-258" title="JQuery Tabs" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/JQuery-Tabs-520x135.jpg" width=520 height=135></A>
<P class=wp-caption-text>JQuery Tabs</P></DIV>
<P><A href="http://progtuts.info/232/javascript-jquery-tabs/" target=_blank>View Tutorial</A> – <A href="http://progtuts.info/downloads/JQueryTabs/" target=_blank>View Demo</A></P>
<H2>8. Create Flipping Content Tabs Using jQuery</H2>
<P>Content Tabs have become more popular lately with more and more websites and blogs using them to show more content in lesser space. This tutorial is going to show you how to create content tabs with nice flipping effect.</P>
<DIV style="WIDTH: 329px" id=attachment_269 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/flipping-content-tabs-using-jquery/" rel="attachment wp-att-269"><IMG class="size-full wp-image-269" title="Flipping Content Tabs Using jQuery" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Flipping-Content-Tabs-Using-jQuery.jpg" width=319 height=256></A>
<P class=wp-caption-text>Flipping Content Tabs Using jQuery</P></DIV>
<P><A href="http://webdeveloperplus.com/jquery/create-flipping-content-tabs-using-jquery/" target=_blank>View Tutorial</A> – <A href="http://demo.webdeveloperplus.com/flipping-tabs/" target=_blank>View Demo</A></P>
<H2>9. Ultra Simple jQuery Tabs</H2>
<P>Tabs are perhaps one of the most popular layouts used in web design today – particular in sidebars. In this tutorial we’ll be using the jQuery library to build an ultra simple tabbed layout in less than 20 lines of JavaScript!</P>
<DIV style="WIDTH: 275px" id=attachment_270 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/ultra-simple-jquery-tabs/" rel="attachment wp-att-270"><IMG class="size-full wp-image-270" title="Ultra simple jQuery tabs" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/Ultra-simple-jQuery-tabs.jpg" width=265 height=80></A>
<P class=wp-caption-text>Ultra simple jQuery tabs</P></DIV>
<P><A href="http://justfreetemplates.com/blog/2009/08/31/ultra-simple-jquery-tabs.html" target=_blank>View Tutorial</A> – <A href="http://justfreetemplates.com/blog/wp-content/uploads/2009/08/simple-jquery-tabs.html" target=_blank>View Demo</A></P>
<H2>10. jQuery Tabs Made Easy</H2>
<P>This beautiful tutorial is about small jQuery dependant code to create amazing tabs widget with useful functionality.</P>
<DIV style="WIDTH: 337px" id=attachment_275 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/jquery-tabs-made-easy/" rel="attachment wp-att-275"><IMG class="size-full wp-image-275" title="jQuery Tabs made easy" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/jQuery-Tabs-made-easy.jpg" width=327 height=288></A>
<P class=wp-caption-text>jQuery Tabs made easy</P></DIV>
<P><A href="http://www.ilovecolors.com.ar/jquery-tabs/" target=_blank>View Tutorial</A> – <A href="http://www.ilovecolors.com.ar/wp-content/uploads/jquery-tabs/" target=_blank>View Demo</A></P>
<H2>11. Animated Tabbed Content with jQuery</H2>
<P>This tutorial is about a container which has the ability to switch content through tabs, but with an animation. This tutorial will show you how to create your own tabbed content step by step.</P>
<DIV style="WIDTH: 530px" id=attachment_278 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/tabbed-content-with-jquery/" rel="attachment wp-att-278"><IMG class="size-medium wp-image-278" title="Tabbed content with jQuery" alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/Tabbed-content-with-jQuery-520x172.jpg" width=520 height=172></A>
<P class=wp-caption-text>Tabbed content with jQuery</P></DIV>
<P><A href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/" target=_blank>View Tutorial</A> – <A href="http://www.gayadesign.com/scripts/tabbed/" target=_blank>View Demo</A></P>
<H2>12. jQuery to Fade Effects Tabs</H2>
<P>In this JQuery tutorial we will develop a program to make Fade Effect tab</P>
<DIV style="WIDTH: 357px" id=attachment_279 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/jquery-to-fade-effects-tabs/" rel="attachment wp-att-279"><IMG class="size-full wp-image-279" title="jQuery To Fade Effects tabs" alt="" src="http://cdn2.tutorialchip.com/wp-content/uploads/2010/12/jQuery-To-Fade-Effects-tabs.gif" width=347 height=227></A>
<P class=wp-caption-text>jQuery To Fade Effects tabs</P></DIV>
<P><A href="http://www.roseindia.net/ajax/jquery/fadeEffectTabs.shtml" target=_blank>View Tutorial</A> – <A href="http://www.roseindia.net/ajax/jquery/fadeEffectTab.html" target=_blank>View Demo</A></P>
<H2>13. jQuery Tab Container Theme with Tab Transition Animations</H2>
<P>It is an easy to understand tutorial to create a tab container with transition animations.</P>
<DIV style="WIDTH: 530px" id=attachment_280 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/jquery-tabcontainer-theme-with-tab-transition-animations/" rel="attachment wp-att-280"><IMG class="size-medium wp-image-280" title="JQuery TabContainer Theme with Tab Transition Animations" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/JQuery-TabContainer-Theme-with-Tab-Transition-Animations-520x227.png" width=520 height=227></A>
<P class=wp-caption-text>JQuery TabContainer Theme with Tab Transition Animations</P></DIV>
<P><A href="http://mattberseth.com/blog/2007/11/jquery_tabcontainer_theme_with.html" target=_blank>View Tutorial</A> – <A href="http://mattberseth2.com/demo/Default.aspx?Name=JQuery+TabContainer+Theme+with+Tab+Transition+Animations&Filter=All" target=_blank>View Demo</A></P>
<H2>14. jQuery Sliding Tab Menu for Sidebar Tutorial</H2>
<P>Learn how to create a sliding tab menu for your sidebar by using jQuery and jQuery.scrollTo. With this simple tutorial, you’ll able to create a slick and attractive sidebar. It’s so simple and fully customizable.</P>
<DIV style="WIDTH: 530px" id=attachment_281 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/jquery-sliding-tab-menu-for-sidebar-tutorial/" rel="attachment wp-att-281"><IMG class="size-medium wp-image-281" title="jQuery Sliding Tab Menu for Sidebar Tutorial" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/jQuery-Sliding-Tab-Menu-for-Sidebar-Tutorial-520x341.gif" width=520 height=341></A>
<P class=wp-caption-text>jQuery Sliding Tab Menu for Sidebar Tutorial</P></DIV>
<P><A href="http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial" target=_blank>View Tutorial</A> – <A href="http://www.queness.com/resources/html/scrollto/index.html" target=_blank>View Demo</A></P>
<H2>15. jQuery Tabs</H2>
<P>Tabbing has been common place on the Internet for some time now. Today web sites will make use of tabbing without the page having to reload with the addition of JavaScript.</P>
<DIV style="WIDTH: 530px" id=attachment_282 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/jquery-tabs-2/" rel="attachment wp-att-282"><IMG class="size-medium wp-image-282" title="jQuery Tabs" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/jQuery-Tabs-520x154.jpg" width=520 height=154></A>
<P class=wp-caption-text>jQuery Tabs</P></DIV>
<P><A href="http://jqueryfordesigners.com/jquery-tabs/" target=_blank>View Tutorial</A> – <A href="http://jqueryfordesigners.com/demo/tabs.html" target=_blank>View Demo</A></P>
<H2>16. Create a Smooth Tabbed Menu in jQuery</H2>
<P>In this tutorial, you will learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for our websites.</P>
<DIV style="WIDTH: 430px" id=attachment_286 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/create-a-smooth-tabbed-menu-in-jquery/" rel="attachment wp-att-286"><IMG class="size-full wp-image-286" title="Create a smooth tabbed menu in jQuery" alt="" src="http://cdn.tutorialchip.com/wp-content/uploads/2010/12/Create-a-smooth-tabbed-menu-in-jQuery.jpg" width=420 height=219></A>
<P class=wp-caption-text>Create a smooth tabbed menu in jQuery</P></DIV>
<P><A href="http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/" target=_blank>View Tutorial</A> – <A href="http://yensdesign.com/tutorials/tabs/" target=_blank>View Demo</A></P>
<H2>17. Sweet AJAX Tabs with jQuery 1.4 & CSS3</H2>
<P>This tutorial is going to make an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.</P>
<DIV style="WIDTH: 530px" id=attachment_287 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/sweet-ajax-tabs-with-jquery/" rel="attachment wp-att-287"><IMG class="size-medium wp-image-287" title="Sweet AJAX Tabs With jQuery" alt="" src="http://cdn3.tutorialchip.com/wp-content/uploads/2010/12/Sweet-AJAX-Tabs-With-jQuery-520x385.png" width=520 height=385></A>
<P class=wp-caption-text>Sweet AJAX Tabs With jQuery</P></DIV>
<P><A href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/" target=_blank>View Tutorial</A> – <A href="http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.html" target=_blank>View Demo</A></P>
<H2>18. Flowplayer Tabs</H2>
<P>There are many other ways of using this tool than the demos provided above. Here is a generic form for constructing tabs.</P>
<DIV style="WIDTH: 530px" id=attachment_288 class="wp-caption aligncenter"><A href="http://www.tutorialchip.com/jquery/jquery-tabs-tutorial-18-exceptional-techniques/attachment/flowplayer-tabs/" rel="attachment wp-att-288"><IMG class="size-medium wp-image-288" title=Flowplayer-Tabs alt="" src="http://cdn4.tutorialchip.com/wp-content/uploads/2010/12/Flowplayer-Tabs-520x166.jpg" width=520 height=166></A>
<P class=wp-caption-text>Flowplayer Tabs</P></DIV>
<P><A href="http://flowplayer.org/tools/tabs/index.html" target=_blank>View Tutorial</A> – <A href="http://flowplayer.org/tools/demos/tabs/index.htm" target=_blank>View Demo</A></P></DIV>
</DIV>
<DIV class=post-meta><SPAN class=post-categories>Filed Under: <A title="View all posts in jQuery" href="http://www.tutorialchip.com/category/jquery/" rel="category tag">jQuery</A></SPAN> <SPAN class=post-tags>Tagged With: <A href="http://www.tutorialchip.com/tag/tabs/" rel=tag>tabs</A>, <A href="http://www.tutorialchip.com/tag/tutorial/" rel=tag>tutorial</A></SPAN> </DIV><p><strong><a href="http://blog1.phps.kr/422?commentInput=true#entry422WriteComment">댓글 쓰기</a></strong></p>jquery, radio buttonjava, tomcat, c#http://blog1.phps.kr/3662011-03-12T08:14:30+09:002011-03-12T08:14:27+09:00<P>Usage of Jquery is comparatively simple for input type text, button, file, reset etc. because these controls generally hold data but not state like on and off. Check box and radio buttons are two controls which are generally used for state data like option is on/off, one is selected from a group of options etc.</P>
<P>Using jquery is little but different here because you have to use little more that just ID selectors:</P>
<P><STRONG>Check Box: </STRONG></P><PRE class=html4strict>
<SPAN style="COLOR: #009900"><A href="http://december.com/html/4/element/input.html"><SPAN style="COLOR: #000000; FONT-WEIGHT: bold"><input</SPAN></A> <SPAN style="COLOR: #000066">type</SPAN>=<SPAN style="COLOR: #ff0000">"checkbox"</SPAN> <SPAN style="COLOR: #000066">name</SPAN>=<SPAN style="COLOR: #ff0000">"chkBox"</SPAN> <SPAN style="COLOR: #000066">id</SPAN>=<SPAN style="COLOR: #ff0000">"chkBox"</SPAN><SPAN style="COLOR: #000000; FONT-WEIGHT: bold">></SPAN></SPAN><SPAN style="COLOR: #009900"><SPAN style="COLOR: #000000; FONT-WEIGHT: bold"></input></SPAN></SPAN>
</PRE>
<P><EM>Handling click and Change Events :</EM></P><PRE class=javascript>
<SPAN style="FONT-STYLE: italic; COLOR: #009900">/* Using Name for selector */</SPAN>
$<SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #3366cc">"input[@name='chkBox']"</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>.<SPAN style="COLOR: #006600">click</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #003366; FONT-WEIGHT: bold">function</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #66cc66">)</SPAN><SPAN style="COLOR: #66cc66">{</SPAN>
<SPAN style="FONT-STYLE: italic; COLOR: #009900">// your code here </SPAN>
<SPAN style="COLOR: #66cc66">}</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>;
<SPAN style="FONT-STYLE: italic; COLOR: #009900">/* Using ID for selector */</SPAN>
$<SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #3366cc">"#chkBox"</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>.<SPAN style="COLOR: #006600">change</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #003366; FONT-WEIGHT: bold">function</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #66cc66">)</SPAN><SPAN style="COLOR: #66cc66">{</SPAN>
<SPAN style="FONT-STYLE: italic; COLOR: #009900">// your code here </SPAN>
<SPAN style="COLOR: #66cc66">}</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>;
</PRE>
<P><STRONG>Radio Button: </STRONG></P><PRE class=html4strict>
<SPAN style="COLOR: #009900"><A href="http://december.com/html/4/element/input.html"><SPAN style="COLOR: #000000; FONT-WEIGHT: bold"><input</SPAN></A> <SPAN style="COLOR: #000066">type</SPAN>=<SPAN style="COLOR: #ff0000">"radio"</SPAN> <SPAN style="COLOR: #000066">name</SPAN>=<SPAN style="COLOR: #ff0000">"rdio"</SPAN> <SPAN style="COLOR: #000066">value</SPAN>=<SPAN style="COLOR: #ff0000">"a"</SPAN> <SPAN style="COLOR: #000066">checked</SPAN>=<SPAN style="COLOR: #ff0000">"checked"</SPAN> /<SPAN style="COLOR: #000000; FONT-WEIGHT: bold">></SPAN></SPAN>
<SPAN style="COLOR: #009900"><A href="http://december.com/html/4/element/input.html"><SPAN style="COLOR: #000000; FONT-WEIGHT: bold"><input</SPAN></A> <SPAN style="COLOR: #000066">type</SPAN>=<SPAN style="COLOR: #ff0000">"radio"</SPAN> <SPAN style="COLOR: #000066">name</SPAN>=<SPAN style="COLOR: #ff0000">"rdio"</SPAN> <SPAN style="COLOR: #000066">value</SPAN>=<SPAN style="COLOR: #ff0000">"b"</SPAN> /<SPAN style="COLOR: #000000; FONT-WEIGHT: bold">></SPAN></SPAN>
<SPAN style="COLOR: #009900"><A href="http://december.com/html/4/element/input.html"><SPAN style="COLOR: #000000; FONT-WEIGHT: bold"><input</SPAN></A> <SPAN style="COLOR: #000066">type</SPAN>=<SPAN style="COLOR: #ff0000">"radio"</SPAN> <SPAN style="COLOR: #000066">name</SPAN>=<SPAN style="COLOR: #ff0000">"rdio"</SPAN> <SPAN style="COLOR: #000066">value</SPAN>=<SPAN style="COLOR: #ff0000">"c"</SPAN> /<SPAN style="COLOR: #000000; FONT-WEIGHT: bold">></SPAN></SPAN>
</PRE>
<P><EM>Handling change event for Radio buttons:</EM><BR>Click event can be handled similarly. ID can not be used here because Radio buttons are used for single selection from a group where all input fields of group should have same name.</P><PRE class=javascript>
$<SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #3366cc">"input[@name='rdio']"</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>.<SPAN style="COLOR: #006600">change</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #003366; FONT-WEIGHT: bold">function</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #66cc66">)</SPAN><SPAN style="COLOR: #66cc66">{</SPAN>
<SPAN style="COLOR: #000066; FONT-WEIGHT: bold">if</SPAN> <SPAN style="COLOR: #66cc66">(</SPAN>$<SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #3366cc">"input[@name='rdio']:checked"</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>.<SPAN style="COLOR: #006600">val</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #66cc66">)</SPAN> == <SPAN style="COLOR: #3366cc">'a'</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>
<SPAN style="FONT-STYLE: italic; COLOR: #009900">// Code for handling value 'a'</SPAN>
<SPAN style="COLOR: #000066; FONT-WEIGHT: bold">else</SPAN> <SPAN style="COLOR: #000066; FONT-WEIGHT: bold">if</SPAN> <SPAN style="COLOR: #66cc66">(</SPAN>$<SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #3366cc">"input[@name='rdio']:checked"</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>.<SPAN style="COLOR: #006600">val</SPAN><SPAN style="COLOR: #66cc66">(</SPAN><SPAN style="COLOR: #66cc66">)</SPAN> == <SPAN style="COLOR: #3366cc">'b'</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>
<SPAN style="FONT-STYLE: italic; COLOR: #009900">// Code for handling value 'b'</SPAN>
<SPAN style="COLOR: #000066; FONT-WEIGHT: bold">else</SPAN>
<SPAN style="FONT-STYLE: italic; COLOR: #009900">// Code for handling 'c'</SPAN>
<SPAN style="COLOR: #66cc66">}</SPAN><SPAN style="COLOR: #66cc66">)</SPAN>;<BR><BR>[원문] - <A href="http://www.techiegyan.com/2008/07/09/using-jquery-check-boxes-and-radio-buttons/">http://www.techiegyan.com/2008/07/09/using-jquery-check-boxes-and-radio-buttons/</A>
</PRE><p><strong><a href="http://blog1.phps.kr/366?commentInput=true#entry366WriteComment">댓글 쓰기</a></strong></p>jquery - image loadingjava, tomcat, c#http://blog1.phps.kr/3602011-02-24T22:02:25+09:002011-02-24T22:01:07+09:00<DIV id=tutorial class=tab>
<P><SPAN id=more-9>[원문] <A href="http://jqueryfordesigners.com/image-loading/">http://jqueryfordesigners.com/image-loading/</A><BR> <A href="http://translate.google.co.kr/translate?hl=ko&langpair=en%7Cko&u=http://jqueryfordesigners.com/image-loading/">http://translate.google.co.kr/translate?hl=ko&langpair=en%7Cko&u=http://jqueryfordesigners.com/image-loading/</A></SPAN></P>
<H2>Basic Version</H2>
<P>In our basic version, we will have a single <CODE><SPAN class=pln>div</SPAN></CODE> containing a <A href="http://jqueryfordesigners.com/images/spinner.gif"><INS>loading spinner</INS></A> and once our large image is loaded (in the background) we will remove the spinner and insert our image.</P>
<P>There’s a few ways to approach the loading screen, two of which are:</P>
<OL>
<LI>Use a background image on the holder <CODE><SPAN class=pln>div</SPAN></CODE>, this way we can easily centre align horizontally and vertically using CSS, rather than adding extra markup.</LI>
<LI>Adding a styled <CODE><SPAN class=pln>div</SPAN></CODE> in our holder <CODE><SPAN class=pln>div</SPAN></CODE>, then remove the entire block of markup when the image loads.</LI></OL>
<P>I’ve provided a screencast explaining how to achieve this (though it is based on the CSS version, also shows how to do this with a separate loading <CODE><SPAN class=pln>div</SPAN></CODE>).</P>
<P><A href="http://jqueryfordesigners.com/media/image-loading.mov"><INS>Watch the jQuery basic image load screencast</INS></A> (<A href="http://jqueryfordesigners.com/video.php?f=image-loading.flv"><INS>alternative flash version</INS></A>)</P>
<P><A href="http://jqueryfordesigners.com/demo/image-load-demo.php"><INS>View the demo and source code used in the screencast</INS></A></P>
<P>Note that in the demonstration as I am <STRONG>simulating</STRONG> loading a slow to load image by including a script tag at the bottom of the markup. In your real world version, you obviously would not include it.</P>
<H3>HTML Markup</H3>
<P>The markup (segment) that we’re using is extremely simple. Note, however, I’ve included a ‘loading’ class on the <CODE><SPAN class=pln>div</SPAN></CODE>. This will be manipulated in our jQuery once the image has loaded behind the scenes:</P><PRE><SPAN class=tag><div </SPAN><SPAN class=atn>id</SPAN><SPAN class=tag>=</SPAN><SPAN class=atv>"loader"</SPAN><SPAN class=tag> </SPAN><SPAN class=atn>class</SPAN><SPAN class=tag>=</SPAN><SPAN class=atv>"loading"</SPAN><SPAN class=tag>></div></SPAN></PRE>
<H3>CSS</H3>
<P>For the demo, I’ve set the height and width of the empty <CODE><SPAN class=pln>div</SPAN></CODE>, but also included a background image which indicates something is loading.</P>
<P>You can use any kind of image - I’ve seen applications use much larger animated gifs to simulate a loading message box.</P><PRE><CODE><SPAN class=pln>DIV</SPAN><SPAN class=com>#loader {</SPAN><SPAN class=pln><BR> border</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> </SPAN><SPAN class=lit>1px</SPAN><SPAN class=pln> solid </SPAN><SPAN class=com>#ccc;</SPAN><SPAN class=pln><BR> width</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> </SPAN><SPAN class=lit>500px</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR> height</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> </SPAN><SPAN class=lit>500px</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR><BR></SPAN><SPAN class=com>/** <BR> * While we're having the loading class set.<BR> * Removig it, will remove the loading message<BR> */</SPAN><SPAN class=pln><BR>DIV</SPAN><SPAN class=com>#loader.loading {</SPAN><SPAN class=pln><BR> background</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> url</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>images</SPAN><SPAN class=pun>/</SPAN><SPAN class=pln>spinner</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>gif</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> no</SPAN><SPAN class=pun>-</SPAN><SPAN class=pln>repeat center center</SPAN><SPAN class=pun>;</SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun>}</SPAN></CODE></PRE>
<H3>jQuery</H3>
<P>The jQuery’s job is to:</P>
<OL>
<LI>Load the image in the background</LI>
<LI>Hook a load event</LI>
<LI>Once the image has loaded, strip the loading class and insert the image</LI></OL><PRE><CODE><SPAN class=com>// when the DOM is ready</SPAN><SPAN class=pln><BR>$</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=kwd>var</SPAN><SPAN class=pln> img </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> </SPAN><SPAN class=kwd>new</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Image</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln><BR> <BR> </SPAN><SPAN class=com>// wrap our new image in jQuery, then:</SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>img</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// once the image has loaded, execute this code</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>load</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// set the image hidden by default </SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>this</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln><BR> <BR> </SPAN><SPAN class=com>// with the holding div #loader, apply:</SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'#loader'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// remove the loading class (so no background spinner), </SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>removeClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'loading'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// then insert our image</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>append</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>this</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> <BR> </SPAN><SPAN class=com>// fade our image in to create a nice effect</SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>this</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>fadeIn</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>})</SPAN><SPAN class=pln><BR> <BR> </SPAN><SPAN class=com>// if there was an error loading the image, react accordingly</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>error</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// notify the user that the image could not be loaded</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>})</SPAN><SPAN class=pln><BR> <BR> </SPAN><SPAN class=com>// *finally*, set the src attribute of the new image to our image</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>attr</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'src'</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln> </SPAN><SPAN class=str>'images/headshot.jpg'</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR></SPAN><SPAN class=pun>});</SPAN></CODE></PRE>
<H2>Added Functionality</H2>
<P>The jQuery code used is the constructs of our load function. If we wanted to style the image in any way, add classes or run an Ajax request before showing the image, it would go inside the <CODE><SPAN class=pun>.</SPAN><SPAN class=pln>load</SPAN><SPAN class=pun>()</SPAN></CODE> function.</P>
<P>This functionality could also be placed inside of a <CODE><SPAN class=pun>.</SPAN><SPAN class=pln>click</SPAN><SPAN class=pun>()</SPAN></CODE> event handler or anything else if you wanted to trigger the image loading.</P>
<P>For example, if you had a particular image <CODE><SPAN class=pln>map</SPAN></CODE> linked to this image that you wanted to request via Ajax the contents of the load function would be this:</P><PRE><CODE><SPAN class=pln>$</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>img</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>load</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>()</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>this</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln><BR> <BR> </SPAN><SPAN class=com>// our bespoke ajax hit that's required with the image</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// it will return the HTML for the <map> element and</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// linked <area> element.</SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>ajax</SPAN><SPAN class=pun>({</SPAN><SPAN class=pln><BR> url</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> </SPAN><SPAN class=str>'image-map.php'</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln><BR> data</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> </SPAN><SPAN class=str>'img='</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>+</SPAN><SPAN class=pln> i</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>src</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln> </SPAN><SPAN class=com>// the image url links up in our fake database</SPAN><SPAN class=pln><BR> dataType</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> </SPAN><SPAN class=str>'html'</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln><BR> success</SPAN><SPAN class=pun>:</SPAN><SPAN class=pln> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>html</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// because we're inside of the success function, we must refer</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// to the image as 'img' (defined originally), rather than 'this'</SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'#loader'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>removeClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'loading'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>append</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>img</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>append</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>html</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln><BR> <BR> </SPAN><SPAN class=com>// now show the image</SPAN><SPAN class=pln><BR> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>img</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>fadeIn</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>}</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>});</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=pun>})</SPAN><SPAN class=pln><BR> </SPAN><SPAN class=com>// code continues as before</SPAN></CODE></PRE>
<P class=follow>You should follow me on Twitter <A href="http://twitter.com/rem"><INS>here</INS></A> <SPAN class=note>I tweet about jQuery amongst the usual tweet-splurges!</SPAN></P>
<H2>Related screencasts</H2>
<OL class=relatedposts>
<LI><A title="Permanent Link: Image Fade Revisited" href="http://jqueryfordesigners.com/image-fade-revisited/" rel=bookmark><INS>Image Fade Revisited</INS></A> This episode is revisiting the image cross fade effect, in...</LI>
<LI><A title="Permanent Link: Image Cross Fade Transition" href="http://jqueryfordesigners.com/image-cross-fade-transition/" rel=bookmark><INS>Image Cross Fade Transition</INS></A> A frequent query and request I receive (and have myself)...</LI>
<LI><A title="Permanent Link: Ajax Spy" href="http://jqueryfordesigners.com/ajax-spy/" rel=bookmark><INS>Ajax Spy</INS></A> Last month I showed you how to create a spy...</LI>
<LI><A title="Permanent Link: Using Ajax to Validate Forms" href="http://jqueryfordesigners.com/using-ajax-to-validate-forms/" rel=bookmark><INS>Using Ajax to Validate Forms</INS></A> Forms are such a common element on the Internet we...</LI></OL></DIV><p><strong><a href="http://blog1.phps.kr/360?commentInput=true#entry360WriteComment">댓글 쓰기</a></strong></p>jquery, selectbox 관련java, tomcat, c#http://blog1.phps.kr/3522012-08-02T09:01:53+09:002011-01-25T09:41:51+09:00<P>[원문] : <A href="http://ultteky.egloos.com/10420749">http://ultteky.egloos.com/10420749</A><BR><BR>option 추가 하려면 <BR><SPAN class=kwd>var</SPAN><SPAN class=pln> list </SPAN><SPAN class=pun>=</SPAN><SPAN class=pln> $</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"#selectList"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln> <BR>$</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>each</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>items</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln> </SPAN><SPAN class=kwd>function</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>index</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln> item</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln> </SPAN><SPAN class=pun>{</SPAN><SPAN class=pln> <BR> list</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>append</SPAN><SPAN class=pun>(</SPAN><SPAN class=kwd>new</SPAN><SPAN class=pln> </SPAN><SPAN class=typ>Option</SPAN><SPAN class=pun>(</SPAN><SPAN class=pln>item</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>,</SPAN><SPAN class=pln> item</SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>value</SPAN><SPAN class=pun>));</SPAN><SPAN class=pln> <BR></SPAN><SPAN class=pun>});</SPAN><SPAN class=pln> <BR></SPAN><SPAN class=pln><BR><BR></SPAN><BR><BR><BR>jQuery로 선택된 값 읽기<BR>$("#select_box option:selected").val();<BR>$("select[name=name]").val();</P>
<P>jQuery로 선택된 내용 읽기<BR>$("#select_box option:selected").text();<BR><BR>선택된 위치<BR>var index = $("#test option").index($("#test option:selected")); <BR><BR>-------------------------------------------------------------------</P>
<P style="TEXT-ALIGN: left; MARGIN: 0cm 0cm 0pt; WORD-BREAK: keep-all; mso-layout-grid-align: none" class=MsoNormal align=left><SPAN style="FONT-FAMILY: 돋움체; mso-bidi-font-size: 10.0pt; mso-bidi-font-family: 'Times New Roman'; mso-font-kerning: 0pt; mso-no-proof: yes; mso-hansi-font-family: 'Times New Roman'" lang=EN-US><SPAN style="FONT-SIZE: 100%">
<DIV class=autosourcing-stub>
</DIV><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />// Add options to the end of a select<BR>$("#myselect").append("<option value='1'>Apples</option>");<BR>$("#myselect").append("<option value='2'>After Apples</option>");<BR><BR>// Add options to the start of a select<BR>$("#myselect").prepend("<option value='0'>Before Apples</option>");<BR><BR>// Replace all the options with new options<BR>$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");<BR><BR>// Replace items at a certain index<BR>$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");<BR>$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");<BR><BR>// Set the element at index 2 to be selected<BR>$("#myselect option:eq(2)").attr("selected", "selected");<BR><BR>// Set the selected element by text<BR>$("#myselect").val("Some oranges").attr("selected", "selected");<BR><BR>// Set the selected element by value<BR>$("#myselect").val("2");<BR><BR>// Remove an item at a particular index<BR>$("#myselect option:eq(0)").remove();<BR><BR>// Remove first item<BR>$("#myselect option:first").remove();<BR><BR>// Remove last item<BR>$("#myselect option:last").remove();<BR><BR>// Get the text of the selected item<BR>alert($("#myselect option:selected").text());<BR><BR>// Get the value of the selected item<BR>alert($("#myselect option:selected").val());<BR><BR>// Get the index of the selected item<BR>alert($("#myselect option").index($("#myselect option:selected")));<BR><BR>// Alternative way to get the selected item<BR>alert($("#myselect option:selected").prevAll().size());<BR><BR>// Insert an item in after a particular position<BR>$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");<BR><BR>// Insert an item in before a particular position<BR>$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");<BR><BR>// Getting values when item is selected<BR>$("#myselect").change(function() {<BR>alert($(this).val());<BR>alert($(this).children("option:selected").text());<BR>});<BR></SPAN></SPAN><p><strong><a href="http://blog1.phps.kr/352?commentInput=true#entry352WriteComment">댓글 쓰기</a></strong></p>jquery, mouseover/outjava, tomcat, c#http://blog1.phps.kr/3502011-01-25T02:43:54+09:002011-01-25T02:43:50+09:00[출처] - <A href="http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/">http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/</A><BR><BR>
<P>Just a simple script I use to automate image rollovers that may be of use to others. Just include this javascript:</P>
<HR>
<DIV style="BORDER-BOTTOM: #ccc 1px dashed; BORDER-LEFT: #ccc 1px dashed; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px dashed; BORDER-RIGHT: #ccc 1px dashed; PADDING-TOP: 5px"><STRONG>UPDATED</STRONG>
<P>I felt motivated to simplify this even more according to many of the comments below. This takes advantage of html5 data attributes instead of a custom one, and eliminates the need for a special hover css class. It also eliminates the need for a temporary variable to store the current image in by using a ‘tmp’ attribute, and then removing it when finished. It also preloads the images for the rollover.</P>
<DIV>
<DIV id=highlighter_524201 class="syntaxhighlighter nogutter jscript ie ">
<TABLE border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=code>
<DIV class=container>
<DIV class="line number1 index0 alt2"><CODE class="jscript plain">$(</CODE><CODE class="jscript keyword">function</CODE><CODE class="jscript plain">() { </CODE></DIV>
<DIV class="line number2 index1 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript string">'img[data-hover]'</CODE><CODE class="jscript plain">).hover(</CODE><CODE class="jscript keyword">function</CODE><CODE class="jscript plain">() { </CODE></DIV>
<DIV class="line number3 index2 alt2"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'tmp'</CODE><CODE class="jscript plain">, $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'src'</CODE><CODE class="jscript plain">)).attr(</CODE><CODE class="jscript string">'src'</CODE><CODE class="jscript plain">, $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'data-hover'</CODE><CODE class="jscript plain">)).attr(</CODE><CODE class="jscript string">'data-hover'</CODE><CODE class="jscript plain">, $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'tmp'</CODE><CODE class="jscript plain">)).removeAttr(</CODE><CODE class="jscript string">'tmp'</CODE><CODE class="jscript plain">); </CODE></DIV>
<DIV class="line number4 index3 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">}).each(</CODE><CODE class="jscript keyword">function</CODE><CODE class="jscript plain">() { </CODE></DIV>
<DIV class="line number5 index4 alt2"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript string">'<img />'</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'src'</CODE><CODE class="jscript plain">, $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'data-hover'</CODE><CODE class="jscript plain">)); </CODE></DIV>
<DIV class="line number6 index5 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">});; </CODE></DIV>
<DIV class="line number7 index6 alt2"><CODE class="jscript plain">});</CODE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></DIV>
<P>This should be used with an img element as follows:</P>
<DIV>
<DIV id=highlighter_783129 class="syntaxhighlighter nogutter xml ie">
<TABLE border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=code>
<DIV class=container>
<DIV class="line number1 index0 alt2"><CODE class="xml plain"><</CODE><CODE class="xml keyword">img</CODE> <CODE class="xml color1">src</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"first.gif"</CODE> <CODE class="xml color1">data-hover</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"second.gif"</CODE> <CODE class="xml plain">/></CODE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></DIV></DIV>
<HR>
Original code
<DIV>
<DIV id=highlighter_487108 class="syntaxhighlighter nogutter jscript ie ">
<TABLE border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=code>
<DIV class=container>
<DIV class="line number1 index0 alt2"><CODE class="jscript plain">$(</CODE><CODE class="jscript keyword">function</CODE><CODE class="jscript plain">() { </CODE></DIV>
<DIV class="line number2 index1 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript string">'.rollover'</CODE><CODE class="jscript plain">).hover(</CODE><CODE class="jscript keyword">function</CODE><CODE class="jscript plain">() { </CODE></DIV>
<DIV class="line number3 index2 alt2"><CODE class="jscript spaces"> </CODE><CODE class="jscript keyword">var</CODE> <CODE class="jscript plain">currentImg = $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'src'</CODE><CODE class="jscript plain">); </CODE></DIV>
<DIV class="line number4 index3 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'src'</CODE><CODE class="jscript plain">, $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'hover'</CODE><CODE class="jscript plain">)); </CODE></DIV>
<DIV class="line number5 index4 alt2"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'hover'</CODE><CODE class="jscript plain">, currentImg); </CODE></DIV>
<DIV class="line number6 index5 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">}, </CODE><CODE class="jscript keyword">function</CODE><CODE class="jscript plain">() { </CODE></DIV>
<DIV class="line number7 index6 alt2"><CODE class="jscript spaces"> </CODE><CODE class="jscript keyword">var</CODE> <CODE class="jscript plain">currentImg = $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'src'</CODE><CODE class="jscript plain">); </CODE></DIV>
<DIV class="line number8 index7 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'src'</CODE><CODE class="jscript plain">, $(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'hover'</CODE><CODE class="jscript plain">)); </CODE></DIV>
<DIV class="line number9 index8 alt2"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">$(</CODE><CODE class="jscript keyword">this</CODE><CODE class="jscript plain">).attr(</CODE><CODE class="jscript string">'hover'</CODE><CODE class="jscript plain">, currentImg); </CODE></DIV>
<DIV class="line number10 index9 alt1"><CODE class="jscript spaces"> </CODE><CODE class="jscript plain">}); </CODE></DIV>
<DIV class="line number11 index10 alt2"><CODE class="jscript plain">});</CODE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></DIV>
<P>This will pick up an image that looks as follows, and setup the rollover image:</P>
<DIV>
<DIV id=highlighter_718141 class="syntaxhighlighter nogutter xml ie">
<TABLE border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=code>
<DIV class=container>
<DIV class="line number1 index0 alt2"><CODE class="xml plain"><</CODE><CODE class="xml keyword">img</CODE> <CODE class="xml color1">src</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"first.gif"</CODE> <CODE class="xml color1">hover</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"second.gif"</CODE> <CODE class="xml color1">class</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"rollover"</CODE><CODE class="xml plain">/></CODE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></DIV><p><strong><a href="http://blog1.phps.kr/350?commentInput=true#entry350WriteComment">댓글 쓰기</a></strong></p>jquery , 윈도우가 처음으로 로딩되었을때. onloadjava, tomcat, c#http://blog1.phps.kr/3442010-12-27T12:43:35+09:002010-12-27T12:43:22+09:00jQuery(window).ready(function() { <BR> todo<BR>});<p><strong><a href="http://blog1.phps.kr/344?commentInput=true#entry344WriteComment">댓글 쓰기</a></strong></p>jquery 기본 사용방법java, tomcat, c#http://blog1.phps.kr/3402010-12-02T11:27:13+09:002010-12-02T11:27:10+09:00<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">[출처] - <A href="http://blog.naearu.com/2983060">http://blog.naearu.com/2983060</A><BR><BR>JQuery 사용해보기.</SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 JQuery를 사용해보자.</SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있다.</SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><STRONG>해당 엘리먼트 접근하기</STRONG></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">일반 : </SPAN></SPAN></SPAN><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">document.getElementById("id");</SPAN></SPAN></SPAN></P>
<P>JQuery : $("#id"); </P>
<P> - 엘리먼트의 ID 접근시 #, class 접근시 .</P>
<br />
<P><STRONG>해당 엘리먼트의 값 접근하기</STRONG></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">일반 : <SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">document.getElementById("id").value;</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">JQuery : $("#id").val();</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> - 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"></SPAN></SPAN></SPAN></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><STRONG>해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드</STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">일반 : <SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">document.getElementById("id").checked;</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">JQuery : <SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">$("#id").is(':checked');</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> - 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> - <SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">$("#id").is(".orange, .blue, lightblue"); id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><STRONG>해당 엘리먼트의 CSS 속성 부여하기</STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">일반 : <SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">document.getElementById("id").style.border = "4px solid yellow");</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">JQuery : $("#id").css("border", "4px solid yellow");</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> - 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><STRONG>해당 엘리먼트의 display 속성 부여하기</STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">일반 : <SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">document.getElementById("id").style.display = "none";</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">JQuery : $("#id").hide(); , $("#id").show();</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> - hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다.</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> - 아니면 수치로 1000분의 1초로 할 수 있음. show(950)</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><STRONG>체크박스의 전체선택 / 해제</STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">일반</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">function selectAll() {<BR> var blnChecked = document.getElementById("allCheck").checked; // 전체선택 체크박스의 상태<BR> checkBoxes = document.getElementsByName('delCheck'); // 태그이름중 delCheck인 엘리먼트를 배열로 얻음</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> for(var i=0; i<checkBoxes.length; i++) {<BR> objCheck = checkBoxes[i];<BR> if (objCheck) {<BR> objCheck.checked = blnChecked;<BR> }<BR> }<BR>}</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">JQuery</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">$(document).ready(function() { <BR> $('#allCheck').click(function() { // 전체선택 체크박스 선택 이벤트<BR> if($('#allCheck').is(':checked')){ // 전체선택 체크박스 체크상태<BR> $('.delCheck').each(function(){ // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴<BR> $(this).attr('checked', 'checked'); // 가져온 체크박스를 checked<BR> });<BR> }else{ // 전체선택 체크박스 미체크상태<BR> $('.delCheck').each(function(){<BR> $(this).attr('checked',''); // 가져온 체크박스를 미체크상태로<BR> });<BR> }<BR> }); <BR>});</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN> </P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><STRONG>엘리먼트의 존재여부를 체크하기</STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움">JQuery : if($("#id").length > 0) </SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<P><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 굴림"><SPAN style="FONT-FAMILY: 돋움"><SPAN style="FONT-FAMILY: 돋움"> - 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 체크해서 존재여부를 체크한다</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P><p><strong><a href="http://blog1.phps.kr/340?commentInput=true#entry340WriteComment">댓글 쓰기</a></strong></p>