검색결과 리스트
jQuery에 해당되는 글 10건
- 2012.04.26 jQuery 마우스 롤오버 이미지 기능과 메뉴 활성화 및 필요없는 메뉴 지우기 1
- 2012.04.26 jQuery를 이용한 메인 공지 에니메이션
- 2012.04.20 jQuery 레이어 창 만들기
- 2012.04.19 jquery 정규식 표현 문자 검색 등
- 2012.03.15 jquery json IE, Opera 등 parse error 발생 할때
글
jQuery 마우스 롤오버 이미지 기능과 메뉴 활성화 및 필요없는 메뉴 지우기
jQuery 마우스 롤오버 이미지 기능과
메뉴 활성화 및
필요없는 메뉴 감추기[hidden]
이젠 쉽게 메뉴 롤오버를 적용 시키세요
메뉴 뿐 아니라 탭메뉴 적용에도 탁월한 기능을 보입니다.
브라우저 테스트 : 익스[6,7,8,9], 파이어폭스, 사파리, 오페라, 크롬, 안드로이드, 아이폰, 탭, 아이패드
#@ HTML
< nav id="Nav1"> < a href="#" title="메뉴1">< img src="./img/tab_a_01_off.gif" /> < a href="#" title="메뉴2">< img src="./img/tab_a_02_off.gif" /> < a href="#" title="메뉴3">< img src="./img/tab_a_06_off.gif" /> < a href="#" title="메뉴4">< img src="./img/tab_a_03_off.gif" /> < div class="sub_menu4"> < a href="#" title="메뉴4 서브메뉴1">< img src="./img/tab_b_01_off.gif"> < a href="#" title="메뉴4 서브메뉴2">< img src="./img/tab_b_02_off.gif"> < a href="#" title="메뉴4 서브메뉴3">< img src="./img/tab_b_03_off.gif"> < /div> < a href="#" title="메뉴5">< img src="./img/tab_a_04_off.gif" /> < /nav>
<@# 사용법>
1. 1차 메뉴에 롤오버 기능 적용 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴1] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':'','remove':''}); }); < /script>
2. 1차 메뉴 롤오버 기능 및 "메뉴1번" 활성화 적용 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴1] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':0,'remove':''}); // 1차 메뉴 4번의 2차 메뉴 비활성화 $('.hover').fusionNavi({'element':'.sub_menu4','current':'','remove':''}); }); < /script>
3. 1차 "메뉴4번" 활성화 2차 "메뉴1번" 활성화 적용 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴4] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':3,'remove':''}); // 1차 메뉴 4번의 2차 메뉴 1번 활성화 $('.hover').fusionNavi({'element':'.sub_menu4','current':0,'remove':''}); }); < /script>
4. 1차 "메뉴5번" 메뉴 감추기(hidden) 방법
< script type="text/javascript" src="hover.js" >< /script> < script type="text/javascript"> $(document).ready(function() { // 1차 메뉴중 [메뉴1] 활성화 시키기 $('.hover').fusionNavi({'element':'#NavI1','current':0,'remove':4}); // 1차 메뉴 4번의 2차 메뉴 비활성화 $('.hover').fusionNavi({'element':'.sub_menu4','current':'','remove':''}); }); < /script>
@# 간단 설명
$('.hover').fusionNavi({'element':'[#아이디명 || .class명]', // 특정 "#아이디" 또는 ".클래스" 밑에 있는 <a 태그로 감싸인 <img 태그에 적용
'current':'[ 3 || null ]', // 적용 순번 및 비활성화 [ 0 부터 시작 || 비활성화]
remove':'[ 4 || null ]' // 감추고 싶은 메뉴 [ 0 부터 시작 || 비활성화]
});
#@ script 소스 /======================================================
jQuery(function($) { $.fn.fusionNavi= function(params) { var targetID = params['element']; //적용위치 var current_position = params['current']; //현재활성화 메뉴 순번 var remove_position = params['remove']; //메뉴 감추기(hidden) 메뉴 순번 // 현재 메뉴 제외, 나머지에 class="hover" $(targetID+' > a img').addClass('hover'); // 메뉴 감추기(hidden) try{ $(targetID+' > a:eq('+remove_position+') img').remove(); }catch(e){} // 현재 메뉴 활성화 try{ if(current_position || current_position=="0"){ var hoverOnCur = $(targetID+' > a img').eq(current_position).attr('src').replace('_off','_on'); $(targetID+' > a img').eq(current_position).attr('src', hoverOnCur); $(targetID+' > a img').eq(current_position).removeClass('hover'); } }catch(e){} // on $(targetID+' > a img.hover').mouseenter(function(){ var hoverOn = $(this).attr('src').replace('_off','_on'); $(this).attr('src', hoverOn); }); // off $(targetID+' > a img.hover').mouseleave(function(){ var hoverOff = $(this).attr('src').replace('_on','_off'); $(this).attr('src', hoverOff); }); } });
'js API > jquery' 카테고리의 다른 글
jQuery select 셀렉트 메뉴 onchange 이벤트 (0) | 2012.04.29 |
---|---|
jQuery 특정 자바스크립트 로딩 후 실행 하기(동적 스크립트 로딩 및 액션) (0) | 2012.04.27 |
jQuery를 이용한 메인 공지 에니메이션 (0) | 2012.04.26 |
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |
설정
트랙백
댓글
글
jQuery를 이용한 메인 공지 에니메이션
jQuery 메인에 위로 흐르는 공지글 에니메이션
#@ css /===================================
< style > #scrollup { position: relative; overflow: hidden; height: 20px; width: 200px } .headline { position: absolute; top: 190px; left: 5px; height: 25px; width:190px; } < /style >
#@ HTML /===================================
< div id="scrollup" > < div class="headline">공지글 1 < div class="headline">공지글 2 < div class="headline">공지글 3 < /div >
#@ SCRIPT /=================================
< script type="text/javascript" > var headline_count; var headline_interval; var old_headline = 0; var current_headline = 0; var headline_top = 0; jQuery(function($) { $.fn.scrollup= function(params) { var targetID = $(this); var param = $.extend({ delaytime : 3000, top:0 },params||{}); headline =param.top; headline_count = $("div.headline").size(); $("div.headline:eq("+current_headline+")").css('top',headline+'px'); headline_interval = setInterval(headline_rotate,param.delaytime); //time in milliseconds $(targetID).hover(function() { clearInterval(headline_interval); }, function() { headline_interval = setInterval(headline_rotate,param.delaytime); //time in milliseconds headline_rotate(); }); } }); function headline_rotate() { current_headline = (old_headline + 1) % headline_count; $("div.headline:eq(" + old_headline + ")").animate({top: -25},"slow", function() { $(this).css('top','210px'); }); $("div.headline:eq(" + current_headline + ")").show().animate({top: headline},"slow"); old_headline = current_headline; } $('#scrollup').scrollup(); < /script >
#@ jquery 데모 주소 /=======================================
http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader#Demo
'js API > jquery' 카테고리의 다른 글
jQuery 특정 자바스크립트 로딩 후 실행 하기(동적 스크립트 로딩 및 액션) (0) | 2012.04.27 |
---|---|
jQuery 마우스 롤오버 이미지 기능과 메뉴 활성화 및 필요없는 메뉴 지우기 (1) | 2012.04.26 |
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |
체크박스 checkbox 체크 된 목록 값만 가져오기 (2) | 2012.04.18 |
설정
트랙백
댓글
글
jQuery 레이어 창 만들기
jQuery를 이용해
레이어로 창을 만듭니다.
스크롤이 될때마다 브라우저 창 사이즈가 변할때 마다 그 위치를 자동으로
잡아 줍니다.
css 만 원하는 방식으로 바꾸시면 됩니다.
소스는 다음과 같습니다.
< style > #mask {position:absolute;left:0;top:0;z-index:900;background-color:#000;display:none;} #dialog {position:absolute;left:0;top:0;display:none;z-index:901;} < /style > // html < div id="dialog"> 디자인된 내용은 이쪽에 정적 또는 동적으로 넣으심 됩니다. < /div> < div id="mask" onclick="close_layer_window(); return false;">< /div> < script > var is_mask_run =false; // 창 리사이즈할때 마다 갱신 $(window).resize(function () { if(is_mask_run){ modal_window(); } }); // 스크롤할때마다 위치 갱신 $(window).scroll(function () { if(is_mask_run){ modal_window(); } }); //마스크 배경 클릭시 창 닫기 $('#mask').click(function () { $(this).hide(); $('#dialog').hide(); is_mask_run =false; }); /*레이어 윈도우창 닫기*/ function close_layer_window(){ $('#mask').hide(); $('#dialog').hide(); is_mask_run= false; } // 창 사이즈 설정 function modal_window() { // 활성화 is_mask_run = true; // 마스크 사이즈 var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); // 마스크 effect $('#mask').fadeTo("slow",0.8); // 윈도우 화면 사이즈 구하기 var winH = $(window).height(); var winW = $(window).width(); // 스크롤 높이 구하기 var _y =(window.pageYOffset) ? window.pageYOffset : (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : (document.body) ? document.body.scrollTop : 0; if(_y<1){ var h = winH/2; }else{ var h = winH/2+_y; } // dialog창 리사이즈 var dial_width =$('#dialog').width(); var dial_height = $('#dialog').height(); $('#dialog').css({'width':dial_width,'height':dial_height}); $('#dialog').css('top', h-dial_height/2); $('#dialog').css('left', winW/2-dial_width/2); // dialog창 effect $('#dialog').fadeIn(2000); } < /script >
'js API > jquery' 카테고리의 다른 글
jQuery 마우스 롤오버 이미지 기능과 메뉴 활성화 및 필요없는 메뉴 지우기 (1) | 2012.04.26 |
---|---|
jQuery를 이용한 메인 공지 에니메이션 (0) | 2012.04.26 |
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |
체크박스 checkbox 체크 된 목록 값만 가져오기 (2) | 2012.04.18 |
jquery 활용 js 파일 include 하기 (1) | 2012.04.03 |
설정
트랙백
댓글
글
jquery 정규식 표현 문자 검색 등
< a href="example.html" hreflang="en" >Some text< /a> < a href="example.html" hreflang="en-UK">Some other text< /a> < a href="example.html" hreflang="english">will not be outlined< /a> < script > $('a[hreflang|="en"]').css('border','3px dotted green'); < /script >// 결과 Some text, Some other text 에만 css가 적용됨
< input name="man-news"> < input name="milkman"> < input name="letterman2"> < input name="newmilk"> < script > $('input[name*="man"]').val('has man in it!'); < /script >// 결과 man-news,milkman,letterman2 만 검색됨
< input name="man-news"> < input name="milk man"> < input name="letterman2"> < input name="newmilk"> < script > $('input[name~="man"]').val('mr. man is in it!'); < /script >// 결과 milk man
< input name="newsletter"> < input name="milkman"> < input name="jobletter"> < script > $('input[name$="letter"]').val('a letter'); < /script >// 결과 newsletter,jobletter
< input type="radio" name="newsletter" value="Hot Fuzz"> < input type="radio" value="Cold Fusion"> < input type="radio" name="accept" value="Evil Plans"> < script > $('input[name!="newsletter"]').val()); < /script >// 결과 Hot Fuzz
< input type="radio" name="newsletter" value="Hot Fuzz"> < input type="radio" value="Cold Fusion"> < input type="radio" name="accept" value="Evil Plans"> < script > $('input[name!="newsletter"]').val()); < /script >// 결과 Cold Fusion, Evil Plans
< input type="radio" name="newsletter" value="Hot Fuzz"> < input type="radio" name="newslog" value="Cold Fusion"> < input type="radio" name="accept" value="Evil Plans"> < script > $('input[name!="news"]'); < /script >// 결과 newsletter, newslog
'js API > jquery' 카테고리의 다른 글
jQuery를 이용한 메인 공지 에니메이션 (0) | 2012.04.26 |
---|---|
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
체크박스 checkbox 체크 된 목록 값만 가져오기 (2) | 2012.04.18 |
jquery 활용 js 파일 include 하기 (1) | 2012.04.03 |
jquery를 활용한 select 메뉴 컨트롤 메니저 (0) | 2012.03.29 |
설정
트랙백
댓글
글
jquery json IE, Opera 등 parse error 발생 할때
그런데 dataType : 'json' 으로 ajax 통신을 할때
크롬을 제외한 IE 등에서 parse error 를 발생합니다.
정말 난감할 뿐만 아니라 어처구니가 없는거죠
jquery 가 잘 만들어 졌지만 브라우저 마다 처리 방법들이 조금씩 다르다 보니
모두 호환 되도록 하는 방법 밖에 없는 것 같습니다.
그리하여 해결 방법은 이렇습니다.
@ Javascript /=====================================
< script > function jsonAjax(uid) { $.ajax({ type: "post", url: "./test_json.php", cache: false, dataType :'text', data: {'uid':uid}, success: function(data, status){ var json = eval("(" + data + ")"); // OR var json =$.parseJSON(data); if(typeof(json.result) != 'undefined') { if(json.result != ''){ alert(json.result); }else{ $("#list_loop").empty(); //초기화 $.each(json.msg, function(key,state) { $("#list_loop").append(''+state["userid"]+' ('+state["name"]+')'); }); } } }, error: onError }); return false; } function onError(data, status, errorThrown){ alert(data.responseText+' '+status+' '+errorThrown); } < /script >
@ PHP /============================================
<?php # 회원정보 루프 배열 값 $loop[0] = array( 'userid' => 'test1id', 'name' => '홍길동' ); $loop[1] = array( 'userid' => 'test1id', 'name' => '홍길동' ); # json 최종결과 $args = array( 'result' => 'ok', 'msg' => $loop ); echo json_endcode($args); exit; ?>
@ HTML /===========================================
< div id="list_loop"> 여기에 내용 결과 출력 < /div >
1. jquery를 이용한 ajax 통신을 할때 dataType 를 text 로 합니다.
2. text 값으로 받은 값을 eval 를 통해 json 데이타로 변환 한다.
'js API > jquery' 카테고리의 다른 글
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
---|---|
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |
체크박스 checkbox 체크 된 목록 값만 가져오기 (2) | 2012.04.18 |
jquery 활용 js 파일 include 하기 (1) | 2012.04.03 |
jquery를 활용한 select 메뉴 컨트롤 메니저 (0) | 2012.03.29 |