컴퓨터/jQuery
-
$(function(){}) vs window.onload컴퓨터/jQuery 2020. 2. 9. 14:03
1) $(function() {}) $(document).ready(function(){}); 페이지가 로딩되었을 때 일어나길 바라는 이벤트들이 작성된다. 리소스와 상관없이 DOM만 생성되어도 호출된다. 예를 들어 이미지 같은 리소스를 요구하는 페이지일 경우 이미지 로딩 완료 상관없이 진행 2) window.onload = function() {}; 리소스 호출도 완료되었을 경우 실행 출처 : https://recoveryman.tistory.com/104
-
[jQuery] each function(for 대신 $(대상이 되는 selector).each)컴퓨터/jQuery 2020. 2. 4. 19:38
* do something for every element returned from selector $(document).ready(function(){ $('#items').on("click", function(){ $('.progress-bar').each(function() { var randomPct = Math.round(Math.random() * 100); $(this).attr("aria-valuenow", randomPct); $(this).css("width", randomPct = "%"); $(this).text(randomPct); }) }) }) 출처 : https://www.youtube.com/watch?v=EwJjQe0TtPM
-
[jQuery mobile] 설정컴퓨터/jQuery 2020. 1. 29. 17:58
custom-scripting.js 파일 만들어서 적용 가능 $(document).bind("mobileinit", function() { // 페이지 로드시 ajax 통신을 하지 않는다. 로드 대상이 되는 파일에 자바스크립트가 있을 때 ajax로 페이지를 // 읽으면 오류가 발생하는 경우가 있어. 장면전환 효과를 사용하지 않는 경우도 사용 가능 $.mobile.ajaxEnabled = false; // 페이지 로드시 ajax 통신을 이용하지 않고 페이지를 새로 읽는 방식 // 페이지간 이동시 장면전환 효과 // 기본값 : fade(어두워졌다 흐려졌다),option으로 none도 있다 $.mobile.defaultPageTransition = 'slide'; }) 출처 : 생활코딩
-
[jquery mobile] toolbar컴퓨터/jQuery 2020. 1. 29. 17:16
* Toolbar Header bar, Footer bar, Navbar 통칭 (position) data-position = "inline"/"fixed"/ inline : 스크롤하면 툴바가 안보인다. fixed : 스크롤해도 툴바가 고정 위치에 있다. 화면 터치하면 비로소 사라진다. 다시 터치하면 나타난다.(스크롤이 있는 경우에만 반응한다) fullscreen: 스크롤이 없어도 터치에 반응한다. data-position="fixed" data-fullscreen="true"(풀스크린) -> 둘 다써 줘야 한다. Cancel Edit Contact Save Add Up Down One Two Three 출처 : 생활코딩, https://opentutorials.org/course/473/2518
-
[jquery mobile] 컴포넌트, page, 멀티페이지 템플릿, dialog컴퓨터/jQuery 2020. 1. 29. 16:17
컴포넌트 : 유저가 사용하는 시스템에 대한 조작장치, UI, 컨트롤 * page : 가장 상위의 컴포넌트로 page를 data-role의 값으로 하고 모든 컴포넌트를 포함한다 ... ... ... 싱글 페이지 템플릿 : 하나의 페이지만 있는 문서 멀티 페이지 템플릿 : 하나의 웹페이지에 page가 여러개 등장하는 것 page 컴포넌트는 id값을 가질 수 있다. 멀티 페이지 템플릿일 경우 마치 웹페이지가 다른 페이지로 이동한 것 같은 효과를 줄 수 있다. Foo I'm first in the source order so I'm shown as the page. View internal page called bar Page Footer Bar I'm the second in the source order s..
-
click event컴퓨터/jQuery 2020. 1. 6. 20:28
1. $(selector).on("click", function(){}) 로 이벤트를 단다 2. 1번 방법이 잘 되지 않는 경우가 있다. 이 때는 .attr({"onclick": "함수이름(event,'"+info+"')"})를 활용할 수 있다. 3. $(document)에 click이벤트를 다는 방법도 있다. 그러나 이 경우 선택자가 클래스일 때 attribute를 지정해주었음에도 모든 클래스에 클릭 이벤트가 붙을 수 있다. 또 태그를 재사용하는 경우 생각지도 못하게 과거에 달았던 event가 따라붙을 수 있으니 주의하자.... ex. $(document).on("click", "선택자[attr name='"+info+"']", data, function(event){}) data ex) {msgId:..