5

为了澄清，有两页：

  1. index.html （在弹出窗口上的下一步按钮的帮助下，我从这个页面遍历到下面提到的第二页）

  2. product_detail.html （如果我想使用 prev 按钮返回 index.html，则从此页面关闭弹出窗口并且没有任何反应）

custom.js 的内容：

var tour = new Tour({
    storage : false,
  steps: [
  {
    element: "#ture-one",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-two",
     title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-three",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-four",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    path:"/a/agile_new/product_detail.html",
    element: "#ture-five",
    title: "",
    placement: "left",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {

    element: "#ture-six",
    title: "",
    placement: "left",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
  },
  {

    element: "#ture-seven",
    title: "",
    placement: "right",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {

    element: "#ture-eight",
    title: "",
    placement: "right",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"       
  }
]});


tour.init();

tour.start();
4

3 回答 3

2

根据http://bootstraptour.com/api/看起来有一个选项可以在每个步骤中添加路径。您只在最后一步定义了路径。尝试在每个步骤上添加附加属性。

path: "/"

我直接从他们如何进行演示之旅中获取了这段代码。请注意，他们为每个步骤指定了一个路径。

steps: [
  {
    path: "/",
    element: "#demo",
    placement: "bottom",
    title: "Welcome to Bootstrap Tour!",
    content: "Introduce new users to your product by walking them through it step by step."
  }, {
    path: "/",
    element: "#usage",
    placement: "top",
    title: "A super simple setup",
    content: "Easy is better, right? The tour is up and running with just a few options and steps."
  }, {
    path: "/",
    element: "#license",
    placement: "top",
    title: "Best of all, it's free!",
    content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
  }, {
    path: "/api",
    element: "#options",
    placement: "top",
    title: "Flexibilty and expressiveness",
    content: "There are more options for those who want to get on the dark side.<br>\nPower to the people!",
    reflex: true
  }, {
    path: "/api",
    element: "#duration",
    placement: "top",
    title: "Automagically expiring step",
    content: "A new addition: make your tour (or step) completely automatic. You set the duration, Bootstrap\nTour does the rest. For instance, this step will disappear in <em>5</em> seconds.",
    duration: 5000
  }, {
    path: "/api",
    element: "#methods",
    placement: "top",
    title: "A new shiny Backdrop option",
    content: "If you need to highlight the current step's element, activate the backdrop and you won't lose\nthe focus anymore!",
    backdrop: true
  }, {
    path: "/api",
    element: "#reflex",
    placement: "bottom",
    title: "Reflex mode",
    content: "Reflex mode is enabled, click on the text in the cell to continue!",
    reflex: true
  }, {
    path: "/api",
    title: "And support for orphan steps",
    content: "If you activate the orphan property, the step(s) are shown centered in the page, and you can\nforget to specify element and placement!",
    orphan: true,
    onHidden: function() {
      return window.location.assign("/");
    }
  }
]

您还可以为步骤提供大量不同的选项。注意上面的最后一步。onHidden: ，它可以把你带到你喜欢的任何地方。在这种情况下，回家。“/”

path: "",
  element: "",
  placement: "right",
  title: "",
  content: "",
  next: 0,
  prev: 0,
  animation: true,
  container: "body",
  backdrop: false,
  redirect: true,
  reflex: false,
  orphan: false,
  template: "",
  onShow: function (tour) {},
  onShown: function (tour) {},
  onHide: function (tour) {},
  onHidden: function (tour) {},
  onNext: function (tour) {},
  onPrev: function (tour) {},
  onPause: function (tour) {},
  onResume: function (tour) {}

我希望这可以帮助你。

于 2014-04-09T13:54:19.267 回答
2

请查看更新的脚本文件...它在我这边工作正常

$(function () {

    var tour = new Tour({

        steps: [
        {
            element: "#ture-one",
            title: "s",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration:5000
        },
        {
            element: "#ture-two",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 6000
        },
        {
            element: "#ture-three",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 7000
        },
        {
            path:"/index.html",
            element: "#ture-four",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 7000
        },
      {
          path:"/product.html",
          element: "#ture-five",
          title: "",
          placement: "left",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
          duration: 7000
      },
      {

          element: "#ture-six",
          title: "",
          placement: "left",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
          duration: 7000
      },
      {

          element: "#ture-seven",
          title: "",
          placement: "right",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
      },
      {

          element: "#ture-eight",
          title: "",
          placement: "right",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"       
      }
        ]});


    tour.init();

    tour.start();
});
于 2014-04-09T14:03:12.197 回答
1

有一种“奇怪”的做法。我不是 bootstrap tour 的用户，但你可以推送到历史吗？

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html")

或使用 localStorage 存储用户的最后一页

于 2014-04-09T13:42:25.757 回答