首页 > 软件开发 > JQUERY >

jQuery Mobile教程:[3]使用组件

来源:互联网 2023-03-17 00:52:04 449

链接和页面只是移动网页设计中一个很小的部分,APP程序(比如采用Object-C,C#,java等在Android或者IOS设备上创建的本地应用程序)快速增长的同时产生了丰富的控件和组件(例如菜单栏,列表等控件)使得开发者可以很方便地创建复杂的应用程序,这正是许多移动网页开发者第二个巨大的挑战——因为在原生的HTML里面并没有这些控件或者组件。针对这一问题,jQueryMobile当前正在创建一组非常有用的组件。以下是已经发布的组件:y48办公区 - 实用经验教程分享!

  • Pages(页面)y48办公区 - 实用经验教程分享!

  • Dialog boxes(对话框)y48办公区 - 实用经验教程分享!

  • Toolbars(工具栏)y48办公区 - 实用经验教程分享!

  • Buttons(按钮)y48办公区 - 实用经验教程分享!

  • Content formatting(内容格式化)y48办公区 - 实用经验教程分享!

  • Form elements(表单)y48办公区 - 实用经验教程分享!

  • List views(列表)y48办公区 - 实用经验教程分享!

只要你懂的一点点的HTML,你会发现添加这些组件并不困难,接下来我们看几个例子。y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

为页面添加header和footery48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

上面的模版已经为你展示了如何轻松地创建工具栏(header,footer)。我们知道,在不同尺寸的屏幕上创建自适应工具栏通常都是非常难的活儿。而现在,jQueryMobile让你能够非常容易地创建一个带有一个居中标题和两个按钮并且自适应任何屏幕尺寸的header:y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

代码中a标签的顺序决定了按钮显示的位置。以上代码在几乎所有的设备中都能取得一致的显示效果。y48办公区 - 实用经验教程分享!

header和footer同样可以被自定义为你想要的样式,比如改造一个导航条:你可以添加一些按钮在footer里面,从而导航到某一页面的不同部分:y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

从这些代码你可以发现jQueryMobile不过是一些简单的HTML代码,导航条依然是div,而诸如ui-btn-active这个class可以使得你的按钮显示为被选择状态。y48办公区 - 实用经验教程分享!

当你点击一个按钮并导航到该页面的另一个部分时,jQueryMobile会自动加上一个back按钮,以下的代码结构可以清晰地展现这一过程:y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

创建位置固定的header和footery48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

工具条固定在屏幕上方或者下方是一个很常见的界面设计,你可以为footer或者header添加 data-position="fixed"来实现这一点。以下代码会强制footer/header固定在下方/上方:y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

y48办公区 - 实用经验教程分享!

看,现在不使用Objective-C ,你也可以创建一个易用的界面,是不是很不错?y48办公区 - 实用经验教程分享!

超链接|下一篇:

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!y48办公区 - 实用经验教程分享!


标签: JQUERY

办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码