jQuery Mobile提供了许多能够极大简化开发的工具和插件,其中之一就是uiloader插件。uiloader插件提供了一个简单的方式,在页面加载时显示加载中的信息,并在加载完成后自动消失。这个插件可以让你的应用程序看起来更加专业,给用户带来更好的体验。
//使用uiloader插件 $(document).on({ ajaxStart: function() { $.mobile.loading('show'); },//在请求开始时显示加载中的图标 ajaxStop: function() { $.mobile.loading('hide'); } //在请求完成时隐藏加载中的图标 });
上面的代码展示了如何使用uiloader插件来在页面加载期间显示加载中的消息。我们首先用jQuery选择器指定了文档元素,并在document上配置了一个事件句柄。在这里,我们为ajaxStart和ajaxStop事件绑定了两个函数。这两个函数用来显示或隐藏加载中的消息。当发起一个Ajax请求时,ajaxStart事件将会被调用,显示加载中的消息。当 Ajax 请求返回时,ajaxStop 将会被调用,隐藏加载中的消息。
你可以通过设置一个选项将uiloader插件自定义的外观和样式应用于应用程序。以下是一些例子:
//使用默认样式的uiloader $.mobile.loading('show'); //使用自定义的样式 $.mobile.loading( "show", { text: "加载中...", textVisible: true, theme: "b", html: "" });
如上所示,你可以使用text选项来创建自定义文本消息。textVisible选项控制文本消息是否可见,而html选项允许你添加自定义 HTML 内容,以及其他自定义选项。这些选项可以帮助你创建类似于 AJAX 时期的经典加载符号的效果,例如旋转圆圈。