JqueryMobile学习笔记.doc

JqueryMobile笔记1、页面是使用Div设计，Div相应属性 data-role=page 是显示在浏览器中的页面 data-role=header 创建页面上方的工具栏（常用于标题和搜索按钮） data-role=content 定义页面的内容，比如文本、图像、表单和按钮，等等 data-role=footer 创建页面底部的工具栏 把页面设计为对话框来显示 ：data-rel =”dialong”2、响应事件on() 方法绑定事件。事件描述hashchange启用可标记 #hash 历史，哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理。navigate包裹了 hashchange 和 popstate 的事件orientationchange方向改变事件,在用户垂直或者水平旋转移动设备时触发。pagebeforechange在页面切换之前，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。pagebeforecreate页面初始化时，初始化之前触发。pagebeforehide在页面切换后旧页面隐藏之前，触发的事件。pagebeforeload在加载请求发出之前触发pagebeforeshow在页面切换后显示之前，触发的事件。pagechange在页面切换成功后，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。pagechangefailed在页面切换失败时，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发2个事件，切换之前的pagebeforechange事件，和切换完成后pagechange（成功）或者pagechangefailed（失败）。pagecreate在页面创建成功之后，触发的事件,但增强完成之前。pagehide在页面切换后老页面隐藏之后，触发的事件。pageinit在页面页面初始化时，触发的事件。pageload在页面完全加载成功后触发。pageloadfailed如果页面请求失败触发。pageremove在窗口视图从 DOM 中移除外部页面之前触发。pageshow在过渡动画完成后，在到达页面触发。scrollstart当用户开始滚动页面时触发。scrollstop当用户停止滚动页面时触发。swipe当用户在元素上水平滑动时触发。swipeleft当用户从左划过元素超过 30px 时触发。swiperight当用户从右划过元素超过 30px 时触发。tap当用户敲击某元素时触发。taphold当元素敲击某元素并保持一秒时触发。throttledresize启用可标记 #hash 历史记录updatelayout由动态显示/隐藏内容的 jQuery Mobile 组件触发。vclick虚拟化的 click 事件处理器vmousecancel虚拟化的 mousecancel 事件处理器vmousedown虚拟化的 mousedown 事件处理器vmousemove虚拟化的 mousemove 事件处理器vmouseout虚拟化的 mouseout 事件处理器vmouseover虚拟化的 mouseover 事件处理器vmouseup虚拟化的 mouseup 事件处理器3.事件过度data-transition：设置过度效果4、 在 jQuery Mobile 中创建按钮jQuery Mobile 中的按钮可通过三种方法创建：使用 元素使用 元素使用 data-role=button 的 元素5、 导航按钮jQuery Mobile Data 属性 jQuery Mobile 实例 jQuery Mobile 事件jQuery Data 属性jQuery Mobile 使用 HTML5 data-* 属性为移动设备创建“对触摸友好的”美观的外观。在下面的参考列表中，粗体值规定默认值。Button带有 data-role=button 的超链接。工具栏中的按钮元素和链接以及输入字段会被自动设置按钮的样式，无需 data-role=button。Data 属性值描述data-cornerstrue | false规定按钮是否有圆角。data-iconIcons Reference规定按钮的图标。默认是没有图标。data-iconposleft | right | top | bottom | notext规定图标的位置。data-iconshadowtrue | false规定按钮图标是否有阴影。data-inlinetrue | false规定按钮是否是行内的。data-minitrue | false规定按钮是小型的还是常规尺寸的。data-shadowtrue | false规定按钮是否有阴影。data-themeletter (a-z)规定按钮的主题颜色。提示：如需组合多个按钮，请使用带有 data-role=controlgroup 以及 data-type=horizontal|vertical 属性的容器，来规定水平还是垂直组合按钮。Checkboxlabel 和 type=checkbox 的 input 是成对的。会被自动设置为按钮的样式，无需 data-role。Data 属性值描述data-minitrue | false规定复选框是小型的还是常规尺寸的。data-rolenone防止 jQuery Mobile 将复选框设置为按钮的样式。data-themeletter (a-z)规定复选框的主题颜色。提示：如需组合多个复选框，请使用 data-role=controlgroup 以及 data-type=horizontal|vertical，来规定水平还是垂直组合复选框。Collapsible标题元素，其后是位于带有 data-role=collapsible 属性的容器中的任意 HTML 标记。Data 属性值描述data-collapsedtrue | false规定内容是否应该关闭或展开。data-collapsed-iconIcons Reference规定可折叠按钮Collapsible标题元素，其后是位于带有 data-role=collapsible 属性的容器中的任意 HTML 标记。Data 属性值描述data-collapsedtrue | false规定内容是否应该关闭或展开。data-collapsed-iconIcons Reference规定可折叠按钮的图标。默认是 plus。data-content-themeletter (a-z)规定可折叠内容的主题颜色。同时会向可折叠内容添加圆角。data-expanded-iconIcons Reference规定内容被展开时的可折叠按钮的图标。默认是“减号”。data-iconposleft | right | top | bottom规定图标的位置。data-insettrue | false规定可折叠按钮是否拥有圆角和外边距的样式。data-minitrue | false规定可折叠按钮是小型的还是常规尺寸的。data-themeletter (a-z)规定可折叠按钮的主题颜色。Collapsible Set带有 data-role=collapsible-set 属性的容器中的可折叠内容块。Data 属性值描述data-collapsed-iconIcons Reference规定可折叠按钮的图标。默认是“加号”。data-content-themeletter (a-z)规定可折叠内容的主题颜色。data-expanded-iconIcons Reference规定内容被展开时的可折叠按钮的图标。默认是“减号”。data-iconposleft | right | top | bottom | notext规定图标的位置。data-insettrue | false规定 collapsibles 是否拥有圆角和外边距的样式。data-minitrue | false规定可折叠按钮是小型的还是常规尺寸的。data-themeletter (a-z)规定可折叠集合的主题颜色。Content带有 data-role=content 属性的容器。Data 属性值描述data-themeletter (a-z)规定内容的主题颜色。默认是 c。Controlgroup带有 data-role=controlgroup 属性的 or 容器。组合多个按钮样式的单一类型 input（基于链接的按钮、单选按钮、复选框、选择菜单）。Data 属性值描述data-minitrue | false规定组合是小型的还是常规尺寸的。data-typehorizontal | vertical规定组合水平还是垂直显示。Dialogdata-role=dialog 的容器或者 data-rel=dialog 的链接。Data 属性值描述data-close-btn-textsometext规定仅用于对话框的关闭按钮的文本。data-dom-cachetrue | false规定是否为个别页面清除 jQuery DOM 缓存（如果设置 true，则需要注意对 DOM 的管理，并全面测试所有移动设备）。data-overlay-themeletter (a-z)规定对话页面的叠加（背景）色。data-themeletter (a-z)规定对话页的主题颜色。data-titlesometext规定对话页的标题。Enhancement带有 data-enhance=false 或 data-ajax=false 属性的容器。Data 属性值描述data-enhancetrue | false如果设置为 true，, (default) jQuery Mobile 会自动为页面添加样式，使其更适合移动设备。如果设置为 false，则框架不会设置页面的样式。data-ajaxtrue | false规定是否通过 AJAX 来加载页面。注释：data-enhance=false 比如结合 $.mobile.ignoreContentEnabled=true 使用，以阻止 jQuery Mobile 自动添加页面样式。当 $.mobile.ignoreContentEnabled 设置为 true 时，data-ajax=false 的容器中的任何链接或表单元素，将被框架的导航功能忽略。Fieldcontainer包装 label/form 元素对的 data-role=fieldcontain 的容器。Fixed Toolbar带有 data-role=header 或 data-role=footer 属性以及 data-position=fixed 属性的容器。Data 属性值描述data-disable-page-zoomtrue | false规定用户是否有能力缩放页面。data-fullscreentrue | false规定工具栏始终位于顶部以及/或者底部。data-tap-toggletrue | false规定用户是否有能力通过点击/敲击来切换工具栏的可见性。data-transitionslide | fade | none规定当敲击/点击发生时的过渡效果。data-update-page-paddingtrue | false规定当发生 resize、transition 以及 updatelayout 事件时更新页面上下内边距（jQuery Mobile 总是在 pageshow 事件发生时更新内边距）data-visible-on-page-showtrue | false规定在显示父页面时的工具栏可见性。Flip Toggle Switch带有 data-role=slider 属性的一个 元素以及两个 元素。Data 属性值描述data-minitrue | false规定开关是小型的还是常规尺寸的。data-rolenone防止 jQuery Mobile 将切换开关设置为按钮样式。data-themeletter (a-z)规定切换开关的主题颜色。data-track-themeletter (a-z)规定轨道的主题颜色。Footer带有 data-role=footer 属性的容器。Data 属性值描述data-idsometext规定唯一 ID。对于 persistent footers 是必需的。data-positioninline | fixed规定页脚与页面内容是行内关系，还是保留在底部。data-fullscreentrue | false规定页面是否始终位于底部并覆盖页面内容 (slightly see-through)。data-themeletter (a-z)规定页脚的主题颜色。默认是 a。注释：如需启用 fullscreen 定位，请使用 data-position=fixed，然后为该元素添加 data-fullscreen 属性。Headerdata-role=header 的容器。Data 属性值描述data-idsometext规定唯一 ID。对于 persistent headers 是必需的。data-positioninline | fixed规定页眉与页面内容是行内关系，还是保留在顶部。data-fullscreentrue | false规定页面是否始终位于顶部并覆盖页面内容 (slightly see-through)。data-themeletter (a-z)规定页眉的主题颜色。默认是 a。注释：如需启用 fullscreen 定位，请使用 data-position=fixed，然后为该元素添加 data-fullscreen 属性。Link所有链接，包括 data-role=button 的链接以及表单提交按钮。Data 属性值描述data-ajaxtrue | false规定是否通过 AJAX 来加载页面，以改进用户体验和过渡。如果设置为 false，则 jQuery Mobile 将进行普通的页面请求。data-directionreverse反转过渡动画（仅用于页面或对话）data-dom-cachetrue | false规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。data-prefetchtrue | false规定是否把页面预取到 DOM 中，以使其在用户访问时可用。data-relback | dialog | external | popup规定有关链接如何行为的选项。 Back - 在历史记录中向后移动一步。 Dialog - 将页面作为对话来打开，不在历史中记录。 External - 链接到另一域。 opens - 打开弹出窗口。 data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。data-position-toorigin | jQuery selector | window规定弹出框的位置。 Origin - 默认。在打开它的链接上弹出。 jQuery selector - 在指定元素上弹出。 Window - 在窗口屏幕中间弹出。 List带有 data-role=listview 属性的 或 。Data 属性值描述data-autodividerstrue | false规定是否自动分隔列表项。data-count-themeletter (a-z)规定计数泡沫的主题颜色。默认是 c。data-divider-themeletter (a-z)规定列表分隔符的主题颜色。默认是 b。data-filtertrue | false规定是否在列表中添加搜索框。data-filter-placeholdersometext规定搜索框中的文本。默认是 Filter items.。data-filter-themeletter (a-z)规定搜索过滤程序的主题颜色。默认是 c。data-iconIcons Reference规定列表的图标。data-insettrue | false规定是否为列表添加圆角和外边距样式。data-split-iconIcons Reference规定划分按钮的图标。默认是 arrow-r。data-split-themeletter (a-z)规定划分按钮的主题颜色。默认是 b。data-themeletter (a-z)规定列表的主题颜色。List item带有 data-role=listview 属性的 或 中的 。Data 属性值描述data-filtertextsometext规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。data-iconIcons Reference规定列表项的图标。data-rolelist-divider规定列表项的分隔符。data-themeletter (a-z)规定列表项的主题颜色。注释：data-icon 属性仅适用于含有链接的列表项。Navbar带有 data-role=navbar 属性的容器内部的 元素。Data 属性值描述data-iconIcons Reference规定列表项的图标。data-iconposleft | right | top | bottom | notext规定图标的位置。提示：导航栏从其父容器继承 theme-swatch。向导航栏设置 data-theme 属性是不可行的。可以单独向 navbar 中的每个链接设置 data-theme 属性。Page带有 data-role=page 属性的容器。Data 属性值描述data-add-back-btntrue | false自动添加后退按钮，仅用于页眉。data-back-btn-textsometext规定后退按钮的文本。data-back-btn-themeletter (a-z)规定后退按钮的主题颜色。data-close-btn-textletter (a-z)规定对话上的关闭按钮的文本。data-dom-cachetrue | false规定是否清除个别页面的 jQuery DOM 缓存（如果设置为 true，则您需要注意对 DOM 的管理，并全面测试所有移动设备）。data-overlay-themeletter (a-z)规定对话页面的叠加（背景）色。data-themeletter (a-z)规定页面的主题颜色。默认是 c。data-titlesometext规定页面的标题。data-urlurl该值用于更新 URL，而不是用于请求页面。Popup带有 data-role=popup 属性的容器。Data 属性值描述data-cornerstrue | false规定弹出框是否有圆角。data-overlay-themeletter (a-z)规定弹出框的叠加（背景）色。默认是透明背景（none）。data-shadowtrue | false规定弹出框是否有阴影。data-themeletter (a-z)规定弹出框的主题颜色。默认是继承，none 设置为透明。data-tolerance30, 15, 30, 15规定距离窗口边缘 (top, right, bottom, left) 的距离。带有 data-rel=popup 属性的锚：Data 属性值描述data-position-toorigin | jQuery selector | window规定弹出框的位置。 Origin - 默认。弹出框位于打开它的链接上。 jQuery selector - 弹出框位于指定元素上。 Window - 弹出框位于窗口屏幕中央。 data-relpopup用于打开的弹出框。data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。Radio Buttonlabel 与 type=radio 的 input 对。会被自动设置为按钮样式，无需 data-role。Data 属性值描述data-minitrue | false规定按钮是否小型的或者是常规尺寸的。data-rolenone放置 jQuery Mobile 将单选按钮设置为 enhanced buttons 的样式。data-themeletter (a-z)规定单选按钮的主题颜色。提示：如需组合多个单选按钮，请使用 data-role=controlgroup 以及 data-type=horizontal|vertical 来规定水平还是垂直地组合按钮。Select所有 元素。会被自动设置按钮的样式，无需 date-role。Data 属性值描述data-iconIcons Reference规定 select 元素的图标。默认是 arrow-d。data-iconposleft | right | top | bottom | notext规定图标的位置。data-inlinetrue | false规定 select 元素是否是行内。data-minitrue | false规定 select 元素是小型的还是常规尺寸的。data-native-menutrue | false如果设置为 false，则使用 jQuery 自己的自定义选择菜单（如果您希望选择菜单在所有移动设备上拥有一致的外观，则推荐使用）。data-overlay-themeletter (a-z)规定 jQuery 自定义选择菜单的主题颜色（与 data-native-menu=false 一起使用）。data-placeholdertrue | false可以在非原生 select 的 元素上设置。data-rolenone放置 jQuery Mobile 将 select 元素设置为按钮样式。data-themeletter (a-z)规定 select 元素的主题颜色。提示：如需组合多个 select 元素，请使用 data-role=controlgroup 以及 data-type=horizontal|vertical 来规定把该元素水平还是垂直地进行组合。Slidertype=range 的 input 元素。会被自动设置为按钮样式，无需 data-role。Data 属性值描述data-highlighttrue | false规定是否突出显示滑块轨道。data-minitrue | false规定滑块是小型的还是常规尺寸的。data-rolenone放置 jQuery Mobile 将滑块设置按钮的样式。data-themeletter (a-z)规定滑块控件（input、handle 和 track）的主题颜色。data-track-themeletter (a-z)规定滑块轨道的主题颜色。Text input & Textareatype=text|search|etc. 的 input 元素或 textarea 元素。会被自动设置样式，无需 data-role。Data 属性值描述data-minitrue | false规定是否 input 元素是小型的还是常规尺寸的。data-rolenone放置 jQuery Mobile 将 input/textarea 设置问按钮的样式。data-themeletter (a-z)规定输入字段的主题颜色。为 jQuery Mobile 按钮添加图标如需向您的按钮添加图标，请使用 data-icon 属性：搜索提示：您也可以在 或 元素中使用 data-icon 属性。jQuery Mobile 事件参考手册下表列出了所有的 jQuery Mobile 事件。注释：请通过使用 on() 方法来绑定事件。事件描述hashchange启用 bookmarkable #hash 历史记录。navigate针对 hashchange 和 popstate 的 wrapper 事件。orientationchange当用户垂直或水平旋转其移动设备时触发。pagebeforechange在页面变化周期内触发两次：任意页面加载或过渡之前触发一次，接下来在页面成功完成加载后，但是在浏览器历史记录被导航进程修改之前触发。pagebeforecreate当页面即将被初始化，但是在增强开始之前触发。pagebeforehide在过渡动画开始前，在“来源”页面上触发。pagebeforeload在作出任何加载请求之前触发。pagebeforeshow在过渡动画开始前，在“到达”页面上触发。pagechange在 changePage() 请求已完成将页面载入 DOM 并且所有页面过渡动画已完成后触发。pagechangefailed当 changePage() 请求对页面的加载失败时触发。pagecreate当页面已创建，但是增强完成之前触发。pagehide在过渡动画完成后，在“来源”页面触发。pageinit当页面已经初始化并且完成增强时触发。pageload在页面成功加载并插入 DOM 后触发。pageloadfailed如果页面加载请求失败，则触发。pageremove在窗口视图从 DOM 中移除外部页面之前触发。pageshow在过渡动画完成后，在“到达”页面触发。scrollstart当用户开始滚动页面时触发。scrollstop当用户停止滚动页面时触发。swipe当用户在元素上水平滑动时触发。swipeleft当用户从左划过元素超过 30px 时触发。swiperight当用户从右划过元素超过 30px 时触发。tap当用户敲击某元素时触发。taphold当元素敲击某元素并保持一秒时触发。throttledresize启用 bookmarkable #hash 历史记录updatelayout由动态显示/隐藏内容的 jQuery Mobile 组件触发。vclick虚拟化的 click 事件处理器vmousecancel虚拟化的 mousecancel 事件处理器vmousedown虚拟化的 mousedown 事件处理器vmousemove虚拟化的 mousemove 事件处理器vmouseout虚拟化的 mouseout 事件处理器vmouseover虚拟化的 mouseover 事件处理器vmouseup虚拟化的 mouseup 事件处理器显示加载事件$(document).on(pageinit,function(e) /触发 pageinit 事件 - 页面已初始化，DOM 已加载，jQuery Mobile 已完成页面增强。$(document).on(pagebeforeshow, #body, function() /设置显示函数，时间延时setTimeout(function()$.mobile.loading(show);,1); );); $(document).on(pagecreate,function(e)/页面加载完成 $(document).on(pagebeforeshow, #page, function() /设置时间延时2秒 setTimeout(function()$.mobile.loading(hide);,2000); ););在页面内容显示之前显示加载样式，加载完成之后显示页面内容$(document).ready(function(e) $.mobile.loadingMessageTextVisible = true;$.mobile.showPageLoadingMsg(a, 加载中. );$(#page).hide();setTimeout(function()/$.mobile.loading(hide);$.mobile.hidePageLoadingMsg(); $(#page).show();,2000); /$.mobile.hidePageLoadingMsg(););jQuery Mobile动态刷新页面样式分类：ASP.NETHTML52013-01-31 19:157739人阅读评论(4)收藏举报当我们使用Ajax或者javascript动态在页面上添加元素后，如添加select控件的option元素，添加ul的li元素。添加之后我们会发现，它们显示的样式不是jQuery Mobile的炫酷样式了，而变成了很丑陋的元素样式。如下图所示：代码如下：htmlview plaincopy1. 2. functionmyFunction()3. varul=document.getElementById(myul);4. varli1=信息2;5. varli2=信息3;6. ul.innerHTML+=li1;7. ul.innerHTML+=li2;8. 9. 10. 11. 12. 13. 信息列表14. 信息115. 可以看到，jQuery Mobile并没有对于新添加的元素进行渲染。这种情况下就需要对元素的样式进行刷新。刷新代码如下：htmlview plaincopy1. 2. functionmyFunction()3. varul=document.getElementById(myul);4. varli1=信息2;5. varli2=信息3;6. ul.innerHTML+=li1;7. ul.innerHTML+=li2;8. 9. /刷新jQueryMobile样式10. $(#myul).listview(refresh);11. 12. 其实最重要的一句刷新代码是：$(#myul).listview(refresh);刷新后的效果如下图所示：注意：在使用js或者jQuery获取控件（例如：button、checkbox、radiobutton等）的值时，也是需要先刷新，否则无法获取到最新的值。下面列出常用的标签的refresh操作，其他的可以举一反三。1. Listview的refresh操作:$(#mylistid).listview(refresh);2. select menu的refresh操作:var myselect = $(#myselect);myselect0.selectedIndex = 2;myselect.selectmenu(refresh);3. Checkboxes的refresh操作:$(#mycheckboxid).attr(checked,true).checkboxradio(refresh);4. Radio buttons的refresh操作:$(#myradioid).attr(checked,true).checkboxradio(refresh);新加的：来自：/life_to_you/item/bf3621365fa5974b033edcbc各类标签的刷新1.Textarea fields12$(body).prepend();$(#myTextArea).textinput();2.Text input fields12$(body).prepend();$(#myTextField).textinput();3.Buttons12$(body).append(testing);$(#myNewButton).button();4.Combobox or select dropdowns12345678910Country:Wher