加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

使用angularJS的Bootstrap-Tour

发布时间:2020-12-17 17:20:02 所属栏目:安全 来源:网络整理
导读:我目前正在开展一个项目,我必须在页面上显示一个游览. 我看了一下Bootstrap-Tour,看起来并不那么糟糕.我在angluarJS控制器工作.所以我创建一个Tour,添加一些步骤并创建一个按钮,在AngularJS控制器中触发StartTour()函数: var t = new Tour({container: "#ma
我目前正在开展一个项目,我必须在页面上显示一个游览.

我看了一下Bootstrap-Tour,看起来并不那么糟糕.我在angluarJS控制器工作.所以我创建一个Tour,添加一些步骤并创建一个按钮,在AngularJS控制器中触发StartTour()函数:

var t = new Tour({container: "#main",backdrop: false,debug:true,orphan: true
});

t.addStep({
    element: "#content123",title: "Title123",content: "Content123"
});

t.addSteps(
        [
  {
    element: ".message.message-1",// element selector to show the popover next to;
    title: "Welcome to my tour!",content: "We're going to make this quick and useful."
  },{
    element: ".message.message-2",title: "Let's finish this thing off with a bang.",content: "Boom,bang,bam!"
  }
]);
// Initialize method on the Tour class. Get's everything loaded up and ready to go.


$scope.StartTour = function(){
//  t.init();

    t.start(true);
    console.log(t);
    console.log("start!!");
}

我现在面对的是,如果我不打电话给孤儿:当我创建New Tour时,当我点击按钮时没有任何事情发生.我该如何解决这个问题?也许一些Angular人使用这个工具?后来我想把它装在一个指令里面.

解决方法

现在有一个用于Bootstrap Tour的AngularJS包装器:

https://github.com/benmarch/angular-ui-tour

你可以在这里看到现场演示和文档:

http://benmarch.github.io/angular-ui-tour/#/docs

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读