`
wmhcymx
  • 浏览: 21218 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jquery mobile navbar列表appendTo追加选项

阅读更多
第一种
$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>");
    $("#navbar").navbar();});
第二种
var footer = $("#footer-id");var navBar = $("div",{"data-role":"navbar","html":"<ul><li><a href='#'>Test Styling</a></li></ul>"}).appendTo(footer).navbar();
第三种
$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>").trigger('create');});

html代码:
<divdata-role="header"><h1id="title">App</h1></div><!-- /header --><divdata-role="content"id="content"><p>Loading...</p></div><!-- /content --><divdata-role="footer"data-position="fixed"><divdata-role="navbar"id="navbar"><ulid="menu"></ul></div></div><!-- /footer --></div>
分享到:
评论

相关推荐

    jquerymobile设计完整例子

    jQuery Mobile 的`&lt;div data-role="navbar"&gt;`元素是创建固定顶部或底部导航栏的理想选择。每个导航项可以通过`&lt;a&gt;`标签来创建,并通过`href`属性链接到相应的页面。此外,`data-icon`属性可以添加图标,提升用户体验...

    JQueryMobile UI 汇总

    **jQuery Mobile UI 概述** jQuery Mobile 是一个用于构建响应式和触摸友好的网页应用的框架,它基于 jQuery 和 jQuery UI。这个框架专门设计用来优化在各种设备,包括智能手机、平板电脑和桌面电脑上的表现,使得...

    jqmDemo,jQuery Mobile

    jQuery Mobile中的主要组件包括导航栏(navbar)、页面容器(page)、表单(forms)、下拉菜单(select menus)、滑块(sliders)、按钮(buttons)、网格(grids)和可扩展的内容区域(collapsible content)。...

    jQuery Mobile 架包

    **jQuery Mobile 框架详解** jQuery Mobile 是一个流行的前端框架,专为移动设备上的Web应用程序设计,尤其适合HTML5技术的开发。它提供了一套完整的UI组件、交互效果和优化策略,使得开发者能够轻松创建功能丰富的...

    jquery mobile快速入门(含源码)

    《jQuery Mobile快速入门》是一本面向初学者的指南,旨在帮助读者快速掌握使用jQuery Mobile进行移动Web应用开发的技能。jQuery Mobile是一个强大的、基于HTML5的框架,它为创建响应式、触摸友好的用户界面提供了...

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

    《jQuery Mobile:构建优雅移动端界面的深度探索》 在当今移动设备盛行的时代,为手机和平板电脑设计用户友好的交互界面至关重要。jQuery Mobile作为一个强大的框架,致力于简化移动应用和网站的开发过程,提供了...

    jQuery mobile多种样式的导航

    jQuery Mobile的基础导航栏(Navbar)是一种简单而有效的布局元素,可以包含一系列链接按钮。基础的导航栏可以通过以下HTML代码创建: ```html &lt;div data-role="navbar"&gt; &lt;li&gt;&lt;a href="#" data-icon="home"&gt;首页...

    jquery.mobile demo.zip

    "jquery.mobile demo.zip"这个压缩包包含的是jQuery Mobile的两个版本——"jquery.mobile-1.3.0"和"jquery.mobile-1.4.5",这两个版本代表了jQuery Mobile框架在2013年和2014年的稳定迭代。 **jQuery Mobile的核心...

    jquery mobile demo

    3. **导航栏(Navbar)**:用于在页面内或页面间提供导航选项。 4. **可折叠面板(Collapsible)**:用于展示可扩展/折叠的内容块。 5. **列表视图(Listview)**:增强标准 HTML 列表,提供分组、筛选、多选等...

    jquery mobile 餐厅实例

    **jQuery Mobile 餐厅实例详解** jQuery Mobile 是一个轻量级、触控优化的前端框架,用于构建响应式和移动设备友好的Web应用程序。它基于jQuery库,提供了丰富的组件和设计模式,使得开发者能够快速地创建具有统一...

    jQueryMobile 1.0.6开发Api

    jQuery Mobile 的配置选项允许开发者自定义框架的行为,以满足特定项目的需求。一些关键的配置选项包括: 1. **`pageLoadSuccess`**:这是一个全局事件,当页面加载成功时触发。开发者可以使用这个事件来执行页面...

    JQuery Mobile权威指南+附书源码+中文api

    **jQuery Mobile 知识点详解** **一、jQuery Mobile 概述** jQuery Mobile 是一个用于构建响应式网页和移动应用的框架,它基于 jQuery 库,专注于提供一致且易用的用户界面,适用于多种设备,包括智能手机、平板...

    jquery.mobile-1.3.2

    《jQuery Mobile 1.3.2:打造移动Web应用的利器》 jQuery Mobile 是一个专为触摸设备设计的前端框架,旨在简化移动Web应用程序的开发。这个框架是jQuery项目的一部分,它提供了一套完整的UI组件和交互效果,使得...

    JqueryMobile.zip

    这个压缩包“JqueryMobile.zip”包含了构建 jQuery Mobile 应用所需的三个核心文件:`jquerymobile.css`, `jquerymobile.js`, 和 `jquery.js`。 首先,我们来详细了解一下 `jquery.js`。这是 jQuery 的核心库,提供...

    jqueryMobile 教程+手册+实例

    jQuery Mobile 是一个轻量级、触控优化的 JavaScript 框架,专为移动设备上的网页应用设计。它使得开发者可以轻松地创建响应式、跨平台的网页应用,支持多种移动浏览器,包括 iOS、Android、Windows Phone 等。本...

    jquery mobile手册

    1. **导航栏(Navbar)**: 创建包含多个选项的顶部导航条,可以设置为水平或垂直布局。 2. **按钮(Buttons)**: 包括普通按钮、提交按钮、链接按钮等,支持多种样式和状态(如禁用、图标按钮)。 3. **工具提示...

    jQuery mobile带图片的导航

    基础的导航栏在jQuery Mobile中通常由`&lt;div data-role="navbar"&gt;`元素定义,里面包含一组`&lt;a&gt;`链接元素,这些链接代表导航中的各个选项。为了添加图片,我们可以将图片作为`&lt;a&gt;`元素的背景图像,或者直接嵌入`&lt;img&gt;`...

    jQuery Mobile类库

    此外,jQuery Mobile 提供了导航栏(navbar)、工具栏(toolbar)、可折叠面板(collapsible)和弹出对话框(popup)等高级组件,帮助构建复杂的布局。比如,`&lt;div data-role="navbar"&gt;` 可以创建一个包含多个按钮的...

    jquery.mobile.tabs 文件

    **jQuery Mobile 的 Tabs 组件详解** `jQuery.mobile.tabs` 是基于 jQuery 和 jQuery Mobile 框架的一个组件,它专门用于创建响应式的标签页界面。在移动应用开发中,这种组件非常常见,因为它能够有效地组织和展示...

    jQuery.Mobile的文档以及Demo

    当页面被加载时,jQuery Mobile 会自动识别并增强页面元素,如表单、按钮、列表等,无需额外的 JavaScript 或 CSS 编写。 4. **主题系统(Theming System)** 提供了可定制的主题颜色,通过简单的数据属性可以...

Global site tag (gtag.js) - Google Analytics