jQuery Mobile提供了一个常用的组件——Loader(加载器),用于显示页面加载进度或者执行异步操作时的提示。textVisible选项是Loader中的一个布尔类型属性,用于控制是否显示加载器的提示文本。
当textVisible为true时,将显示默认的加载文本,内容为“loading…”,并且在加载完成后自动隐藏。当textVisible为false时,将不会显示任何提示文本,只会显示将一直显示加载器,直至手动调用hide方法。
下面是一个示例,演示不同textVisible选项下,Loader的显示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Loader textVisible示例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<script>
$(document).on('pageinit', '#loaderPage', function() {
$(document).on('click', '#btnStart', function () {
$.mobile.loading('show', {
text: '加载中...',
textVisible: true,
theme: 'a',
textonly: false,
html: ''
});
setTimeout(function () {
$.mobile.loading('hide');
}, 3000);
});
});
</script>
</head>
<body>
<div data-role="page" id="loaderPage">
<div data-role="header">
<h1>Loader textVisible示例</h1>
</div>
<div data-role="content">
<p>textVisible为true:</p>
<a href="#loaderPage" data-role="button" id="btnStart">开始显示</a>
<p>textVisible为false:</p>
<a href="#" data-role="button" onclick="$.mobile.loading('show', { theme: 'a', textVisible: false, textonly: false });setTimeout(function() { $.mobile.loading('hide'); }, 3000);">开始显示</a>
</div>
</div>
</body>
</html>
在上面的示例中,我们创建了一个包含两个按钮的页面。第一个按钮用于演示textVisible为true的效果,第二个按钮用于演示textVisible为false的效果。点击按钮后,将显示Loader,并在3s后自动隐藏。
根据上面的代码,我们可以看出,textVisible选项可以在Loader调用时设置,或者在全局配置中设置(将在后面的示例中介绍)。
除了以上示例外,我们还可以通过样式来定制Loader的提示文本,以适应不同风格的应用程序。下面是另一个示例,演示如何通过样式来定制Loader的显示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Loader textVisible示例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<style>
.ui-loader-text-custom {
color: #FFF;
background: rgba(0, 0, 0, .6);
font-weight: bold;
font-size: 18px;
border-radius: 5px;
padding: 20px;
box-shadow: none;
text-shadow: none;
}
</style>
<script>
$(document).on('pageinit', '#loaderPage2', function() {
$(document).on('click', '#btnStart2', function () {
$.mobile.loading('show', {
text: '加载中...',
textVisible: true,
theme: 'a',
textonly: false,
html: '',
classes: {
'ui-loader-text': 'ui-loader-text-custom'
}
});
setTimeout(function () {
$.mobile.loading('hide');
}, 3000);
});
});
</script>
</head>
<body>
<div data-role="page" id="loaderPage2">
<div data-role="header">
<h1>Loader textVisible示例</h1>
</div>
<div data-role="content">
<p>修改Loader提示文本样式:</p>
<a href="#loaderPage2" data-role="button" id="btnStart2">开始显示</a>
</div>
</div>
</body>
</html>
在这个示例中,我们为Loader的提示文本定义了一个名为“ui-loader-text-custom”的自定义样式,并通过classes属性将其应用到Loader的提示文本中。我们还可以通过修改自定义样式来调整Loader的样式,以满足实际需求。