소금인형 - SW개발자?

'Web/jQuery'에 해당되는 글 21건

1. 

   jQuery Mobile의 header와 ui-content 여백 줄이기

   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 <select>의 <option>변경하기 + 멀티 콤보박스(Multi-Select Combo box)

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

   jQuery Mobile 의 <textarea> 높이 (height) rows 값 적용되게 설정하기

   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...
4. 

   jQuery Mobile 1.4 SVG Icon

   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..
5. 

   jQuery Mobile: Grid 한줄에 버튼 2개이상 놓기 (최대5개)

   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개의 컬럼 구조 예제 화면.
6. jQuery Mobile: document ready vs. page events

   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..
7. jQuery Mobile Button 숨기기

   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() 메소드의 차이
8. 

   jQuery Mobile 화면 최상단으로 Scroll 이동하기

   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..
9. jQuery 특정 id 객체로 화면 스크롤링 해서 이동하기

   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..
10. 

    jQuery Mobile header 에 select box 추가하기

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