文章/答案/技术大牛

发布

社区首页 >问答首页 >在bootjack中使用引导导航条

问在bootjack中使用引导导航条
EN

Stack Overflow用户

提问于 2015-05-18 08:49:54

回答 1查看 191关注 0票数 1

我使用twitter引导程序的CSS创建一个标准引导肚脐，然后调用Dropdown.use();，这使导航条自动工作。

当我调整页面的大小或在手机上查看它时，导航栏会显示这个菜单按钮，当你点击它时它什么也不做。

如何将此菜单按钮与dquery / bootjack连接，以显示本例中显示的菜单：

(PS，爱bootjack，感谢每一个致力于它的人！！)

为了澄清，我不想包含jquery和引导js来使其工作，我的整个省道应用程序(包括400+文件(图片、html、dart、less等)都在400 to以下，添加那些js库将使应用程序的大小激增。我只是在寻找引导程序用来使菜单按钮工作的机制，这样我就可以用dart / dquery / bootjack重写它，或者如果已经有了bootjack机制，如何使用它。

更新，一些被请求的代码：

pubspec.yaml：

....
environment:
  sdk: '>=1.0.0 <2.0.0'
dependencies:
  bootjack_datepicker: any
  less_dart: any
  bootjack: any
  browser: any
  http: any
transformers:
- $dart2js:
    commandLineOptions: [--enable-experimental-mirrors]
- less_dart:
    entry_point: web/styles/main.less
    build_mode: dart

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ....
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">My Application</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">


                <li>
                    <a class="dropdown-toggle" data-toggle="dropdown">Item<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#itemss-list">Items</a></li>
                        <li><a href="#foo-bar">Foo Bar</a></li>
                        <li class="divider"></li>
                        <li>
                            <a href="#item-create">
                                <span class="glyphicon glyphicon-plus"></span>
                                Create Item
                            </a>
                        </li>
                    </ul>
                </li>
        ...

    <script type="application/dart" src="main.dart"></script>
    <script data-pub-inline src="packages/browser/dart.js"></script>
</body>
</html>

main.less：

@import 'web/styles/bootstrap/bootstrap.less';
@import 'web/styles/bootjack-calendar/calendar.less';

@media screen {

  body {
    background: #FEFEFE;
  }

  ...

}

main.dart：

import 'dart:html';
import 'pages/pages.dart';
import 'dart:convert' show JSON;
import 'package:dquery/dquery.dart';
import 'package:bootjack/bootjack.dart';
import 'package:bootjack_datepicker/bootjack_datepicker.dart';

...

void main() {

    ...

    // enable bootjack functionality
    Transition.use();
    Calendar.use();
    Dropdown.use();
    Modal.use();

    ...

}

twitter-bootstrap

dart

bootjack

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-05-24 12:28:20

在查看了几次工作导航栏上的类之后，我意识到它非常简单--在类中添加/输出使导航条在移动视图中弹出。

ButtonElement navbarToggle = querySelector("button.navbar-toggle");
navbarToggle.onClick.listen((e){
    DivElement menu = querySelector("div.navbar-collapse");
    if (menu.classes.contains("in")){
        menu.classes
            ..remove("in")
            ..add("out");
    } else if (menu.classes.contains("out")){
        menu.classes
            ..remove("out")
            ..add("in");
    }
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30298745

复制

相似问题

问在bootjack中使用引导导航条
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在bootjack中使用引导导航条EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在bootjack中使用引导导航条
EN