소금인형 - SW개발자?

jQuery Mobile을 이용해서 작업을 하다보면, Header의 바와 ui-content의 사이가 다른 곳보다 여백이 커서 보기가 싫을 때가 있습니다. class="ui-contenct"영역에 간단한 inline CSS 스타일 값을 줌으로 해결 할 수 있습니다. // padding-top: 0px으로 여백을 줄입니다. 해당 여백은 ui-content에 어떤 요소(Element)를 넣어주는 냐에 따라 다르게 나타나긴 합니다. 해당 부분에 대한 UI를 만드시다가 여백이 너무 크시다 싶으면 해당 css추가로 해결 하시길 바랍니다. 참고: 2018/06/02 - [Web/jQuery] - jQuery Mobile의 listview search data-filter 위치 Fixed jQuery Mobile의 ..

보통 웹에서 2개 이상의 (드롭다운 박스)을 사용해서, 다른 하나의 의 에 대해서 변경이 필요한 경우가 생깁니다. 해당 부분의 방법을 처리를 위해서 jQuery에서 다음과 같이 사용하면 됩니다. SYNTAX $('#아이디').html('New'); // 다름과 같이 사용하면, 새로운 값으로 replace됩니다. 여러개의 을 넣는 예제 O1 O1 $newoptions = "NewO1 NewO1"; $('select#needSelect').html($newoptions); 여기서 셀럭터를 아이디값만 사용해서 $('#needSelect').html($newoptions); 이렇게 해도 됩니다. 참고: Jquery Replace Select Options 또다른 방법은 (추천하는 방법은 아님) 참고: How t..

jQuery Mobile에서 태그를 사용해서 rows="2"등을 줬을때, 제대로 높이 (height)가 적용되지 않습니다. rows값의 높이 (height)를 적용하기 위해서는 setTime Javascript로 딜레이를 줘서, jQuery Mobile에서 가지고 있는 의 css 높이값을 수정해준다. HTML 예제 5 rows: 10 rows: 15 rows: Javascritp + jQuery setTimeout(function () { //$('.foo').addClass('bar'); $('.foo').css({ 'height': 'auto' }); }, 100); Demo 사이트: http://jsfiddle.net/Palestinian/XXEfV/ 출처: https://stackoverflow...

jQuery Mobile Icons (1.4버전) - SVG icons (45개) Text와 이미지를 함께 사용한 버튼이며, SVG icons이기에 사이즈가 늘어나도 깨짐이 없다. 사용법 1) data-icon="arrow-r" 사용법 2) class=" ... ui-icon-클래스" class="... ui-icon-arrow-r" action alert arrow-d arrow-d-l arrow-d-r arrow-l arrow-r arrow-u arrow-u-l arrow-u-r audio back bars bullets calendar camera carat-d carat-l carat-r carat-u check clock cloud comment delete edit eye forbidden f..

jQuery Mobile에서 Layout Grids (columns) 한 줄에 버튼 여러개 놓기. (최대는 5개 까지 입니다.)two-column (using the ui-grid-a class)three-column (using the ui-grid-b class)four-column (using the ui-grid-c class)five-column (using the ui-grid-d class)화면 구성은 다음과 같다.코드 구성은 아래와 같다. A B {..또는 반복처리..} 참고: http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html 3개의 컬럼 구조 예제 화면.

jQuery 에서 페이지 로딩시 처리하는 함수로 ready 와 on을 많이들 사용하는데, 페이지 로딩에 대한 처리를 한번 알아보려고한다. (참고로, pageinit는 이제 사용하지 않는다고 합니다.) The pageinit event was deprecated in jQuery version 1.4.0. Use the pagecreate event instead. [참고 (jQuery pageinit Event)] http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/jquerymobile/event_pageinit.asp.html jQuery Mobile 1.4 Update: My original article was intended for old way of..

jQuery Mobile Button 숨기기 버튼을 숨기는 방법에 $('#아이디').hide()를 해도 안되기에, 찾아보니 Submit 다음과 같은 방법을 사용하면 가능하다. $('#submit_btn').closest('.ui-btn').hide(); 참조: https://stackoverflow.com/questions/7053335/jquery-mobile-cannot-hide-submit-button closet() 가장 가까운 부모 객체를 찾는 것입니다. 참고: https://www.w3schools.com/jquery/traversing_closest.asp 참고: https://api.jquery.com/closest/ 참고: jQuery closest(), parents() 메소드의 차이

jQuery Mobile 화면 최상단으로 Scroll 이동하기 //delegate binding to only links that have the `.top` class $(document).delegate('a.top', 'click', function () { $('html, body').stop().animate({ scrollTop : 0 }, 500); return false; }); 또는 $.mobile.silentScroll()를 사용하면 됩니다. jQuery Mobile has it's own $.mobile.silentScroll() function that scrolls to a particular Y position without triggering scroll event listen..

jQuery 특정 id 객체로 화면 스크롤링 해서 이동하고 싶을때가 있습니다. 예전에는 #Name 태그를 사용했는데. jQuery에서 Id 값을 줘서, 해당 위치로 애니메이션 스크롤링을 할 수가 있습니다. $("#button").click(function() { $('html, body').animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); }); 자연스럽게 (smooth하게) 이동하기 $("#button").click(function() { $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); Scrolling되면서, 투명도 변화시키기 01 $(wi..

jQuery Mobile에서 header bar에 select box를 넣고 싶을때, 다음과 같이 하면 됩니다. My Page Option 1 option 2 ... 참고: https://stackoverflow.com/questions/6569179/jquery-mobile-select-box-in-header

jQuery Mobile 위치 Fixed하기 (스크롤해도 항상 위에 있게) You can customize the search-filter-element's CSS so it is fixed in the viewport. #my-wrapper { padding-top : 45px; } #my-wrapper form { position : fixed; top : 15px; left : 15px; width : 100%; z-index : 1; }​ You'll notice the #my-wrapper selector, I used it to be able to target just the search-input for a specific listview widget. My HTML looks like th..

== 버튼 색상 바꾸기 == jQuery Mobile 에서 버튼의 색상을 바꾸고 싶을때가 있습니다. 상단의 Bar의 같은 경우 class="ui-header ui-bar-b" (ui-bar-a) / data-theme="b"와 같이 테마가 변경이 가능합니다. 버튼은 해당 테마를 주는 방법을 찾지 못해서, 변경하는 방법을 찾아보니. style을 이용해서 수정하라고 하네요. color와 background-color를 이용해서 변견한 부분 Search [그림1. background-color: darkorchid; color:white; 효과] 참고: https://stackoverflow.com/questions/9748337/jquery-mobile-button-background-color == 상단 ..

jQuery Mobile에서 이전 페이지(previous page)로 가는 Back 버튼을 넣을 때, 여러가지 방법이 있는데요. 종종, Back 이렇게 할 경우가 있는데요. 해당방법을 이용하면, 종종 Mobile에서 오작동이 일어날때가 있곤한다. Javascript로 하는 또다른 방법은 $.mobile.back() 을 사용하는 것입니다.Back jQuery Mobile에서 Back버튼에 대해서,추천해주는 방법 data-rel="back"를 이용하길 권해 준다. Back개인적으로 항상 history.back를 썼는데, 다 변경해야 할 것 같다. ㅠ_ㅠ 참조: https://stackoverflow.com/questions/5740934/jquery-mobile-back-button참조속의 링크: Anato..

jQuery를 통해서 Video 태그에 컨트롤을 하려고 하면, 찾을 수 없다는 에러가 발생한다.[예제] [Failed 예제]$('#video3').pause() // 찾을 수 없다는 오류 발생 [Sucess 해법]$('#video3').get(0).pause(); // 이렇게 해야 실행이 됩니다. $('#videoId').get(0).play(). (get gets the native DOM element from the jQuery selection.) 출처: https://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery

다른 객체의 클릭 이벤트를 호출 할때, jQuery의 Click()이벤트를 사용하면 유용합니다. 추가로 해당 링크는 화면에 보이지 않게 하려면, 해당 테그를 특정 태그(p,span)을 감싸고, display:none으로 하면 감춰지면서, 해당 링크를 클릭을 사용할 수 있다. Link 참고: https://api.jquery.com/click/

가끔 우리는 문에 value값을 2개 이상의 값을 사용하고 싶을때가 있다. [그림 1. BEACH를 셀렉트하면, 10, BEACH가 입력을 원할때] substring()과 indexof()를 구분자의 값 split 해서 넣기 jQuery를 이용한 구분자를 두고 양쪽 input값에 정보 넣기 :: All Location Group:: SCHOOL STORE BEACH TOUR (사용 형태 설명) 와 의 value 값에 "10|BEACH"값을 이용해서 ("|"로 구분된 값을 넣기) 10과 BEACH를 따로 추가 하고 싶을때 사용할때 위의 방법을 사용하면 된다. [ cat_no 가져오기 ] 문자의 처음부터 "| "가 나오는 문장까지 substring문장으로 자른다. "|"가 발견되는 문장값을 indexof(문..

jQuery를 이용한 의 경로 변경하기 이미지 변경 방법은 jQuery의 attr() 함수의 src 속성을 변경으로 가능합니다. .. // 이미지 변경하기 $("#my_image").attr("src","second.jpg"); .. // 이미지 클릭시 변경 $('#my_image').on({ 'click': function(){ $('#my_image').attr('src','second.jpg'); } }); .. // 이미지 클릭시 로테이션으로 변경하기 $('img').on({ 'click': function() { var src = ($(this).attr('src') === 'img1_on.jpg') ? 'img2_on.jpg' : 'img1_on.jpg'; $(this).attr('src', ..

Attribute Ends With Selector [name$=”value”]letter라는 이름으로 되어 있는 Element들을 값을 변경하기(dir *ABC 할때, 1ABC, 3ABC 가 검색되듯이 letter가 들어가 요소 select) $("input[name$='letter']").val("a letter");다음과 같이 표시된다. https://api.jquery.com/attribute-ends-with-selector/

Radio 체크 박스 선택하기 https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery jQuery 1.6+ Use the new .prop() method: $('.myCheckbox').prop('checked', true); $('.myCheckbox').prop('checked', false); jQuery 1.5.x and below The .prop() method is not available, so you need to use .attr(). $('.myCheckbox').attr('checked', true); $('.myCheckbox').attr('checked', false); Note ..

jQuery에서 .hide(), .show()은 display:noe으로 셋팅한다. 해당 셋팅을 visibility:hidden와 같은 설정하기 You could make your own plugins.jQuery.fn.visible = function() { return this.css('visibility', 'visible'); }; jQuery.fn.invisible = function() { return this.css('visibility', 'hidden'); }; jQuery.fn.visibilityToggle = function() { return this.css('visibility', function(i, visibility) { return (visibility == 'visible..

each() 집합 elements를 수정each(iterator)$('img').each(function(n){this.alt='ID가 '+this.id+'인 image['+n+']이다';});또 다른 예제var allAlts = new Array();$('img').each(function(){allAlts.push(this.alt);}); 단일 properties값 받기var altValue = s('#myImage')[0]; Attribute값 get, set attr(name) : name attribute의 value 가져오기attr(name, value) : name attribute에 value값 set하기attr(attributes)매개변수: attributes (Object) 확장 집합의..