index.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. $(function() {
  2. var $demo, duration, remaining, tour;
  3. $demo = $("#demo");
  4. tour = new Tour({
  5. onStart: function() {
  6. return $demo.addClass("disabled", true);
  7. },
  8. onEnd: function() {
  9. return $demo.removeClass("disabled", true);
  10. },
  11. debug: true
  12. });
  13. duration = 5000;
  14. remaining = duration;
  15. tour.addSteps([
  16. {
  17. element: "#demo",
  18. placement: "bottom",
  19. title: "Welcome to Bootstrap Tour!",
  20. content: "Introduce new users to your product by walking them through it step by step.\nBuilt on the awesome\n<a href='http://twitter.github.com/bootstrap' target='_blank'>Bootstrap from Twitter.</a>"
  21. }, {
  22. element: "#usage",
  23. placement: "top",
  24. title: "A super simple setup",
  25. content: "Easy is better, right? Easy like Bootstrap. The tour is up and running with just a few options and steps."
  26. }, {
  27. element: "#options",
  28. placement: "top",
  29. title: "Flexibilty and expressiveness",
  30. content: "There are more options for those who want to get on the dark side.<br>\nPower to the people!",
  31. reflex: true
  32. }, {
  33. element: "#duration",
  34. placement: "top",
  35. title: "Automagically expiring step",
  36. 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.",
  37. duration: 5000
  38. }, {
  39. element: "#methods",
  40. placement: "top",
  41. title: "A new shiny Backdrop option",
  42. content: "If you need to highlight the current step's element, activate the backdrop and you won't lose\nthe focus anymore!",
  43. backdrop: true
  44. }, {
  45. title: "And support for orphan steps",
  46. 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!",
  47. orphan: true
  48. }, {
  49. path: "/",
  50. element: "#reflex",
  51. placement: "bottom",
  52. title: "Reflex mode",
  53. content: "Reflex mode is enabled, click on the page heading to continue!",
  54. reflex: true
  55. }, {
  56. path: "/page.html",
  57. element: "h1",
  58. placement: "bottom",
  59. title: "See, you are not restricted to only one page",
  60. content: "Well, nothing to see here. Click next to go back to the index page."
  61. }, {
  62. path: "/",
  63. element: "#license",
  64. placement: "top",
  65. title: "Best of all, it's free!",
  66. content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
  67. }, {
  68. element: ".navbar-nav > li:last",
  69. placement: "bottom",
  70. title: "Fixed position",
  71. content: "Works well for fixed positioned elements! :)"
  72. }
  73. ]);
  74. tour.init();
  75. tour.start();
  76. if (tour.ended()) {
  77. $('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert();
  78. }
  79. $(document).on("click", "[data-demo]", function(e) {
  80. e.preventDefault();
  81. if ($(this).hasClass("disabled")) {
  82. return;
  83. }
  84. tour.restart();
  85. return $(".alert").alert("close");
  86. });
  87. $("html").smoothScroll();
  88. return $(".gravatar").each(function() {
  89. var $this, email;
  90. $this = $(this);
  91. email = md5($this.data("email"));
  92. return $(this).attr("src", "http://www.gravatar.com/avatar/" + email + "?s=60");
  93. });
  94. });