来自:http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-jquery-mobile.html
下载:
jQuery Mobile 是一款基于 HTML5 的统一用户界面系统,适用于所有常见的移动设备平台,并且构建于可靠的 jQuery 和 jQuery 用户界面基础之上。 其轻型代码构建有渐进增强功能,并采用灵活的主题设计。 与此同时,Adobe Dreamweaver CS6 的特色在于利用简化的工作流程创建 jQuery Mobile 项目。 在本文中,您将使用 Dreamweaver CS6 创建简单的 jQuery Mobile 应用程序。
下面的视频将带您了解 jQuery Mobile 中的这个 Dreamweaver 模板。
在 Dreamweaver 中,只需按照主题(本地)从 Sample>jQuery Mobile 中选择 File > New > Page,最后单击 Create 即可。 当您保存此文件时,Dreamweaver 会创建所有必要文件,包括全部 CSS 和 HTML 标记,以便创建基本的 jQuery Mobile 网站。
移动网站创建完毕后,即可开始自定义 CSS 和 HTML,以便将此项目融入到您的理想体验。 下面的各示例对此模板的某些更先进方面进行了阐释,并为您开始修改更加深入的 jQuery Mobile 框架层面提供了上下文。
jQuery Mobile 框架最优越的一个方面在于其依赖 CSS 进行布局和设计。 由于该框架的核心利用少量 HTML 构建结构,您只需运用少量 CSS 即可修改设计。
在多页实现操作中,您可以对“页面”使用独立 DIV
标记,并可使用列表视图为这些页面创建主页导航。 有关页面结构的详细信息,请参阅可定制的 jQuery Mobile 初学者设计课程 一文。 由于可以从无序列表中创建列表视图,您能够以该列表为目标创建 CSS 规则,并重新定义某些方面,以便为主页创建更大的按钮。
标准的列表视图标记包含一个 data-role
属性(分配给外部<UL>
标记)。 请参阅以下代码:
<ul data-role="listview">
<li>
<a href="#about_us">About Us</a>
...
</li>
</ul>
jQuery 框架运用所谓的注入技术将额外的 CSS 和 HTML 添加至 <UL>
元素,并将上述代码转化为以下代码段。
<ul data-role="listview" class="ui-listview">
<li class="btn_a ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li" data-theme="a">
<div class="ui-btn-inner ui-li" aria-hidden="true">
<div class="ui-btn-text">
<a href="#about_us" class="ui-link-inherit">About Us</a>
...
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">
</span>
</div>
</li>
</ul>
除添加注入<LI>
元素内的 <DIV>
和<SPAN>
元素外,该进程还会在运行时通过 JavaScript 将名为 ui-listview
的类注入<UL>
元素。 这样,您就可以通过 CSS 规则进行定位,也可以借此执行锁定。 最后,将列表视图置于 <DIV>
内,并将 id
设置为 home
。您可以使用以下 CSS 规则名称具体定位主页的列表视图:
#home .ui-listview { }
下图展示了经过重新设计的列表。
您可以借助分配给各 <LI>
的子画面表单 (Sprite Sheet) 和自定义类,调整背景图像的x-position
以便从单一图像创建各图形按钮。 除背景图像外,您还可以为嵌套 <A>
标记分配 padding-top
to the nested <A>
,从而为按钮图形提供垂直空间,如下图所示。
这些 CSS 规则与 HTML 标记相结合,将传统的无序列表转换成基于图标的导航系统。
jQuery Mobile 网站包含在线工具主题创建工具,称作 ThemeRoller。 这是一种基于 Web 的工具,允许您设计配色方案以便与自定义 jQuery 移动网站搭配使用。 jQuery Mobile 框架构建于主题概念基础之上,这是移动网站的预定义外观样式。 每个主题均包含一系列样式组(称作色板),您可以将其应用至整个 jQuery Mobile 页面,也可以仅应用至部分页面。 虽然您可以理所当然地覆盖色板内包含的许多 CSS 规则,但使用 ThemeRoller 创建全新主题会更加有效。
ThemeRoller 在线设计工具允许您创建、修改及保存主题,以便在项目中使用。 在您下载并解压主题后,将文件复制到项目文件夹内,然后链接 CSS。 ThemeRoller网站甚至可以在下载窗口内提供某些 HTML。
如果您从 jQuery Mobile 构建于 jQuery 基础之上这一事实出发思考,我必须指出另一个事实,即您可以运用某些简单脚本向移动网站内添加更多功能。 本教程随附模板,您可以从本文开头的“要求”部分进行下载,其中包括一个简单脚本和一些自定义 HTML,允许您根据此处所含的链接动态调整 Contact Us 页面的内容。 您可以借助单一的 Contact Us 页面,学习如何根据添加至各个链接的 HTML 更改页面信息。
下面的listview
链接包含<A>
标记的另一个属性,称作 data-phone
。 在此代码段中,输入该国家/地区办事处的电话号码。 连同 <a> 标记的链接文本,我们已有足够的信息将自定义数据注入单一的 Contact Us 页面,并为用户提供许多自定义联系人页面体验。
<ul data-role="listview" data-filter="true" data-inset="true" class="countries">
<li><a class="location" href="#contact_us" data-phone="123-456-7891">Albania</a></li>
<li><a class="location" href="#contact_us" data-phone="123-456-7892">Algeria</a></li>
<li><a class="location" href="#contact_us" data-phone="123-456-7893">Argentina</a></li>
…
</ul>
通过挂接至自定义 JavaScript 文件,您可以锁定标记和 jQuery 的诸多层面,进一步操控用户体验。 我在此模板中纳入了一套简单的 jQuery 指令,用以将数据注入 Contact Us 页面,如下图所示。
当用户点按或单击位置列表中的链接时,应用程序便会运用 jQuery 挑选激活的链接,读取自定义属性和链接标签,然后通过这些元素修改 Contact Us 页面元素。 这将给您造成一种能够创建定制 Contact Us 页面的幻觉,而事实上,将数据动态注入的页面与赋予动画前的页面是同一页面。
除布局和页面加载能力外,jQuery Mobile还能够提供大量交互形式增强功能。 您可以运用 HTML 形式的基础标记,将单选按钮和下拉菜单等项目转换为移动友好型用户体验。 更重要的是,DreamweaverInsert Panel 包含大量 jQuery Mobile 相关对象,只需单击一次即可添加到移动网站。
相关推荐
总的来说,jQuery Mobile 中文开发文档提供了详尽的指南,涵盖了从基本概念到高级功能的各个方面,无论您是初学者还是经验丰富的开发者,都能从中受益。通过学习和实践,您可以构建出优雅且功能强大的移动应用。
- 设计和实现主题的各种页面模板,包括首页、文章列表页、文章详情页等。 - **案例研究**: 参考给定的链接,深入了解如何使用jQuery Mobile创建移动WordPress主题。 #### 10. 使用jQuery Mobile来创建网站,第一...
- **丰富的插件支持**:jQuery Mobile本身拥有大量的插件资源,可以方便地集成到模板中,实现更多高级功能。 - **主题定制**:允许开发者通过简单的配置修改颜色方案、字体等外观属性,满足个性化需求。 #### ...
源码部分则可能包含了书中示例代码,包括各种组件的实例和项目模板,这对于读者实践和理解jQuery Mobile的工作原理大有裨益。通过这些源码,读者可以直观地看到如何将书中的理论知识应用到实际开发中,从而提升自己...
1. **单一页面架构(Single-Page Architecture)**:jQuery Mobile 采用单页模板,通过 AJAX 技术加载页面内容,提供平滑的页面过渡效果,从而提升用户体验。 2. **增强呈现(Graceful Enhancement)**:该框架致力...
5. **基本页面模板**:掌握创建基础页面的完整HTML代码,这是构建jQuery Mobile应用的基础。 6. **创建灵活的列结构**:结合媒体查询和“随意顺序的列”方法,设计适应多种设备的响应式布局。 7. **集成谷歌分析**...
这些技巧覆盖了jQuery Mobile开发的各个方面,从基础到高级,从设计到性能优化,全方位提升开发者的技能。结合实际项目实践,不断学习和运用这些技巧,可以打造出更具吸引力和用户体验的移动应用。
《JqueryMobilea4中文手册》是一份专为开发者准备的详尽指南,它涵盖了jQuery Mobile框架的基础到高级应用。jQuery Mobile是一个轻量级、跨平台的JavaScript库,旨在简化移动设备上的网页开发,尤其适合构建触控优化...
另一方面,Kendo UI是一个商业产品,提供了一个完整的JavaScript框架,它不仅包含了jQuery Mobile提供的各种UI组件,还提供了数据源验证、国际化、MVVM框架、主题、模板等高级功能。Kendo UI旨在帮助开发人员创建高...
本书适合有一定基础的中高级Web开发人员阅读,涵盖了从基础到高级的各种jQuery技术,帮助读者深入理解并运用jQuery的核心特性,提高工作效率。 书中首先介绍了jQuery的上下文环境,让读者了解jQuery的特殊性和重要...
其背后的开发涉及到HTML5的语义化标签和高级特性,jQuery Mobile的UI组件和事件处理,以及可能的数据处理和优化技术。这样的应用对于希望在移动环境中快速访问和分析数据的用户而言,是非常有价值的。
Django是用Python编写的高级Web开发框架,遵循MVT(Model-View-Template)设计模式。模型(Model)处理数据模型,视图(View)负责业务逻辑,模板(Template)处理用户界面。Django提供了ORM(Object-Relational Mapping)...
这款库尤其适合移动设备,因为它与jQuery Mobile兼容,能够在手机和平板上流畅运行。 1. **安装与集成** 在项目中使用Nano Gallery,首先需要引入jQuery库和Nano Gallery的CSS及JS文件。你可以从GitHub仓库下载...
jQuery Mobile 是专门为移动设备优化的 jQuery 版本。它提供了许多 UI 组件和插件,用于创建响应式的移动应用界面。 #### 总结 以上总结了 Vue2、jQuery 在前端开发中的一些基础知识点。Vue2 提供了丰富的 API 来...
- **模板与库的应用**:通过使用Dreamweaver CS 5.5提供的模板和库功能,可以快速创建和维护多页网站的一致性。 - **实时视图功能**:该功能允许用户即时预览页面的效果,无需启动浏览器,方便调试和修改。 #### 三...
3. **jQuery Mobile**:MVC4默认包含jQuery Mobile库,帮助开发者快速创建触摸友好的用户界面。 4. **改进的异步处理**:支持异步控制器和操作,利用.NET 4.5中的Task API,提高了I/O密集型操作的性能。 5. **自定义...
jQuery Mobile是一个轻量级的框架,专门用于构建触摸优化的移动Web应用。它简化了跨平台的移动开发,通过统一的事件处理和触控友好的组件,如滑动面板、下拉菜单和表单,提供了良好的用户体验。jQuery Mobile的页面...
【标题】"国外精美网页模板"所提及的知识点主要集中在网页设计领域,特别...总的来说,"国外精美网页模板"不仅涉及视觉设计,还包括前端技术的应用,尤其是jQuery的运用,以及对响应式设计、用户体验和代码质量的追求。