jquerymobile加載消息主題

Question

我對jQuery Mobile上的加載消息有疑問。

默認情況下，加載消息主題爲a，根據jQuery Mobile的代碼：

<div class="ui-loader ui-body-a ui-corner-all" style="top: 204.5px; ">...</div> 

我想知道我可以改變這個div的默認主題，我無法弄清楚。

在此先感謝。

Answer 1

它看起來加載消息不是主題化。

當你在源代碼中查找，您將看到：

// loading div which appears during Ajax requests 
// will not appear if $.mobile.loadingMessage is false 
var $loader = $("<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>"); 

這意味着它選擇總是ui-body-a

可能是最安全的方式是重寫div.ui-loader.ui-body-a，看到http://jsfiddle.net/N7Z9e/95/

Answer 2

回答對於舊版本，請參閱下面的jQuery Mobile的1.1.0+

我不知道，你可以在mobileinit事件處理程序設置變量，但是當文件已準備就緒，你可以改變theme'd類：

//run the code on `document.ready` 
jQuery(function ($) { 

    //find the loader div and change its theme from `a` to `e` 
    $('.ui-loader').removeClass('ui-body-a').addClass('ui-body-e'); 
}); 

這裏是上述解決方案的的jsfiddle（你可以從按鈕列表）更改加載對話主題：http://jsfiddle.net/jasper/eqxN9/1/

更新

jQuery Mobile的1.1.0增加了一些這方面的支持，您可以設置一些默認值：

loadingMessage串，默認： 「加載」 設置，當網頁加載出現 文本。如果設置爲false，則根本不會出現消息 。

loadingMessageTextVisible布爾，默認：false是否文本 應該是可見的顯示加載消息時。對於加載錯誤，文本始終可見 。

loadingMessageTheme串，默認：「一」的主題，加載 消息框使用時文本可見。

來源：http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

請注意，您必須設置loadingMessageTextVisible到true的裝載機主題覆蓋，因爲新的裝載機的設計工作。如果你沒有設置消息，那麼沒有背景可以改變顏色......

這裏是一個演示：http://jsfiddle.net/vHJnd/

快速PERUSE通過文件表明，你可以做到這一點的飛行以及現在：

$.mobile.showPageLoadingMsg("a", 'loading message'); 

您可以將這些參數傳遞給showPageLoadingMsg()功能添加到強制顯示主題和消息。這是設置默認值的替代方法。

這裏是一個演示：http://jsfiddle.net/vHJnd/1/

Answer 3

那麼我建議JQM的ThemeRoller工具，他們發佈：

• http://jquerymobile.com/themeroller/

，但如果你想玩弄它，在這裏你去：

• http://jsfiddle.net/yLyFs/5/

JS

$('.changeLoadingBackgroundColor').click(function() { 
    $.mobile.showPageLoadingMsg(); 
    var bgColor = $(this).attr('id'); 
    var loader = $('div.ui-loader'); 

    loader.removeAttr('class'); 
    loader.attr('class','ui-loader ui-body-'+bgColor+' ui-corner-all'); 
    $(this).trigger('create'); 
}); 

HTML

<div id="test" data-role="page"> 
    <div data-role="content"> 
     Change the Background Color of the Loading Message, Choose a <b>Theme</b> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <input type="button" id="a" class="changeLoadingBackgroundColor" value="A"/> 
      <input type="button" id="b" class="changeLoadingBackgroundColor" value="B"/> 
      <input type="button" id="c" class="changeLoadingBackgroundColor" value="C"/> 
      <input type="button" id="d" class="changeLoadingBackgroundColor" value="D"/> 
      <input type="button" id="e" class="changeLoadingBackgroundColor" value="E"/> 
      <input type="button" id="custom-color" class="changeLoadingBackgroundColor" value="Custom Color"/> 
     </div> 
    </div> 
</div> 

CSS

.ui-body-custom-color, 
.ui-dialog.ui-overlay-b { 
    border: 1px solid   #7FFF00 /*{b-body-border}*/; 
    background:    #cccccc /*{b-body-background-color}*/; 
    color:      #8A2BE2 /*{b-body-color}*/; 
    text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/; 
    font-weight: normal; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6 /*{b-body-background-start}*/), to(#ADFF2F /*{b-body-background-end}*/)); /* Saf4+, Chrome */ 
    background-image: -webkit-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */ 
    background-image: -moz-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* FF3.6 */ 
    background-image:  -ms-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* IE10 */ 
    background-image:  -o-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Opera 11.10+ */ 
    background-image:   linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); 
} 
.ui-body-custom-color, 
.ui-body-custom-color input, 
.ui-body-custom-color select, 
.ui-body-custom-color textarea, 
.ui-body-custom-color button { 
    font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; 
} 
.ui-body-custom-color .ui-link-inherit { 
    color:  #8A2BE2 /*{b-body-color}*/; 
} 

.ui-body-custom-color .ui-link { 
    color: #00FFFF /*{b-body-link-color}*/; 
    font-weight: bold; 
} 

.ui-body-custom-color .ui-link:hover { 
    color: #00FFFF /*{b-body-link-hover}*/; 
} 

.ui-body-custom-color .ui-link:active { 
    color: #00FFFF /*{b-body-link-active}*/; 
} 

.ui-body-custom-color .ui-link:visited { 
    color: #00FFFF /*{b-body-link-visited}*/; 
} 

Answer 4

列出的JS小提琴（http://jsfiddle.net/N7Z9e/95/）是一個很好的起點。我正在建立這一點。我發現你有時必須使用！important來覆蓋基本樣式。我討厭使用它，但有時候沒有其他好方法來解決它。

/* override loader */ 
    div.ui-loader.ui-body-a { 
    border: 3px solid #104070 /*{a-body-border}*/; 
    background-color: rgba(0, 62, 87, .9); color: rgba(0, 62, 87, .9); 
    background-image: none; 
    font-weight: normal; 
    } 

/* Control the text placement, font size, etc..*/  
    div.ui-loader h1 { margin-top:10px; margin-bottom:4px; color:#fff !important;} 


    /* Change The Spinner Image And Styles * 
    .spinner{ 

    } 

重要提示：在JQM的未來版本裝載機將更容易控制在裝載機的消息。你可以通過git集線器看到一些改進。

Answer 5

在jQuery Mobile的1.1，裝載機現在是主題化的。一個演示/測試頁面是在這裏： http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

Answer 6

我對這個非常成功的解決方案...

你就到你的jquery-mobile.js。 你要在這裏採取這些步驟

1. 發現 「defaultHtml：」 < DIV CLASS = ' 「+ B +」'> <跨度類= 'UI圖標加載'> </SPAN> < H1> </H1> </DIV> defaultHtml」
2. 與
   代之以 「：」 // < DIV類= ' 「+ b +」'> // <跨度類= 'UI-圖標加載'> // </span> < h1> </h1> </div>「

祝您好運

• 的請刪除所有空格...