jquery mobile的问题

Posted 2023-02-21

jquery mobile框架中data-rel="back",data-direction="reverse"有什么区别，还会再加分数

工具栏（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. <h1>Edit 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. <h1>Edit 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内容。 参考技术A 如果你对a标记使用data-rel="back"属性，任何在此a上的点击都会模拟后退按钮， 和浏览器的历史按钮一样，并会忽略a标记本身的href。当链接到一个已有页面，比如“主页”， 或者生成后退按钮时或者一个按钮来关闭一个对话框时，该属性十分有用。当在你的源文件中使用此特性时， 请确保提供一个有意义的href来指向引用页的URL(这样才能使得用户在C级浏览器中也能使用该特性)。 同样的，请记住如果你只是想要一个反向过渡而并不实际回到上一页，你应该使用data-direction="reverse"属性来替代。追问

这段话，我网上早就看了，最后一句,同样的，请记住如果你只是想要一个反向过渡而并不实际回到上一页，你应该使用data-direction="reverse"属性来替代。 什么意思？

追答

这样说应该更好理解一点：当并不需要实际回到上一页时用data-direction="reverse"属性。也就是接下来要完成的操作还在本页进行。
　　而data-rel="back"，会实际的返回到上一页，最个例子，就像浏览器中的”返回上一页“按钮，它实际是跳转到上一页了。

追问

还是没有懂，有什么东西不需要过渡到上一页，还要本页执行？这功能有什么实际用途吗

追答

比如图片展示，会有上一张图，下一张图按钮吧，这个就不需要跳转页面呀

本回答被提问者采纳