jquerymobile使用心得.docx

一、 如何使用jquery_mobile1. 添加jquery_mobile脚本添加： 注意：在 HTML5 中 脚本的“type=text/javascript”属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！二、 jQuery Mobile 页面2. 以div为单位data-role=page 是显示在浏览器中的页面data-role=header 创建页面上方的工具栏（常用于标题和搜索按钮）data-role=content 定义页面的内容，比如文本、图像、表单和按钮，等等data-role=footer 创建页面底部的工具栏 提示：1.在这些容器中，可以添加任意 HTML 元素。HTML5中的data-* 属性 用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。3. 以对话框形式打开一个页面转到页面二三、 jQuery Mobile 过渡效果注意：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交：提示：在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 reverse 的 data-direction 属性。在后退按钮上是默认的。四、 jQuery Mobile 按钮jQuery Mobile 中的按钮可通过三种方法创建： 使用 元素 使用 元素 使用 data-role=button 的 元素1.导航按钮如需通过按钮来链接页面，请使用 data-role=button 的 元素：2.行内按钮1. 默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline=true：3.组合按钮请将 data-role=controlgroup 属性与 data-type=horizontal|vertical 一同使用，以规定水平或垂直地组合按钮4.后退按钮如需创建后退按钮，请使用 data-rel=back 属性五、 jQuery Mobile 按钮图标1. 为 jQuery Mobile 按钮添加图标如需向您的按钮添加图标，请使用 data-icon 属性2. 定位图标3. 只显示图标如果只需显示图标，请将 data-iconpos 设置为 notext六、 jQuery Mobile 工具栏1.标题栏页眉通常会包含页眉标题/LOGO 或一到两个按钮（通常是首页、选项或搜索按钮）。您可以在页眉中向左侧或/以及右侧添加按钮。2.定位页眉和页脚(data-position=inline)放置页眉和页脚的方式有三种：Inline - 默认。页眉和页脚与页面内容位于行内。Fixed - 页面和页脚会留在页面顶部和底部。Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through提示：fullscreen 对于照片、图像和视频非常理想。提示：对于 fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。七、 jQuery Mobile 导航栏1 介绍1.导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。2.默认地，导航栏中的链接会自动转换为按钮（无需 data-role=button）。3.请使用 data-role=navbar 属性来定义导航栏：2 活动按钮对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 ui-state-persist 类，以及 ui-btn-active 类八、 jQuery Mobile 可折叠1. 介绍可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建可折叠的内容块，请向某个容器分配 data-role=collapsible 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记（注意：可以嵌套N次）2. 开关可折叠区默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed=false3. 可折叠集合可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。创建若干内容块，然后通过data-role=collapsible-set 用新容器包装这个可折叠块4. 扩展：（1） data-inset=false 可去掉圆角（2） data-mini=true最小化折叠项（3） data-collapsed-icon=arrow-d data-expanded-icon=arrow-u改变折叠项的默认图标九、 jQuery Mobile 网格十、 jQuery Mobile 列表视图jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 () 和无序列表 ()。如需创建列表，请向 或 元素添加 data-role=listview。如需使这些项目可点击，请在每个列表项（）中规定链接1 扩展（1） 如需为列表添加圆角和外边距，请使用 data-inset=true 属性（2） 提示：默认地，列表中的列表项会自动转换为按钮（无需 data-role=button）。（3） 列表分隔：如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 或 元素上设置 data-autodividers=true 属性（4） 搜索列表项在ol 或ul上加data-filter=true（5） 如需修改搜索框的默认文本，请使用 data-filter-placeholder=“sometext”（6） 如需向您的列表添加 16x16px 的图标，请向 元素添加 class=ui-li-icon（7） 图片宽度加上100%，可以自适应屏幕宽度（8） INPUT文本框的data-role=none,可以自