jquerymobile试题(jQuery试题)
用jquery mobile开发过网页用在微信里的请进!遇到了一个见鬼的问题
楼上说的很对,jqm默认通过ajax加载页面来改进用户体验,但是微信浏览器对ajax页面只支持收藏。在你的a标签里加上data-ajax="false"来强制使用非ajax方式加载页面,可以解决上述问题。
关于Jquery mobile1.4.3的版本的问题
如果是主题这个比较简单,你下载下来的原文件jquermobile 1.4.3.css里看看有没有其他主题的class就清楚了,我看了下只有a,b两个主题。关于loading
button?class="show-page-loading-msg"?data-textonly="false"?data-textvisible="false"?data-msgtext=""?data-inline="true"Icon?(default)/button
button?class="show-page-loading-msg"?data-textonly="false"?data-textvisible="true"?data-msgtext=""?data-inline="true"Icon?+?text/button
button?class="show-page-loading-msg"?data-textonly="true"?data-textvisible="true"?data-msgtext="Text?only?loader"?data-inline="true"Text?only/button
button?class="hide-page-loading-msg"?data-inline="true"?data-icon="delete"Hide/button
.........................................................
$.mobile.showPageLoadingMsg('a',?'Searching......',?false);这个是以前
$.mobile.loading("show");这个是现在的方法
这是官网的例子
jquery mobile的问题
工具栏(Toolbar)一般用于header,footer和utility bar,他们遍及一个移动页面和程序,所以jQuery Mobile提供了一系列标准的工具栏和导航工具 来涵盖大部分常见情况。
AD:
头结构
header通常是页面顶部包含页面标题文字和可选按钮以及定位到左侧和/或右导航的工具条。
标题文本通常是一个H1标题元素,但它可以使用任何级别的标题(H1 - H6)的,以体现语义的灵活性。 例如,一个页面包含多个 'page '时,可以使用H1表示的‘首页’的标题,H2元素表示二级‘页面’的标题。 默认情况下所有标题级别是相同的风格,以保持视觉上的一致性。
1. div data-role="header"
2. h1页面标题/h1
3. /div
默认 header 的特性
header工具栏默认被设置为'a'主题调板(黑色),但是你可以方便的 设置主题调板.
Back页面标题
看到 "back" 按钮没?框架会自动在每个页面生成该按钮, 以简化创建通用导航条的过程,要阻止header中自动添加该按钮,你可以自行在左边添加按钮 或者为header容器添加 data-backbtn="false" 属性。
添加按钮
在标准header配置中,文本旁边有很多位置可供添加按钮。每个按钮通常都是一个 a标签,但是任何可用的按钮标签都可以添加。 为了节省空间,在工具栏中按钮被设置为inline styling , 所以按钮的宽度会和它所包含了文本、按钮所匹配。
创建自定义后退按钮
如果你对a标记使用data-rel="back"属性,任何在此a上的点击都会模拟后退按钮, 和浏览器的历史按钮一样,并会忽略a标记本身的href。当链接到一个已有页面,比如“主页”, 或者生成后退按钮时或者一个按钮来关闭一个对话框时,该属性十分有用。当在你的源文件中使用此特性时, 请确保提供一个有意义的href来指向引用页的URL(这样才能使得用户在C级浏览器中也能使用该特性)。 同样的,请记住如果你只是想要一个反向过渡而并不实际回到上一页,你应该使用data-direction="reverse"属性来替代。
默认按钮定位
header插件会寻找header容器的直接子元素,并自动设置第一个链接在左边的位置,第二个链接在右边。 在以下的例子中,“取消”按钮会出现在左边而“保存”会出现在右边。
1. div data-role="header" data-position="inline"
2. a href="index.html" data-icon="delete"取消/a
3. h1Edit Contact/h1
4. a href="index.html" data-icon="check"保存/a
5. /div
按钮会自动适应按钮所在工具栏的调板颜色,所以在一个调板为“a”的header bar里一个按钮也会被设置为“a”, 除非你单独设置按钮的 data-theme属性为其他值(例如b)。
1. div data-role="header" data-position="inline"
2. a href="index.html" data-icon="delete"Cancel/a
3. h1Edit Contact/h1
4. a href="index.html" data-icon="check" data-theme="b"Save/a
5. /div
用class控制按钮的位置
按钮位置同样可以用class而不是源代码的顺序来控制。当你想按钮只在右边时就非常有用。为a标记添加ui-btn-left 或者ui-btn-right class来指定按钮的位置。
在以下例子中,我们只在右边添加了一个按钮,所以必须要添加 data-backbtn="false" 来防止出现后退按钮,而右边的按钮则需要添加ui-btn-right class 。
1. div data-role="header" data-position="inline" data-backbtn="false"
2. h1页面标题/h1
3. a href="index.html" data-icon="gear" class="ui-btn-right"选项/a
4. /div
自定义后退按钮的文本
如果您想配置后退按钮的文本,您可以使用 data-back-btn-text="previous" 属性, 或者以编程方式设置插件的选项:$.mobile.page.prototype.options.backBtnText = "previous";。如果你采用编程方式,请在mobileinit事件的处理程序中设置该选项。
自定义 header配置
如果你要创建一个自定义的header,将你自己的标记包裹在一个 div容器中(在header容器中), 插件不会应用自动按钮逻辑,所以你可以编写自定义样式来布局你的header内容。