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

jQuery Mobile头部标题

 
阅读更多

定位按钮位置

在头部栏中,如果只放置一个链接按钮,不论放置在标题的左侧还是右侧,其最终显示在标题的左侧。如果需要改变位置,需要添加新的类别属性 class="ui-btn-right"或class="ui-btn-left"

 <div data-role="page" id="e1">
    <div data-role="header" data-position="inline">
	   <h1>图片</h1>
	   <a href="#e2" data-icon="arrow-r" class="ui-btn-right">下一张</a>
    </div>
  <div data-role="content">
    <span class="img-spn"><img src="Images/2009年作品.jpg" /></span>
  </div>
  <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
 </div>
 
 <div data-role="page" id="e2">
   <div data-role="header" data-position="inline">
	   <a href="#e1" data-add-back-btn="false" 
	      data-icon="arrow-l" class="ui-btn-left">上一张</a>
	   <h1>图片</h1>
    </div>
  <div data-role="content">
    <span class="img-spn"><img src="Images/2008年作品.jpg" /></span>
  </div>
  <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
 </div>

 

分享到:
评论

相关推荐

    jQuery Mobile 快速入门

    访问 jQuery Mobile 官方网站 (https://jquerymobile.com/),在下载页面中可以选择适合项目的版本进行下载。 **使用 npm 安装:** 如果你的项目已经集成了 npm,可以直接使用以下命令来安装 jQuery Mobile: ```...

    JQUERYMOBILE 提示框

    **jQuery Mobile 提示框详解** 在移动应用开发中,用户界面的交互性和反馈至关重要,而提示框(对话框)正是实现这一目标的关键组件。jQuery Mobile,作为一款强大的前端框架,为开发者提供了简单易用的提示框功能...

    使用jQuery Mobile快速开发手机站点

    【标题】"使用jQuery Mobile快速开发手机站点"揭示了如何利用jQuery Mobile这一强大的前端框架来构建适应移动设备的Web应用。jQuery Mobile是一个轻量级、跨平台的框架,专为触摸优化的移动设备设计,提供了丰富的UI...

    jquerymobile制作的各种漂亮界面源代码

    例如,使用`&lt;div data-role="header"&gt;`定义头部,添加`&lt;h1&gt;`标签设置标题,再用`&lt;a&gt;`标签创建返回按钮,通过`data-icon`属性选择图标样式。 页面布局方面,jQuery Mobile提供了几种预定义的布局模式,如单列、两列...

    jqueryMobile 教程+手册+实例

    - **工具条(Footer and Header)**:`&lt;div data-role="header"&gt;` 和 `&lt;div data-role="footer"&gt;` 可创建页面的头部和尾部,可包含链接、标题和按钮。 - **页面标题**:页面标题通过设置 `&lt;h1&gt;` 至 `&lt;h6&gt;` 标签并...

    jQuery Mobile 面板

    jQuery Mobile 面板 jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。 通过向指定 id 的 元素添加 data-role=”panel” 属性来创建面板。 在 中添加 HTML 标记来显示你的面板内容: 面板标题.. 文本内容.. ...

    Jquery+Mobile源码实列演示

    1. **页面结构**:`jQuery Mobile`依赖于特定的HTML5标签来构建页面结构,如`&lt;div data-role="page"&gt;`表示一个页面,`&lt;div data-role="header"&gt;`和`&lt;div data-role="footer"&gt;`分别代表页面头部和底部。 2. **导航和...

    jquery mobile 1.3中文API

    标题容器用于定义页面或对话框的头部区域,通常包含页面标题和导航按钮。 ##### 6.5 页脚容器 页脚容器用于定义页面或对话框的底部区域,可以放置版权信息、链接或按钮。 ##### 6.6 导航 导航组件用于在页面之间...

    JQuery mobile

    4. **工具栏(Toolbars)**:分为头部(header)、尾部(footer),用于展示应用的标题、导航链接和操作按钮。 5. **网格(Grids)**:用于创建响应式布局,适应不同屏幕尺寸。 6. **下拉菜单(Listviews)**:支持...

    jquery mobile快速入门 例子

    2. **头部**:通常包含在`&lt;div data-role="header"&gt;`内,可以添加标题、返回按钮等。 3. **主体**:内容区域,使用`&lt;div data-role="content"&gt;`包裹。 4. **尾部**:使用`&lt;div data-role="footer"&gt;`定义,常用于放置...

    jquerymobile中文文档

    **jQuery Mobile 中文文档概述** jQuery Mobile 是一个用于构建响应式和触摸友好的网页应用的框架,它基于 jQuery 库,特别适合开发跨平台的移动Web应用。这个框架旨在简化移动设备上的网页开发,提供一套统一的...

    jQuery移动开发(jQuery Mobile)

    - 工具栏包括头部工具栏 `&lt;header&gt;` 和尾部工具栏 `&lt;footer&gt;`,用于放置页面标题、按钮等。 3. **其他组件**: - jQuery Mobile 提供了一系列内置组件,如按钮、输入框、滑块等,可以通过简单的 HTML 标记和 data-...

    jquery mobile快速入门

    - 访问官方网站 (http://jquerymobile.com/) 或其他可靠的源站点下载 jQuery Mobile 的最新版本。 - 如果没有给出具体的下载链接,则可以访问官方网站获取正确的下载链接。 2. **引入必要的文件**: - 在 HTML ...

    jQuery Mobile

    1. **引入 jQuery 和 jQuery Mobile 库**:在 HTML 文件头部通过 `&lt;script&gt;` 标签加载 jQuery 和 jQuery Mobile 的 JS 文件。 2. **定义页面结构**:使用符合 jQuery Mobile 规范的 HTML 结构来定义页面布局和元素。...

    jqueryMobile入门资料合集

    2. **工具栏(header, footer)**:提供页面头部和尾部的结构,包含标题、按钮和导航栏等元素。 3. **表单(forms)**:JQM对表单元素进行了增强,支持多种输入类型(如日期、时间、滑块)以及表单验证。 4. **...

    jQuery Mobile权威指南.pdf )

    - **工具栏(Toolbar)**:包括头部和底部工具栏,可用于放置导航按钮和标题等。 - **列表视图(List View)**:展示项目列表,支持多种样式。 - **滑块(Slider)**和**进度条(Progress Bar)**:交互式控件,常用于进度...

    jQuery移动开发(jQuery.Mobile)

    要开始使用 jQuery Mobile 创建应用程序,首先需要在 HTML 文件头部引入 jQuery 和 jQuery Mobile 的 CSS/JS 文件。接下来,可以使用 jQuery Mobile 提供的各种类来创建页面布局、按钮、表单等元素。例如: ```html...

    jQuery Mobile中文手册

    - **组件**:介绍jQuery Mobile中常用的UI组件,包括页面、模态对话框、工具条、标题容器、页脚容器、导航、按钮、表单应用、列表应用等。 - **页面**:解释如何使用jQuery Mobile创建动态页面,并通过数据属性控制...

    jQueryMobile雅虎新闻

    ### 基于jQuery Mobile的雅虎新闻应用详解 #### 一、项目概述与功能特点 本项目是一款基于jQuery Mobile框架构建的雅虎新闻阅读应用,主要针对移动设备设计,旨在提供一种轻量级的新闻浏览体验。通过利用jQuery ...

Global site tag (gtag.js) - Google Analytics