如何更改jQuery Mobile的默认加载的ajax装载机GIF装载机、如何更改、加载、jQuery

2023-09-07 05:03:16 作者：寂寞無愛、孤獨有情

我已经看到了jQuery Mobile的的文档，但无法理解如何将它集成在我的移动网站。该文档是在这里。

  http://jquerymobile.com/demos/1.2.0-$p$p/docs/pages/loader.html

其实GIF图像不能在2.x的Android设备上的动画，所以我想使文本唯一一种pre装部件的。

我试图通过这样的CSS改变它

 的.ui图标加载{            背景：网址（主题/图片/定制Ajax的loader.gif）;        }

但新IMAG不能正常规模和旧的背景仍是可见的。

我跟别人javascript.can一个完整的小白plz帮助我？

解决方案

利用ajax修改删除页面数据,使用Jquery的Ajax实现无刷新更新,修改,删除页面

您提JQM 1.2阿尔法文档所以我的答案基于此JQM版本。

下面你可以找到2个选项更改默认加载图像。

解决方案1

由于在JQM 1.2阿尔法文档说明：

在jQuery Mobile的开始，它会触发文档对象上mobileinit事件。要覆盖默认设置，绑定到mobileinit。由于mobileinit事件被立即触发，你需要加载jQuery Mobile的前事件处理程序绑定。链接到您的JavaScript文件按以下顺序：

 ＆LT;脚本SRC =jquery.js和＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本SRC =定制scripting.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本SRC =jQuery的-mobile.js＆GT;＆LT; / SCRIPT＆GT;

要配置装载全球对话框下面的设置可以在它的原型mobileinit活动期间进行定义：

 的$（document）.bind（'mobileinit'，函数（）{  $ .mobile.loader.prototype.options.text =装载;  $ .mobile.loader.prototype.options.textVisible = FALSE;  $ .mobile.loader.prototype.options.theme =A;  $ .mobile.loader.prototype.options.html =;}）;

下面你可以找到工作的例子中，你可以完全自定义装载机在 HTML原型选项

例如：

 ＆LT;！DOCTYPE HTML＆GT;＆LT; HTML和GT;    ＆LT; HEAD＆GT;        ＆LT;标题＆gt;页面标题＆LT; /标题＆GT;        ＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;        ＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css /＆GT;        ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.7.1.min.js＆GT;＆下; /脚本＆GT;        ＆LT;脚本＆GT;            （文档）$ .bind（'mobileinit'，函数（）{              $ .mobile.loader.prototype.options.text =装载;              $ .mobile.loader.prototype.options.textVisible =真;              $ .mobile.loader.prototype.options.theme =A;              $ .mobile.loader.prototype.options.textonly = FALSE;              $ .mobile.loader.prototype.options.html =＆LT;跨度类=UI栏UI的叠加-C UI的角落都'＆GT;＆LT; IMG SRC ='.. /图像/我的，定做image.png'/＆GT;＆下; H2＆的载量＆下; / H2＆GT;＆下; /跨度＆gt;中;            }）;        ＆LT; / SCRIPT＆GT;        ＆LT;脚本src=\"http://$c$c.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js\"></script>        ＆LT;脚本＆GT;            $（文件）。在（点击，.show页面加载-味精，函数（）{                $ .mobile.loading（'秀'）;            }）;        ＆LT; / SCRIPT＆GT;    ＆LT; /头＆GT;    ＆LT;身体GT;        ＆LT;！ -  /页 - ＆GT;        ＆LT; DIV数据角色=页面级=页面的地图的风格=宽度：100％;身高：100％;＆GT;            ＆LT;！ -  /头 - ＆GT;            ＆LT; DIV数据角色=头的数据主题=B＆GT;                ＆LT; H1＆GT;测试与LT; / H1＆GT;            ＆LT; / DIV＆GT;            ＆LT;！ -  /内容 - ＆GT;            ＆LT; DIV数据角色=内容类=UI吧-C UI的角落 - 所有UI阴影的风格=填充：1EM;＆GT;                ＆LT;按钮类=显示页面加载-MSG＆gt;点击＆LT; /按钮＆GT;            ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;    ＆LT; /身体GT;＆LT; / HTML＆GT;

解决方案2

覆盖用来描述页面加载默认的CSS样式。

EDITED

有关 JQM版本1.1.1 有以下几种配置选项：

loadingMessage字符串，默认：加载结果设置当网页加载显示的文本。如果设置为false，不会出现该消息在所有。 loadingMessageTextVisible布尔值，默认值：false结果无论是文字应该是可见显示加载消息时。该文本总是加载错误可见。 loadingMessageTheme字符串，默认：一结果当文本可见加载消息框使用的主题。

code例如：

 ＆LT;！DOCTYPE HTML＆GT;＆LT; HTML和GT;    ＆LT; HEAD＆GT;        ＆LT;标题＆gt;页面标题＆LT; /标题＆GT;        ＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;        ＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css/＆GT;        ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.7.1.min.js＆GT;＆下; /脚本＆GT;        ＆LT;脚本＆GT;            （文档）$ .bind（'mobileinit'，函数（）{               $ .mobile.loadingMessageTheme ='E';               $ .mobile.loadingMessageTextVisible =真;                $ .mobile.loadingMessage =测试;            }）;        ＆LT; / SCRIPT＆GT;        ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js＆GT;＆下; /脚本＆GT;        ＆LT;脚本＆GT;            $（文件）。在（点击，.show页面加载-味精，函数（）{                $ .mobile.showPageLoadingMsg（）;            }）;        ＆LT; / SCRIPT＆GT;    ＆LT; /头＆GT;    ＆LT;身体GT;        ＆LT;！ -  /页 - ＆GT;        ＆LT; DIV数据角色=页面级=页面的地图的风格=宽度：100％;身高：100％;＆GT;            ＆LT;！ -  /头 - ＆GT;            ＆LT; DIV数据角色=头的数据主题=B＆GT;                ＆LT; H1＆GT;测试与LT; / H1＆GT;            ＆LT; / DIV＆GT;            ＆LT;！ -  /内容 - ＆GT;            ＆LT; DIV数据角色=内容类=UI吧-C UI的角落 - 所有UI阴影的风格=填充：1EM;＆GT;                ＆LT;按钮类=显示页面加载-MSG＆gt;点击＆LT; /按钮＆GT;            ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;    ＆LT; /身体GT;＆LT; / HTML＆GT;

此外，你还可以尝试重写用于样式化JQM加载默认的CSS。更具体地说，您可以修改或部分覆盖风格的加载屏幕并在部分的加载图标样式这是用来描绘页面加载器。

您会发现这里在JQM 1.1.1使用的CSS

  / *加载图标* /的.ui图标加载{    背景：网址（图像/ Ajax的loader.gif）;    背景-SIZE：46px 46px;}/ *加载屏幕* /的.ui装载的.ui装载机{显示：块; }的.ui装载机{显示：无;的z-index：9999999;位置：固定;顶部：50％;左：50％;边框：0; }的.ui装载机默认{背景：无;不透明度：0.18;宽度：46px;高度：46px;保证金左：-23px;的margin-top：-23px; }的.ui-架详细{宽度：200像素;不透明度：0.88;的box-shadow：0 1px的1px的-1px #FFF;身高：汽车;保证金左：-110px;的margin-top：-43px;填充：10px的; }的.ui装载机默认H1 {字体大小：0;宽度：0;高度：0;溢出：隐藏; }的.ui装载机-H1冗长{字体大小：16像素;保证金：0;文本对齐：中心; }的.ui装载机的.ui图标{背景颜色：＃000;显示：块;保证金：0;宽度：44px;高度：44px;填充：1px的; -webkit-边界半径：36px; -moz-边界半径：36px;边界半径：36px; }的.ui-架冗长的.ui图标{保证金：0汽车10px的;不透明度：0.75; }的.ui-架textonly {填充：15px的;保证金左：-115px; }的.ui-架textonly的.ui图标{显示：无; }的.ui-架fakefix {立场：绝对的; }

I have already seen the docs for jquery mobile but couldn't understand how to integrate it on my mobile website. The docs are here at

http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html

Actually the gif image doesn't animate on 2.x android devices so I am thinking about making a text only kind of pre loading widget.

I tried changing it via css like this

.ui-icon-loading {
            background: url(themes/images/custom-ajax-loader.gif);
        }

but the new imag doesn't scale properly and the old background is still visible.

I am a complete noob with javascript.can someone plz help me with this?

解决方案

You are mentioning the jQM 1.2 Alpha Docs so my answer is based in this jQM version.

Below you can find 2 options to change the default loader image.

Solution 1

As stated in the jQM 1.2 Alpha Docs:

When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit event:

$( document ).bind( 'mobileinit', function(){
  $.mobile.loader.prototype.options.text = "loading";
  $.mobile.loader.prototype.options.textVisible = false;
  $.mobile.loader.prototype.options.theme = "a";
  $.mobile.loader.prototype.options.html = "";
});

Below you can find a working example in which you can fully customize the loader in the html prototype option.

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(document).bind( 'mobileinit', function(){
              $.mobile.loader.prototype.options.text = "loading";
              $.mobile.loader.prototype.options.textVisible = true;
              $.mobile.loader.prototype.options.theme = "a";
              $.mobile.loader.prototype.options.textonly = false;
              $.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
        <script>
            $(document).on("click", ".show-page-loading-msg", function() {          
                $.mobile.loading('show');
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page" class="page-map" style="width:100%; height:100%;">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <button class="show-page-loading-msg">Click</button>
            </div>
        </div>
    </body>
</html>

Solution 2

Override the default CSS styles used to depict the page loader.

EDITED

For jQM 1.1.1 version there are the following configurable options:

loadingMessage string, default: "loading" Set the text that appears when a page is loading. If set to false, the message will not appear at all. loadingMessageTextVisible boolean, default: false Whether the text should be visible when a loading message is shown. The text is always visible for loading errors. loadingMessageTheme string, default: "a" The theme that the loading message box uses when text is visible.

Code example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(document).bind( 'mobileinit', function(){
               $.mobile.loadingMessageTheme = 'e';
               $.mobile.loadingMessageTextVisible = true;
                $.mobile.loadingMessage = "test";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $(document).on("click", ".show-page-loading-msg", function() {          
                $.mobile.showPageLoadingMsg();
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page" class="page-map" style="width:100%; height:100%;">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <button class="show-page-loading-msg">Click</button>
            </div>
        </div>
    </body>
</html>

Furthermore you could try to override the default CSS used to style the jQM loader. More specifically you could modify or override the styles in the section loading screen and the style in the section loading icon which are used to depict the page loader.

You will find here the CSS used in jQM 1.1.1.

/* loading icon */
.ui-icon-loading {
    background: url(images/ajax-loader.gif);
    background-size: 46px 46px;
}

/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }

上一篇：文件拷贝和替换/带root权限的系统目录？权限、文件、目录、系统

下一篇：如何设置一个TreeView控件的背景图片？（VS 2008 / .NET 3.5 / C＃/的WinForms）控件、如何设置、背景图片、TreeView

相关推荐

精彩图集

精彩推荐

图片推荐