Loader Widget
Ajax를 통한 컨텐츠 전환 시 loading dialog를 출력하는 역활을 한다.
기본코드
pageinit 이벤트에 $.mobile.loader.prototype.options 관련 속성을 추가하면 Loader Widget을 적용할 수 있다.
- $( document ).on( "pageinit", function() {
- $.mobile.loader.prototype.options.text = "loading";
- $.mobile.loader.prototype.options.textVisible = false;
- $.mobile.loader.prototype.options.theme = "a";
- $.mobile.loader.prototype.options.html = "";
- });
또는 $.mobile.loading 메소드를 이용한 설정도 가능한다.
- $.mobile.loading( "show", {
- text: "foo",
- textVisible: true,
- theme: "z",
- html: ""
- });
Option
html
비어있지 않은 문자열로 값을 설정하는 경우 Loader의 내부 HTML을 교체하는데 사용된다.
- $( ".selector" ).loading({ html: "<span class="ui-icon ui-icon-loading"><img src="jquery-logo.png" /><h2>is loading for you ...</h2></span>" });
text
로딩 메세지의 텍스트값을 세팅한다.
- $( ".selector" ).loading({ text: "Loading Page..." });
textVisible
true로 성정될 경우 텍스트 값이 사용된다.
- $( ".selector" ).loading({ textVisible: true });
textonly
true로 설정될 경우 "spinner" 이미지를 보이지 않고 텍스트 메세지 만을 사용한다.
- $( ".selector" ).loading({ textonly: true });
theme
Loader widget의 테마 색상을 설정한다.
- $( ".selector" ).loading({ theme: "b" });
Methods
checkLoaderPosition()
loader의 위치가 중앙에 고정되어 나타나는지 확인한다.
- $( ".selector" ).loading( "checkLoaderPosition" );
fakeFixLoader()
고정 loader를 지원하지 않는 브라우저의 경우, 중앙 위치에 loader를 위치시킨다.
- $( ".selector" ).loading({ text: "Loading Page..." });
hide()
loader widget을 숨긴다.
- $( ".selector" ).loading( "hide" );
hidePageLoadingMsg()
$.mobile.loadingMessage.를 통해 설정 된 loader 메세지를 숨긴다.
- $.mobile.hidePageLoadingMsg();
loading()
$.mobile.loader를 통해 구성 된 Loader message를 표시하거나 숨긴다.
- $( ".selector" ).loading( "loading" );
resetHtml()
HTML 설정을 초기화한다.
- $( ".selector" ).loading( "resetHtml" );
show()
loader를 출력한다.
- $( ".selector" ).loading( "show" );
showPageLoadingMsg()
Page loading 메세지를 출력한다.
- $.mobile.showPageLoadingMsg();
- $.mobile.showPageLoadingMsg( "b", "This is only a test", true );
Events
create( event, ui )
loader widget이 생성될 경우 발생한다.
Example
- <div data-role="page" id="page1">
- <div data-role="content">
- <div data-role="controlgroup">
- <button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="false"
- data-msgtext="" data-icon="arrow-r" data-iconpos="right"p">Default loader</button>
- <button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true"
- data-msgtext="Text only loader" data-icon="arrow-r" data-iconpos="right">Text only</button>
- <button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true"
- data-msgtext="Loading theme a" data-icon="arrow-r" data-iconpos="right">Theme a</button>
- <button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true"
- data-msgtext="Loading theme b" data-icon="arrow-r" data-iconpos="right">Theme b</button>
- <button class="show-page-loading-msg" data-theme="c" data-textonly="false" data-textvisible="true"
- data-msgtext="Loading theme c" data-icon="arrow-r" data-iconpos="right">Theme c</button>
- <button class="show-page-loading-msg" data-theme="d" data-textonly="false" data-textvisible="true"
- data-msgtext="Loading theme d" data-icon="arrow-r" data-iconpos="right">Theme d</button>
- <button class="show-page-loading-msg" data-theme="e" data-textonly="false" data-textvisible="true"
- data-msgtext="Loading theme e" data-icon="arrow-r" data-iconpos="right">Theme e</button>
- <button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true"
- data-msgtext="Custom Loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-c ui-corner-all'>
- <img src='../_assets/images/jquery-logo.png' /><h2>is loading for you ...</h2></span>"
- data-iconpos="right"ble="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right"p">Custom HTML</button>
- <button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
- <script>
- $(document).on( "click", ".show-page-loading-msg", function() {
- var $this = $( this ),
- theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
- msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
- textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
- textonly = !!$this.jqmData( "textonly" );
- html = $this.jqmData( "html" ) || "";
- $.mobile.loading( 'show', {
- text: msgText,
- textVisible: textVisible,
- theme: theme,
- textonly: textonly,
- html: html
- });
- })
- .on( "click", ".hide-page-loading-msg", function() {
- $.mobile.loading( "hide" );
- });
- </script>