Method & Utilities
전자정부 모바일 표준프레임워크는 $.mobile 객체에 대한 메소드와 속성들을(properties) 제공한다.
$.mobile.changePage (method)
프로그램 코드 상에서 페이지를 이동할 수 있도록 지원하는 메소드이다.
주로 화면전환, 페이지 로딩 등의 기능이 가능한 환경에서 링크 클릭이나 폼 전송을 할 때 내부적으로 사용된다.
- Arguments
- to (string or object, required)
- String: 절대 또는 상대 URL(“about/us.html”)
- Object: jQuery collection object. ($("#about"))
- options (object, optional)
- Properties:
-
transition
(string, default: $.mobile.defaultPageTransition)
페이지를 나타내기 위한 화면전환(transition)이다.
reverse
(boolean, default: false) 페이지를 나타날 때 화면전환(transition)이 일어나는 방향을 결정한다
changeHash
(boolean, default: true) 주소창의 hash가 업데이트될 필요가 있는 지 결정한다.
role
(string, default: undefined) 페이지를 화면에 출력할 때 사용되는 data-role 값이다.
각 요소에 정의된 @data-role 속성 값에 의존적이며 default 값은 ‘undefined’ 이다.
pageContainer
(jQuery collection, default: $.mobile.pageContainer) 페이지를 포함하고 있어야 할 요소들을 식별한다.
type
(string, default: "get") 페이지의 요청을 만들 때 method가 ‘get’ 또는 ‘post’ 방식인 지 식별한다.
(changePage()의 to 인자(argument) 값이 URL일 때 사용된다.)
data
(object or string, default: undefined) Ajax 페이지 요청과 함께 전달될 데이터이다.
(changePage()의 to 인자(argument) 값이 URL일 때 사용된다.)
reloadPage
(boolean, default: false) 페이지를 리로드(reload)하며 이미 페이지 컨테이너(page container)의 DOM에 속해있는 페이지라도 리로드를 수행한다.
(changePage()의 to 인자(argument) 값이 URL일 때 사용된다.)
- Examples
- //transition to the "about us" page with a slideup transition
- $.mobile.changePage( "about/us.html", { transition: "slideup"} );
- //transition to the "search results" page, using data from a form with an ID of "search""
- $.mobile.changePage( "searchresults.php", {
- type: "post",
- data: $("form#search").serialize()
- });
- //transition to the "confirm" page with a "pop" transition without tracking it in history
- $.mobile.changePage( "../alerts/confirm.html", {
- transition: "pop",
- reverse: false,
- changeHash: false
- });
$.mobile.loadPage (method)
외부 페이지를 로드하고,DOM에 추가한다. 이 method는 첫번째 인수로 URL이 올 때 changePage() 함수를 통해
내부적으로 호출된다. 이 함수는 현재 활성화된 페이지에는 영향을 주지 않고, 백그라운드에서 페이지를 로드 할 때 사용된다.
이 함수는 페이지가 로딩되고, 문서에 추가 된 후에 미리 정의된 객체를 리턴 한다.
- Arguments
- url (string, required)상대 또는 절대 URL
- options (object, optional)
- Properties:
-
role
(string, default: undefined) 페이지를 화면에 출력할 때 사용되는 data-role 값이다.
각 요소에 정의된 @data-role 속성 값에 의존적이며 default 값은 ‘undefined’ 이다.
pageContainer
(jQuery collection, default: $.mobile.pageContainer)
페이지가 로드된 후 페이지를 포함하고 있어야 할 요소들을 식별한다.
type
(string, default: "get") 페이지의 요청을 만들 때 method가 ‘get’ 또는 ‘post’ 방식인 지 식별한다.
data
(object or string, default: undefined)
Ajax 페이지 요청과 함께 전달될 데이터이다
reloadPage
(boolean, default: false) 페이지를 리로드(reload)하며 이미 페이지 컨테이너(page container)의 DOM에 속해있는 페이지라도 리로드를 수행한다.
- Examples
- //load the "about us" page into the DOM
- $.mobile.loadPage( "about/us.html" );
- //load a "search results" page, using data from a form with an ID of "search""
- $.mobile.loadPage( "searchresults.php", {
- type: "post",
- data: $("form#search").serialize()
- });
jqmData(), jqmRemoveData(), and jqmHasData() (method)
- Arguments
-
jqmData(), jqmRemoveData()는 jquery core의 data와 removeData이다. Data 속성의 setting와 getting를 자동으로
만들어 준다.
- Examples
-
$("div[data-role='page']") 대신 $("div:jqmData(role='page')") 또는
$("div[data-"+ $.mobile.ns +"role='page']")를 사용 가능 하다.
$.fn.jqmEnhanceable() (method)
사용자가 data-enhance=false 로 지정된 부모 엘리먼트에게 수동 enhancement 또는 커스텀 플러그인으로 만든 경우에 이 함수를 사용한다.
- Settings
-
$.mobile.ignoreContentEnabled가 true인 경우에만 이 함수는 각각의 jQuery 객체 DOM 부모 노드 들을 교차하며 data-enhance=false 인 부모들의 자식들은 모두 집합에서 제거한다.
- Warning
-
모든 부모 elements에 대해 교차하여 동작하기 때문에 작은 jQuery 객체 집합에서도 높은 cost가 발생할 수 있다.
$.fn.jqmHijackable() (method)
사용자가 data-ajax=false 인 부모 엘리먼트에게 사용자정의 폼 그리고 link binding 에 대해 이 함수를 사용한다.
- Settings
-
$.mobile.ignoreContentEnabled가 true인 경우에만 이 함수는 각각의 jQuery 객체 DOM 부모 노드들을 교차하여 data-ajax=false 인 부모의 자식들을 모두 집합에서 제거한다.
- Warning
-
모든 부모 elements에 대해 교차하여 동작하기 때문에 작은 jQuery 객체 집합에서도 높은 cost가 발생할 수 있다.
$.mobile.fixedToolbars.show (method)
현재 활성화된 페이지의 viewport 안에 고정 header (and/or) footer 를 보여주는 utility method이다.
- Arguments
- immediately (boolean, optional)
- 이 속성이 true인 경우 현재 활성화된 페이지안의 고정된 header/footer는 즉시 viewport안에 표현된다.
만약 false이거나 정의되지 않았다면 고정된 header/footer는 100millisecond 지연 후 점점 나타날 것이다.
document resize 혹은 scroll 이벤트와 같은 다른 이벤트의 경우에는 header/footer를 표시하는 애니메이션이 추가적으로 지연될 수도 있다.
- Examples
- // Show fixed header/footer with a fade animation.
- $.mobile.fixedToolbars.show();
- // Show fixed header/footer immediately.
- $.mobile.fixedToolbars.show(true);
$.mobile.fixedToolbars.hide (method)
현재 활성화된 페이지의 고정 header/footer를 숨길 수 있는 Utility method이다.
- Arguments
- immediately (boolean, optional)
- 이 속성이 true인 경우 현재 활성화된 페이지안의 content와 같이 고정된 header/footer가 일렬로 위치하는 것은 scroll이 content를 따라 오직 viewport안에 있는 페이지의 상단 혹은 하단에 보여질 수 있다.
만약 false이거나 정의되지 않았다면 고정된 header/footer는 100millisecond 지연 후 점점 사라질 것이다.
document resize 혹은 scroll 이벤트와 같은 다른 이벤트의 경우에는 header/footer가 즉시 사라질수도 있다.
- Examples
- // Hide fixed header/footer with a fade animation.
- $.mobile.fixedToolbars.hide();
- // Hide fixed header/footer immediately.
- $.mobile.fixedToolbars.hide(true);
$.mobile.path.parseUrl (method)
URL을 파싱하는 함수이다. URL의 각 요소(data)에 접근을 용이하게 하며 파싱할 때 해당 값이 없으면 항목에 빈 String 값으로 채워진다.
(예 protocol, host 등)
또한 권한이 없는 URL을 파싱 할 때는 protocol/scheme 콜론 뒤에 데이터가 포함된다.
- Arguments
- url (string, required)상대 또는 절대 URL
- Return Value
- 문자열 형식의 다양한 URL 컴포넌트를 포함한 객체를 반환한다.
객체의 속성은 브라우저의 location 객체를 따른다.
- hash
- ‘#’ 문자(character)를 포함하는 URL 컴포넌트의 fragment 이다.
- host
- URL의 host와 포트 번호이다.
- hostname
- URL에 포함된 host 이름이다.
- href
- 분석된 URL 원본이다.
- pathname
- URL에 의해 참조되는 디렉터리 또는 파일의 경로이다.
- port
- URL 내부에서 식별된 포트이다. 사용되는 프로토콜에 의해 default 포트를 사용할 수 있으므로
대부분의 빈 문자열로 표시된다.
- protocol
- ‘:’ 문자(character)를 포함하는 URL을 지원하는 프로토콜이다.
- search
- ‘?’ 문자(character)를 포함한 URL의 query 컴포넌트이다.$.mobile.path.parseUrl() 메소드는 개발자가 접근 가능한 주요 형식의 URL 뿐만 아니라
기타 컴포넌트에 대한 접근을 지원하는 속성도 제공한다
- authority
- URL의 username, password, host component 이다.
- directory
- 파일명을 제외한 pathname 의 디렉터리 컴포넌트이다.
- domain
- URL의 프로토콜, 권한(authority)에 관련된 컴포넌트이다.
- filename
- 디렉터리를 제외한 pathname 내부의 파일명이다.
- hrefNoHash
- fragment(hash) 컴포넌트를 제외한 URL의 원본이다.
- hrefNoSearch
- query(search) 와 fragment(hash)를 제외한 URL의 원본이다.
- password
- 권한(authority) 컴포넌트 내부에 포함된 password 이다.
- username
- 권한(authority) 컴포넌트 내부에 포함된 username 이다.
- Examples
- // Parsing the Url below results an object that is returned with the
- // following properties:
- //
- // obj.href: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
- // obj.hrefNoHash: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
- // obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
- // obj.domain: http://jblas:password@mycompany.com:8080
- // obj.protocol: http:
- // obj.authority: jblas:password@mycompany.com:8080
- // obj.username: jblas
- // obj.password: password
- // obj.host: mycompany.com:8080
- // obj.hostname: mycompany.com
- // obj.port: 8080
- // obj.pathname: /mail/inbox
- // obj.directory: /mail/
- // obj.filename: inbox
- // obj.search: ?msg=1234&type=unread
- // obj.hash: #msg-content
- var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");
$.mobile.path.makePathAbsolute (method)
상대경로를 절대 경로로 바꿔주는 메소드 유틸리티 함수이다.
- Arguments
-
relPath (string, required) 파일 또는 디렉터리의 상대경로
absPath (string, required) An absolute file or relative path to resolve against.
- Return Value
-
상대경로에 대한 절대경로를 문자열로 반환한다.
- Examples
- // Returns: /a/b/c/file.html
- var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");
- // Returns: /a/foo/file.html
- var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");
$.mobile.path.makeUrlAbsolute (method)
상대 경로 URL을 절대경로 URL로 변경하는 유틸리티 메소드 이다.
- Arguments
-
relUrl (string, required) 상대 URL
absUrl (string, required) An absolute URL to resolve against.
- Return Value
- 상대 URL에 대한 절대 URL을 문자열로 반환한다.
- Examples
- // Returns: http://foo.com/a/b/c/file.html
- var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");
- // Returns: http://foo.com/a/foo/file.html
- var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");
- // Returns: http://foo.com/bar/file.html
- var absUrl = $.mobile.path.makeUrlAbsolute("//foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");
- // Returns: http://foo.com/a/b/c/test.html?a=1&b=2
- var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&b=2", "http://foo.com/a/b/c/test.html");
- // Returns: http://foo.com/a/b/c/test.html#bar
- var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");
$.mobile.path.isSameDomain (method)
두가지 URL을 비교해서 같은 도메인인지 판단하여 Boolean 값을 리턴한다..
- Arguments
-
url1 (string, required) 상대 URL
url2 (string, required) 절대 URL (An absolute URL to resolve against.)
- Return Value
-
도메인이 같으면 true를 반환하고 같지 않으면 false를 반환한다.
- Examples
-
- // Returns: true
- var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
- // Returns: false
- var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
- // Returns: false
- var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
- // Returns: false
- var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");
$.mobile.path.isRelativeUrl (method)
URL이 상대 경로인지 판단하여 Boolean 값을 리턴한다.
- Arguments
-
url (string, required) 상대 또는 절대 URL
- Return Value
-
상대 URL이면 true를 반환하고 절대 URL이면 false를 반환한다.
- Examples
- // Returns: false
- var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");
- // Returns: true
- var isRel = $.mobile.path.isRelativeUrl("//foo.com/a/file.html");
- // Returns: true
- var isRel = $.mobile.path.isRelativeUrl("/a/file.html");
- // Returns: true
- var isRel = $.mobile.path.isRelativeUrl("file.html");
- // Returns: true
- var isRel = $.mobile.path.isRelativeUrl("?a=1&b=2");
- // Returns: true
- var isRel = $.mobile.path.isRelativeUrl("#foo");
$.mobile.path.isAbsoluteUrl (method)
URL이 절대 경로인지 판단하여 Boolean 값을 리턴한다..
- Arguments
-
url (string, required) 상대 또는 절대 URL
- Return Value
-
절대 URL이면 true를 반환하고 상대 URL이면 false를 반환한다.
- Examples
- // Returns: true
- var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");
- // Returns: false
- var isAbs = $.mobile.path.isAbsoluteUrl("//foo.com/a/file.html");
- // Returns: false
- var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");
- // Returns: false
- var isAbs = $.mobile.path.isAbsoluteUrl("file.html");
- // Returns: false
- var isAbs = $.mobile.path.isAbsoluteUrl(s"?a=1&b=2");
- // Returns: false
- var isAbs = $.mobile.path.isAbsoluteUrl("#foo");
$.mobile.base (methods, properties)
일반화된 base element로 동작 하도록 한다.
$.mobile.silentScroll (method)
스크롤 이벤트 리스너를 실행시키지 않고 인수로 지정한 Y 좌표로 스크롤한다.
- Arguments
-
yPos (number, defaults to 0). 스크롤 할 Y 좌표 값
- Examples
- //scroll to Y 100px
- $.mobile.silentScroll(100);
$.mobile.addResolutionBreakpoints (method)
HTML 요소에 추가될 클래스의 최소 최대 너비에 대한 범위를 지정한다.
추가된 min/max width classes에 breakpoint를 추가한다.
- Arguments
-
values (숫자 또는 배열 값). resolution 클래스에 추가될 숫자 또는 배열을 전달한다.
자세한 내용은 Orientation & resolution targeting 을 참조한다.
- Examples
- //add a 400px breakpoint
- $.mobile.addResolutionBreakpoints(400);
- //add 2 more breakpoints
- $.mobile.addResolutionBreakpoints([600,800]);
$.mobile.activePage (property)
화면에 보여지고 있는 현재 페이지의 참조를 리턴한다.