Jquerymobile download message subject

I have a question about uploading a message to jQuery Mobile.

By default, the subject of the download message is a , according to jQuery Mobile code:

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

I would like to know how I can change the default theme of this div, I cannot figure it out.

Thanks in advance.

+6
source share
6 answers

It seems that the boot message is not available.

When you look in the source code, you will see:

 // 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>" ); 

This means that he always chooses ui-body-a

Probably the safest way is to override div.ui-loader.ui-body-a , see http://jsfiddle.net/N7Z9e/95/

+1
source

Answer for the old version, see below for jQuery Mobile 1.1.0 +

I do not know the variable that you can set in the mobileinit event mobileinit , but you can change the theme'd class when the document is ready:

 //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'); }); 

Here is the jsfiddle from the above solution (you can change the theme for the download dialog from the list of buttons): http://jsfiddle.net/jasper/eqxN9/1/ >

Update

jQuery Mobile 1.1.0 adds some support for this, you can set some default values:

loadingMessage string, default: "loading". Set the text that appears. when loading the page. If set to false, the message will not appear at all.

loadingMessageTextVisible boolean, default: false Whether the text should be displayed when a loading message is displayed. Text is always visible for loading errors.

loadingMessageTheme string, default: "a" The subject of the loading message box is used when the text is visible.

Source: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Note that you must set loadingMessageTextVisible to true order to override the loader theme to work due to the new loader design. If you do not set the message, then there is no background to change the color ...

Here is a demo: http://jsfiddle.net/vHJnd/

A quick look through the documentation shows that you can do this on the fly, and now:

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

You can add these arguments to the showPageLoadingMsg() function to display the subject and message. This is an alternative to setting the default value.

Here is a demo: http://jsfiddle.net/vHJnd/1/

+6
source

In jQuery Mobile 1.1, the bootloader is now available for viewing. The demo / test page is here: http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

+1
source

Well, I would suggest the jQM ThemeRoller Tool, which they released:

but if you want to play with him, you are here:

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}*/; } 
0
source

The specified js fiddle ( http://jsfiddle.net/N7Z9e/95/ ) is a good starting point. I come a little closer to this. I find that you sometimes have to use it! It is important to override the basic styles. I hate using it, but there is no other good way around it from time to time.

  /* 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{ } 

Important Note. In a future version of JQM, it will be easier for the loader to manage the message in the loader. You can see some improvements through the git hub.

0
source

I have a very successful solution for this ...

just go to jquery-mobile.js . You must take the following steps here.

  • find "defaultHtml:" <div class = '"+ b +"'> <span class = 'ui-icon-loading'> </span> <h1> </ h1> </div> "
  • replace it with "DefaultHtml:" // <div class = '"+ b +"'> // <span class = 'ui-icon-loading'> // </span> <h1> </ h1> </ div> "

Best of luck

  • remove all spaces ...
0
source

Source: https://habr.com/ru/post/902223/


All Articles