jquerymobile लोडिंग संदेश थीम

Question

मुझे jQuery मोबाइल पर लोडिंग संदेश के बारे में कोई प्रश्न है।

डिफ़ॉल्ट रूप से, लोड हो रहा है संदेश विषय, a है jQuery मोबाइल कोड के अनुसार:

<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 मोबाइल 1.1.0+

के लिए नीचे देखें 210

मैं एक चर आप 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 मोबाइल 1.1.0 इस के लिए कुछ समर्थन जोड़ता है, तो आप कुछ डिफ़ॉल्ट सेट कर सकते हैं:

loadingMessageस्ट्रिंग, डिफ़ॉल्ट: "लोड हो रहा है" पाठ कि प्रकट होता है जब एक पृष्ठ लोड कर रहा है निर्धारित करें। यदि गलत पर सेट किया गया है, तो संदेश दिखाई नहीं देगा।

loadingMessageTextVisibleबूलियन, डिफ़ॉल्ट: झूठी पाठ दिखाई देना चाहिए चाहे जब एक लोडिंग संदेश दिखाया गया है। पाठ हमेशा त्रुटियों को लोड करने के लिए दृश्यमान है।

loadingMessageThemeस्ट्रिंग, डिफ़ॉल्ट: "एक" विषय लोड हो रहा है संदेश बॉक्स का उपयोग करता है जब पाठ दिख रहा है।

स्रोत: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

ध्यान दें कि आप क्योंकि नए लोडर डिजाइन के काम करने के लिए लोडर विषय ओवरराइड के लिए true को loadingMessageTextVisible सेट करना होगा। यदि आप कोई संदेश सेट नहीं करते हैं तो रंग बदलने के लिए कोई पृष्ठभूमि नहीं है ...http://jsfiddle.net/vHJnd/

प्रलेखन के माध्यम से एक त्वरित सोचना आपको दिखाता है कि रूप में अच्छी तरह अब मक्खी पर ऐसा कर सकते है कि:

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

आप को showPageLoadingMsg() कार्य करने के लिए इन तर्कों में जोड़ सकते हैं

यहाँ एक प्रदर्शन है प्रदर्शित करने के लिए एक विषय और संदेश मजबूर करें। यह डिफ़ॉल्ट मान सेट करने का एक विकल्प है।

यहाँ एक प्रदर्शन है: http://jsfiddle.net/vHJnd/1/

Answer 3

खैर मैं jQM ThemeRoller उपकरण सुझाव है कि वे जारी किया:

• http://jquerymobile.com/themeroller/

लेकिन अगर आप इसके साथ आप के आसपास खेलने के लिए, यहाँ चाहता था जाओ:

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

जे एस

$('.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'); 
}); 

एचटीएमएल

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

सीएसएस

.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/) एक अच्छा प्रारंभिक बिंदु है। मैं इस पर थोड़ा सा निर्माण कर रहा हूं। मुझे लगता है कि आपको कभी-कभी उपयोग करना होगा! आधार शैलियों को ओवरराइड करना महत्वपूर्ण है। मुझे इसका इस्तेमाल करने से नफरत है लेकिन कभी-कभी इसे पाने के लिए कोई और अच्छा तरीका नहीं है।

/* 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 के भविष्य के संस्करण में लोडर लोडर में संदेश को नियंत्रित करने के आसान हो जाएगा। आप गिट हब के माध्यम से कुछ सुधार देख सकते हैं।

Answer 5

jQuery मोबाइल 1.1 में, लोडर अब थीमबल है। एक डेमो/परीक्षण पृष्ठ यहाँ है: http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

Answer 6

मैं इसके लिए बहुत ही सफल समाधान है ...

आप बस अपने jquery-mobile.js में जाते हैं। आप यहाँ

1. खोजने के लिए निम्न चरणों ले जाना है "defaultHtml:" < div class = "+ बी + ''> < span class = 'ui-आइकन लोडिंग'> </span> < h1> </h1> </div> defaultHtml "
2. इसके साथ
   की जगह": "// < div class =" + बी + ''> // < span class = 'ui-आइकन लोडिंग'> // </span> < h1> </h1> </div> "

लक

• के सर्वश्रेष्ठ कृपया सभी रिक्त स्थान को हटा दें ...