`
流浪鱼
  • 浏览: 1682114 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

多页面切换

 
阅读更多

在jquery mobile中一个页面可以有多个容器当做多个不同的页面,他们直接的切换通过<a>元素来切换,并将该元素href设置为#加对应id号

例如:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 应用程序</title>
    <meta name="viewport" content="width=device-width" /> 
    <link  href="Css/jquery.mobile-1.0.1.min.css" 
           rel="Stylesheet" type="text/css" />
    <script src="Js/jquery-1.6.4.js" 
           type="text/javascript"></script>
    <script src="Js/jquery.mobile-1.0.1.js" 
           type="text/javascript"></script>
</head>
<body>
<section id="page1" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>这是首页</p>
      <p><a href="#page2">详细页</a></p>
   </div>
   <footer data-role="footer"><h1>工作室版权所有</h1></footer>
</section>

<section id="page2" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>这是详细页</p>
      <p><a href="#page1">返回首页</a></p>
   </div>
   <footer data-role="footer"><h1>工作室版权所有</h1></footer>
</section>
</body>
</html>

 跳转到外链接(及不在一个页面中,跳转到另外页面)

其实现方式和内链接是一样的,只是在<a>元素中添加rel属性,并将该属性值为“external”表示外链接

<a href="xiangxi.html" rel="external">返回首页</a>

切换的效果只需要加一个data-transition属性

<a href="xiangxi.html" rel="external"  data-transition="pop">返回首页</a>

 

 data-add-back-btn="true"添加返回按钮

div data-role="page" id="w1" data-add-back-btn="true">
  <div data-role="header"><h1>今天天气</h1></div>
  <div data-role="content">
       <p>4~-7℃<br />晴转多云<br />微风</p>
  </div>
  <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
 </div>

 

分享到:
评论

相关推荐

    MFC 多页面切换技术 VS2015 类似QT的StaticView或者ListView的效果

    在MFC(Microsoft Foundation Classes)框架中,创建一个多页面切换的界面并不是一项直截了当的任务,特别是与像Qt这样的框架相比,后者提供了方便的QTabWidget类来轻松实现类似功能。然而,通过一些自定义的技巧和...

    标签(Tabs)实现多页面切换

    **标题:“标签(Tabs)实现多页面切换”** 在网页设计中,标签(Tabs)是一种常见的用户界面元素,用于组织和展示多个相关的但内容独立的部分。这种设计模式允许用户通过点击不同的标签来切换查看不同页面,提高用户...

    多页面切换Swift

    在Swift编程中,实现多页面切换是iOS应用开发中的常见需求。这通常涉及到TabBarController、NavigationController或SegmentedControl等组件的使用,用于构建用户友好的界面导航。在这个"多页面切换Swift"的示例中,...

    同一个界面多窗口或者多页面切换(QStackedWidget)简单示例

    在本示例中,我们将探讨如何利用`QStackedWidget`来创建一个简单的界面多页面切换应用。 首先,我们需要包含必要的头文件并引入`QStackedWidget`类: ```cpp #include ``` 接着,我们创建一个`QStackedWidget`...

    维控触摸屏多页面切换

    【维控触摸屏多页面切换】是工业自动化领域中常用的一种功能,主要用于在触摸屏上实现不同工作状态或操作界面的快速切换。维控(VECON)是一家知名的工控产品制造商,其触摸屏产品因其易用性和稳定性而在行业内受到...

    Android的ViewPager多页面切换动画(仿Launcher)效果

    本教程将详细讲解如何利用ViewPager实现类似Android Launcher和QQ多标签页的页面切换动画。 首先,我们需要了解ViewPager的基本用法。ViewPager继承自 ViewGroup,它能够自动管理其子View的布局和显示,用户可以...

    ViewFlipper+GestureDetector多页面切换

    ViewFlipper是Android SDK提供的一种布局容器,它允许我们在运行时动态地显示、隐藏或切换多个视图(View)。这个组件继承自ViewGroup,可以包含多个子视图,如ImageView、TextView或自定义视图等。通过调用...

    QtDemo.多页面切换自制demo~初学者入门法宝

    【Qt页面切换自制demo】是面向初学者的一个项目,它主要展示了如何在Qt环境中实现多页面(Form)的切换,这对于构建用户界面丰富的应用程序至关重要。Qt是一个跨平台的应用开发框架,广泛应用于桌面、移动和嵌入式...

    ios-标签式顶部导航View,多页面切换.zip

    本项目"ios-标签式顶部导航View,多页面切换.zip"提供了一个实现这种功能的组件——RPTaggedNavView,它具有高度可定制性和灵活的交互性。 首先,让我们深入了解一下RPTaggedNavView的核心特性: 1. **多种属性可...

    安卓欢迎界面引导页面viewpager相关-最简单的多页面切换导航.rar

    本资源“安卓欢迎界面引导页面viewpager相关-最简单的多页面切换导航.rar”聚焦于使用ViewPager实现这一功能。ViewPager是Android SDK中的一个强大组件,它允许用户通过左右滑动来浏览多个页面,非常适合用来构建...

    TabLayout、ViewPager和Fragment实现多页面切换功能

    下面是如何将这三个组件结合使用来实现多页面切换功能的步骤: 1. **创建Fragment子类**:首先,为每个页面创建一个Fragment子类,实现自己的业务逻辑和UI布局。例如,可以创建`Page1Fragment`和`Page2Fragment`。 ...

    android多页面切换大全,8种效果

    1、ViewPager有提供一个接口PageTransformer,ViewPager在做页面切换时(onPageScrolled方法)会调用PageTransformer,来调用我们自定义的特效,逻辑关系如图: 2、动画的实现: 从Android3.1开始,View新增了...

    python利用thinker制作多页面互相切换的代码实例片段

    3. 页面切换: 在Thinker中,你可以通过调用`show_page()`方法来切换到另一个页面。例如,当用户在Page1中点击某个按钮时,可以触发Page2的显示: ```python class Page1(thinker.Page): def on_button_click...

    C#WPF窗体在同一个位置实现不同页面切换

    然后,我们可以在代码-behind或MVVM(Model-View-ViewModel)模式下动态改变Frame的`Source`,以实现页面切换。例如: ```xml xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=...

    MFC下页面切换程序

    在MFC(Microsoft Foundation Classes)框架中,页面切换通常指的是在一个窗口内动态地显示不同的内容区域,这在很多应用程序中都是常见的需求,比如设置对话框或者多面板界面。标题提到的"MFC下页面切换程序"并没有...

    多页面切换.exe

    本人从事自动化行业,最近折腾python,用tkinter实现了一个人机界面。由于使用python做界面开发的非常少,国内使用tkinter的就更少了,开发过程中困难重重,资料很少,官方文档对tkinter描述也是一笔带过,最终实现...

    C# 实现多界面之间切换(WPF)multiWindows.zip

    不过,这种方法通常用于页面(Page)而不是窗口的切换。 4. **使用TabControl或ContentControl** 如果界面切换主要发生在同一窗口内,可以考虑使用TabControl,其中每个Tab项代表一个界面。只需动态改变TabItem的...

    类似微信的页面切换

    总的来说,通过熟练掌握`Fragment`及其与`Activity`的交互,开发者可以构建出类似微信的多页面切换功能,为用户提供更为流畅和直观的移动应用体验。这不仅增强了应用的可用性,也有助于提高用户的满意度。

    Qt5实现多窗口切换

    在本文中,我们将深入探讨如何使用Qt5框架来实现多窗口切换,这在开发复杂的桌面应用程序时非常常见。Qt是一个跨平台的C++图形用户界面应用程序开发框架,它提供了丰富的API和工具,使得构建美观且功能强大的应用变...

    使用Fragment实现页面切换

    通过上述讲解,我们了解到Fragment在实现类似QQ和微信那样的多页面切换中的核心作用。在实际项目中,结合BottomNavigationView、TabLayout+ViewPager等组件,可以灵活地构建出丰富的用户界面,提升用户体验。在开发...

Global site tag (gtag.js) - Google Analytics