검색결과 리스트
js API/jquery에 해당되는 글 16건
- 2012.04.20 jQuery 레이어 창 만들기
- 2012.04.19 jquery 정규식 표현 문자 검색 등
- 2012.04.18 체크박스 checkbox 체크 된 목록 값만 가져오기 2
- 2012.04.03 jquery 활용 js 파일 include 하기 1
- 2012.03.29 jquery를 활용한 select 메뉴 컨트롤 메니저
글
jQuery 레이어 창 만들기
js API/jquery
2012. 4. 20. 17:24
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 정규식 표현 문자 검색 등
js API/jquery
2012. 4. 19. 10:52
@ value 문자와 일치하되 연속된 글로 연결되지 않은 문자를 찾을 때
1. Attribute Contains Prefix Selector [name|="value"]
< 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가 적용됨
@ value에 해당하는 문자가 앞,뒤,중간 중 어디에 있어도 상관없이 찾을 때
2. Attribute Contains Selector [name*="value"]
< 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 만 검색됨
@ value에 해당하는 문자가 뒤(끝)에 존재하는 것을 찾을 때
3. Attribute Contains Word Selector [name~="value"]
< 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
@ value에 해당하는 문자가 뒤(끝)에 존재하는 것을 찾을 때
4. Attribute Ends With Selector [name$="value"]
< input name="newsletter"> < input name="milkman"> < input name="jobletter"> < script > $('input[name$="letter"]').val('a letter'); < /script >// 결과 newsletter,jobletter
@ value에 해당하는 문자 일치하는 것을 찾을 때
5. Attribute Equals Selector [name="value"]
< 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
@ value에 해당하는 문자 일치하지 않는 것을 찾을 때
6. Attribute Not Equal Selector [name!="value"]
< 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
@ value로 시작하는 문자를 찾을 때
7. Attribute Starts With Selector [name^="value"]
< 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
@ 여러개를 동시에 검색할때
8. Multiple Attribute Selector [name="value"][name2="value2"]
'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 |
설정
트랙백
댓글
글
체크박스 checkbox 체크 된 목록 값만 가져오기
js API/jquery
2012. 4. 18. 17:37
jQuery를 이용해 특정 name 의 checkbox 중 체크된 값만 추출하기
특정 <li> 에 class="checkbox" 라는 클래스 명에 속에 있는 체크박스중
checkbox name="ads_com[]" 인것만 불러오기 하려는 목적입니당
# HTML /=========================
# 자바스크립트 /=============================
< script > var com_uid_checkbox = ''; $("li.checkbox input:checkbox[name^=ads_com]:checked").each(function(){ com_uid_checkbox+=','+$(this).val(); }); alert(com_uid_checkbox ); < /script >
# 결과
2,15
'js API > jquery' 카테고리의 다른 글
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
---|---|
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |
jquery 활용 js 파일 include 하기 (1) | 2012.04.03 |
jquery를 활용한 select 메뉴 컨트롤 메니저 (0) | 2012.03.29 |
jquery json IE, Opera 등 parse error 발생 할때 (0) | 2012.03.15 |
설정
트랙백
댓글
글
jquery 활용 js 파일 include 하기
js API/jquery
2012. 4. 3. 15:55
jquery 활용 js 파일 include 하기
jquery를 이용해 js 파일들을 인클루드 하는 플러그인을 소개할까 합니다.
정말 유용한데요
먼저 include 해야할 js 파일을 한 후
순차적으로 js 파일을 인클루드 할 수 있도록 되어있습니다.
물론 jQuery 를 활용하기 때문에 jQuery는 먼저 불어 와 있어야 하겠죠? ^^
1. 기본환경설정
< script src="/common/js/jquery-1.7.1.min.js" >< /script > < script src="/common/js/jquery.extended.js" >< /script >
2. 사용법
# 방법 1 /========================= $.include( 'js/my.js', // my.js 로딩 후 my1.js 를 로딩함 $.include('js/my1.js') ); # 방법 2 /============================== $.include('js/my.js', // my.js를 먼저 로딩 후 my1.js, my2.js 를 불러 들입니다. [ $.include('js/src/my1.js'), $.include('js/src/my2.js') ] );
@ jquery.extended.js 소스 /================
/** * $.include - script inclusion jQuery plugin * Based on idea from http://www.gnucitizen.org/projects/jquery-include/ * @author Tobiasz Cudnik * @link http://meta20.net/.include_script_inclusion_jQuery_plugin * @license MIT */ // overload jquery's onDomReady if ( jQuery.browser.mozilla || jQuery.browser.opera ) { document.removeEventListener( "DOMContentLoaded", jQuery.ready, false ); document.addEventListener( "DOMContentLoaded", function(){ jQuery.ready(); }, false ); } jQuery.event.remove( window, "load", jQuery.ready ); jQuery.event.add( window, "load", function(){ jQuery.ready(); } ); jQuery.extend({ includeStates: {}, include: function(url, callback, dependency){ if ( typeof callback != 'function' && ! dependency ) { dependency = callback; callback = null; } url = url.replace('\n', ''); jQuery.includeStates[url] = false; var script = document.createElement('script'); script.type = 'text/javascript'; script.onload = function () { jQuery.includeStates[url] = true; if ( callback ) callback.call(script); }; script.onreadystatechange = function () { if ( this.readyState != "complete" && this.readyState != "loaded" ) return; jQuery.includeStates[url] = true; if ( callback ) callback.call(script); }; script.src = url; if ( dependency ) { if ( dependency.constructor != Array ) dependency = [dependency]; setTimeout(function(){ var valid = true; $.each(dependency, function(k, v){ if (! v() ) { valid = false; return false; } }) if ( valid ) document.getElementsByTagName('head')[0].appendChild(script); else setTimeout(arguments.callee, 10); }, 10); } else document.getElementsByTagName('head')[0].appendChild(script); return function(){ return jQuery.includeStates[url]; } }, readyOld: jQuery.ready, ready: function () { if (jQuery.isReady) return; imReady = true; $.each(jQuery.includeStates, function(url, state) { if (! state) return imReady = false; }); if (imReady) { jQuery.readyOld.apply(jQuery, arguments); } else { setTimeout(arguments.callee, 10); } } });
'js API > jquery' 카테고리의 다른 글
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
---|---|
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |
체크박스 checkbox 체크 된 목록 값만 가져오기 (2) | 2012.04.18 |
jquery를 활용한 select 메뉴 컨트롤 메니저 (0) | 2012.03.29 |
jquery json IE, Opera 등 parse error 발생 할때 (0) | 2012.03.15 |
설정
트랙백
댓글
글
jquery를 활용한 select 메뉴 컨트롤 메니저
js API/jquery
2012. 3. 29. 17:51
jquery 를 이용해 SELECT 메뉴를 손쉽게 컨트롤 해보자
좋은 소스를 만들어 주신 분께 먼저 감사합니다.
참 좋은 소스 인데요.
익스7, 8, 9, 오페라, 파이어폭스, 크롬, 사파리 에서 테스트 해 보았습니다.
다 잘 되더군요 역시 익스6은 안되는듯 ...
익스6은 버렸음 좋겠다 얼릉 사라졌음 하는 바램뿐
일단 jQuery 를 기반으로 만들어 졌기 때문에
jquery를 포함하고 있어야 합니다.
말보다 소스를 보시고
소스를 긁어다 테스트 해 보심이 더 빠를겁니다.
@ 자바 스크립트 /==========================================================
< script src="http://code.jquery.com/jquery.min.js" type="text/javascript"> < script type="text/javascript" > var receiverMan = { itemList: null, // select option baseOption: { itemListSelector : 'select#itemList' }, init: function(pOption) { this.baseOption = $.extend(this.baseOption, pOption); this.itemList = $(this.baseOption.itemListSelector); }, selectedOptions: function() { return this.itemList.find("option:selected"); } , add: function(data) { this.itemList.append($("").attr("value", data.value).text(data.text)); } , del: function() { // del selected all this.selectedOptions().remove(); } , clear: function() { // del all items this.itemList.find("option").remove(); } , up: function() { var selectedOptions = this.selectedOptions(); var prev = $(selectedOptions).first().prev(); $(selectedOptions).insertBefore(prev); } , dn: function() { var selectedOptions = this.selectedOptions(); var next = $(selectedOptions).last().next(); $(selectedOptions).insertAfter(next); } , selectedOne: function() { // return selected first item return { value: this.selectedOptions().first().attr("value"), text: this.selectedOptions().first().text() } } , selectedAll: function() { // return all selected item var r = []; this.selectedOptions().each(function(idx, data) { r.push({ value: $(this).attr("value"), text: $(this).text() }); }); return r; } , all: function() { // return all var r = []; this.itemList.find("option").each(function(idx, data) { r.push({ value: $(this).attr("value"), text: $(this).text() }); }); return r; } } $(document).ready(function() { $('#receiverAdd').click(function() { receiverMan.add({text: 'test:'+(new Date().getTime()), value: '0001' }) }); $('#receiverDel').click(function() { receiverMan.del(); }); $('#receiverClear').click(function() { receiverMan.clear(); }); $('#receiverUp').click(function() { receiverMan.up(); }); $('#receiverDown').click(function() { receiverMan.dn(); }); receiverMan.init({ // itemListSelector : "your SELECT selector" itemListSelector : "select#itemList" }); $('#itemList').change(function(){ var args= receiverMan.selectedOne(); alert(args['value']+' '+args['text']); }); // 자동 등록 레이어 테스트 for(var i=0; i<7; i++){ receiverMan.add({text: 'test:'+(new Date().getTime()), value: '000'+i }) } }); < /script >
@ css /===============================================
< style text="text/css" > .receiverInputBox { width: 500px; } .itemList { width:300px; height:20px; font-size:100%; color:blue; background-color:#ffffff; border:0px solid #ffffff; } < /style >
@ html /===============================================
< div> < div> < select name="itemList" id="itemList" class="itemList"> < a href="#" id="receiverAdd">Add/ < a href="#" id="receiverDel">Delete/ < a href="#" id="receiverClear">Clear/ < a href="#" id="receiverUp">Up/ < a href="#" id="receiverDown">Down < /div> < /div>
'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 json IE, Opera 등 parse error 발생 할때 (0) | 2012.03.15 |