JQuery Mobile【页面（整体），过渡，按钮】

于 2022-07-21 15:55:12 发布
阅读量371 收藏
点赞数
分类专栏： web 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lynntureture/article/details/125907791
版权

JQuery 页面

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page">

    <div data-role="header">
        <h1>欢迎来到我的主页</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>我现在是一个移动端开发者!!</p>
    </div>

    <div data-role="footer">
        <h1>底部文本</h1>
    </div>

</div>
</body>
</html>

  • data-role="page" 是在浏览器中显示的页面。
  • data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
  • data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
  • "ui-content" 类用于在页面添加内边距和外边距。
  • data-role="footer" 用于创建页面底部工具条。
  • 在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等

jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。

 

在页面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。

你可以使用不同的href属性来区分使用同一个唯一id的页面：

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page" id="one">
    <div data-role="header">
        <h1>My Web</h1>
    </div>
    <div data-role="main" class="ui-content">
        <a href="#two">two</a>
    </div>
    <div data-role="footer">
        <h1>buttom</h1>
    </div>
</div>

<div data-role="page" id="two">
    <div data-role="header">
        <h1>Second Web</h1>
    </div>
    <div data-role="main" class="ui-conotent">
        <a href="#one">one</a>
    </div>
    <div data-role="footer">
        <h1>buttom</h1>
    </div>
</div>
</body>
</html>

 当web应用有大量的内容（文本，图片，脚本等）将会严重影响加载时间。

不想使用内页链接可以使用外部文件：

<a href="externalfile.html">访问外部文件</a>

页面作为对话框使用

对话框是用于显示页面信息显示或者表单信息的输入。

在链接中添加data-rel="dialog"让用户点击链接时弹出对话框:

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page" id="one">
    <div data-role="header">
        <h1>My Web</h1>
    </div>

    <div data-role="main" class="ui-content">
        <!--此处的a中的 href的url应该指向带有data-dialog="true"才会有对话框弹出-->
        <a href="#two">welcome</a>
    </div>

    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>

<div data-role="page" data-dialog="true" id="two">
    <div data-role="header">
        <h1>My Web</h1>
    </div>

    <div data-role="main" class="ui-content">
        <a href="#"></a>
    </div>

    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>
</body>
</html>

此处有个可以加以修饰的地方，就是页面切换的形式

 只需要在<a>标签中加入data-transition

例如：

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page" id="one">
    <div data-role="header">
        <h1>My Web</h1>
    </div>

    <div data-role="main" class="ui-content">
        <!--此处的a中的 href的url应该指向带有data-dialog="true"才会有对话框弹出-->
        <a href="#two" data-transition="turn">welcome</a>
    </div>

    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>

<div data-role="page"  id="two">
    <div data-role="header">
        <h1>My Web</h1>
    </div>

    <div data-role="main" class="ui-content">
        <a href="#"></a>
    </div>

    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>
</body>
</html>

JQuery 按钮

在 jQuery Mobile 中，按钮可通过三种方式创建：

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用带有 data-role="button" 的 <a> 元素
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page" id="one">
    <div data-role="header">
        <h1>button test</h1>
    </div>

    <div data-role="main" class="ui-content">
        <!--此处的a中的 href的url应该指向带有data-dialog="true"才会有对话框弹出-->
        <a href="#two" data-role="button">button</a>
    </div>

    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>

<div data-role="page" data-dialog="true" id="two">
    <div data-role="header">
        <h1>My Web</h1>
    </div>

    <div data-role="main" class="ui-content">
        <a href="#"></a>
    </div>

    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>
</body>
</html>

直接用data-role="button"，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。

按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。

内联按钮

默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"：

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page" id="one">
    <div data-role="header">
        <h1>button test</h1>
    </div>

    <div data-role="main" class="ui-content">
        <p>普通按钮</p>
        <a href="#two" class="ui-btn">访问第二个页面</a>
        <p>内联按钮</p>
        <a href="#two" data-role="button" data-inline="true">button</a>
    </div>

    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>

<div data-role="page" data-dialog="true" id="two">
    <div data-role="main" class="ui-content">
        <p>内联按钮 (一个接一个显示):</p>
        <!--class="ui-btn ui-btnn-inline效果一样"-->
        <a href="#one" class="ui-btn ui-btn-inline">返回第一个页面</a>
        <a href="#one" class="ui-btn ui-btn-inline">返回第一个页面</a>
        <a href="#one" class="ui-btn ui-btn-inline">返回第一个页面</a>
    </div>
</div>
</body>
</html>

组合按钮

jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。

请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮：

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
    <div data-role="page" id="one">
        <div data-role="header">
            <h1>组合按钮</h1>
        </div>

        <div data-role="main" class="ui-content">
            <div data-role="controlgroup" data-type="horizontal">
                <p>水平组合按钮：</p>
                <a href="#" class="ui-btn">1</a>
                <a href="#" class="ui-btn">2</a>
                <a href="#" class="ui-btn">3</a>
            </div><br>
        </div>

        <div data-role="controlgroup" data-type="vertical">
            <p>垂直组合按钮 (默认):</p>
            <a href="#" class="ui-btn">按钮 1</a>
            <a href="#" class="ui-btn">按钮 2</a>
            <a href="#" class="ui-btn">按钮 3</a>
        </div>

        <div data-role="footer">
            <h1>底部文本</h1>
        </div>
    </div>
</body>
</html>

默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。

后退按钮

如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）：

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
 <div data-role="page" id="one">
     <div data-role="header">
         <h1>Back Button Test</h1>
     </div>

     <div data-role="main" class="ui-content">
         <a href="#two" class="ui-btn">访问第二个页面</a>
     </div>

     <div data-role="footer">
         <h1>BOTTOM TEXT</h1>
     </div>
 </div>

<div data-role="page" id="two">
    <div data-role="header">
        <h1>返回按钮测试</h1>
    </div>

    <div data-role="main" class="ui-content">
        <a href="#" class="ui-btn" data-rel="back">返回</a>
    </div>
    <div data-role="footer">
        <h1>BOTTOM TEXT</h1>
    </div>
</div>
</body>
</html>

如果你需要使用更多的样式，每个样式类使用空格隔开，如： class="ui-btn ui-bt

添加图标到 jQuery Mobile 按钮

我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。

n-inline ui-btn-corner-all ui-shadow"

默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。

 如果只想显示图标的话，需要在class中添加形如：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">搜索</a>
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page" id="one">
    <div data-role="main" class="ui-content">
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">左边箭头图标</a>
    </div>
</div>
</body>
</html>

定位图标

您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。

请使用 ui-btn-icon 属性来指定位置：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a>

移除圆圈

默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">去掉圆圈</a>

黑色、白色按钮

默认情况下，所有图标都是白色的。 如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">黑色</a>
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<div data-role="page" id="one">
    <div data-role="header"><h1> icon </h1></div>

    <div data-role="main" class="ui-content">
        <p>"搜索" 按钮使用灰色使用圆圈（默认）:</p>
        <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow">使用圆圈</a>

        <p>"搜索" 按钮使用不使用灰色圆圈(class="ui-nodisc-icon"):</p>
        <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-nodisc-icon">不使用灰色圆圈</a>
    </div>
</div>
</body>
</html>

 

-cc- Lynn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery Mobile手机网站案例
weixin_33859665的博客
06-16 4491
jQuery Mobile手机网站案例 一、总结 一句话总结：jQuery Mobile是纯手机框架，和amazeui和bootstrap都可以做手机网站。 1、另一款文本编辑器？ jd编辑器     二、jQuery Mobile手机网站案例     1、index.php 1 &lt;?php 2 include 'common/config....
jQuery Mobile 实例
最新发布
lsx202406的博客
07-10 256
jQuery Mobile 是一个基于 jQuery 的轻量级移动设备友好的开发框架，旨在创建响应式、跨平台的移动应用程序和网站。它提供了一套丰富的用户界面组件和触摸优化事件，使得开发者能够快速构建出适用于各种移动设备的用户界面。本篇文章将通过一系列实例，展示如何使用 jQuery Mobile 来创建美观、功能丰富的移动界面。
jquery mobile页面跳转后js不执行的问题
weixin_30600197的博客
04-10 211
为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。 这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示...
收集一些jQueryMobile的插件和案例 转
weixin_30561177的博客
06-19 132
1，photoswipe网址：http://www.photoswipe.com/demo:http://www.photoswipe.com/latest/examples/04-jquery-mobile.html个人描述：在手机上操作很流畅，能自使用屏幕尺寸，竖屏显示效果很好，横屏图片太大了，也就是列数固定的原因。2，Touch-Gallery网址：http://neteye.g...
基于Jquery的页面过渡效果(原创)
weixin_30405421的博客
07-20 1430
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta content="width=device-width, initial-scale=1.0, m...
15个CSS3和jQuery的超棒页面过渡效果教程
tyygming的专栏
07-31 236
日期：2013-7-31  来源：GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发。通过CSS3和jQuery，设计员和开发者不需要太多的精力或编码，就可以创造出非常 美丽令人叹惊的效果，同时还可以令你快速完成任务。CSS3和jQuery最 大的方便之处在于网上有大量的不同元素效果的展示教程，这一点使得学习新技巧 和创造一些很棒的内容更加轻松。网上有很多页面过渡效...
jquery mobile css3手机表单页面布局按钮样式
11-24
jQuery Mobile 是一个轻量级的框架，专为触摸设备设计，它提供了一套完整的组件和交互模式，包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS规范，引入了许多新的功能和样式效果，为网页设计提供了更多可能性...
jQueryMobile之Helloworld与页面切换的方法
10-24
在页面切换时，jQuery Mobile 使用 AJAX 技术来实现平滑过渡，提供类似原生应用的用户体验。`data-rel="back"` 属性用于返回上一个页面，模拟浏览器的回退功能。 总结一下，jQuery Mobile 提供了一套完整的框架，...
jQueryMobile-HTML5模板
01-26
2. **自动页面导航**：通过数据-URL（data-url）属性和页面容器，jQuery Mobile可以自动管理页面的加载和切换，实现平滑的页面过渡效果。 3. **可定制的主题系统**：jQuery Mobile提供了一套主题引擎，允许开发者...
jquerymobile设计完整例子
05-11
在“jQuery Mobile 设计完整例子”中，我们将深入探讨这个框架的各个方面，包括登录页面的设计、菜单的实现以及菜单间的切换。 1. **登录页面设计** jQuery Mobile 提供了预定义的样式和布局结构，用于创建美观的...
jQuery.Mobile的文档以及Demo
04-26
当页面被加载时，jQuery Mobile 会自动识别并增强页面元素，如表单、按钮、列表等，无需额外的 JavaScript 或 CSS 编写。 4. **主题系统（Theming System）** 提供了可定制的主题颜色，通过简单的数据属性可以...
jQuery实现切换页面过渡动画效果
12-28
直接为大家介绍制作过程，希望大家可以喜欢。 HTML结构 该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进度条。 Page Transition <!-- your content here --> <div class=cd-cover-
HTML5+JQuery Mobile 移动端WebApp案例
11-02
此实例是做HTML5做一个WebApp的demo，案例中使用了一个金融系统原有部分功能转化成移动端页面的例子，案例只用来传播学习。
《jQuery Mobile快速入门》—— 2.1　jQuery Mobile页面模板
weixin_34297704的博客
05-02 315
本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章，第2.1节，作者：【美】Brad Broulik，更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.1　jQuery Mobile页面模板 jQuery Mobile快速入门一个jQuery Mobile页面模板如程序清单2-1所示。在往下讲解之前，我们先来运行一下这个模板。...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框
lht964249279的博客
02-03 845
《JQuery Mobile移动应用开发实战》学习笔记，多为示例代码，在示例中了解JQuery Mobile
jquerymobile实例
路遥知马力
09-25 1582
转自：http://www.oschina.net/question/101738_29271 注册： 登录核心代码： 01 script type="text/javascript"> 02      jQuery(document).ready(function() { 03   
HTML5 经量级框架 jQuery Mobile 视图与页面 - 7.2
Men-DD
05-23 2445
xml:   xmlns:android="http://schemas.android.com/apk/res/android">             android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:layout_x="0.0d
jquery mobile 应用案例
GS2016的博客
03-05 8464
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name=&
快速入门：jQuery Mobile页面构建教程
5. 导航与页面转场：jQuery Mobile的Ajax导航系统允许页面在无需刷新整个应用的情况下进行平滑过渡。通过链接或按钮触发的页面切换，可以实现动画效果，提升用户体验。 6. 主题与自定义样式：jQuery Mobile提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值