Question

如何使用滑动效果制作带有角度的标签栏或导航栏。我可以在jQuery mobile中制作。这是我的小提琴 http://jsfiddle.net/ezanker/o9foej5L/1/

当我在角度使用相同的东西时它不起作用我需要在角度js中做同样的事情。你能告诉我如何在角度js中实现这一点

Plunker：http://plnkr.co/edit/ornYCV15uV8lPNL1ujPL?p=preview

<html>

<head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css"/>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"/>

    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
<style>
    .tab {
        background: black;
        border-bottom: 1px solid #fb7923;
    }
    .tab button {
        border-width: 0px !important;
    }
</style>
<body>
<div class="btn-group btn-group-justified tab">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Tab1</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Tab2</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Tab3</button>
    </div>
</div>

<div id="owl-demo" class="owl-carousel owl-theme">
    <div id="fragment-1" class="item">
        <p>This is the content of the tab 'One', with the id fragment-1.</p>
    </div>
    <div id="fragment-2" class="item">
        <p>This is the content of the tab 'Two', with the id fragment-2.</p>
    </div>
    <div id="fragment-3" class="item">
        <p>This is the content of the tab 'Three', with the id fragment-3.</p>
    </div>
</div>
</body>
<script>
    $(function(){
        $("#owl-demo").owlCarousel({
            navigation : false, // Show next and prev buttons
            pagination : false, //hide pagination dots
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true,
            afterMove: function(){
                var owl = $("#owl-demo").data('owlCarousel');
                $(".tabBtn").removeClass("ui-btn-active").eq(owl.currentItem).addClass("ui-btn-active");
            }
        });
    })
</script>
</html>

任何更新......？

如何在角度js中制作带滑动效果的标签栏？

0 个答案: