I'm using twitter bootstrap's CSS to create a standard bootstrap navbar and then calling Dropdown.use(); which makes the navbar work automagically.
When I re-size the page or view it on mobile, the navbar displays this menu button which does nothing when you click on it.
How would I go about wiring this menu button with dquery / bootjack to display a menu as show in this example:
(PS, loving bootjack, thanks to everyone who worked on it!!!)
To clarify, I do not want to include jquery and bootstrap js to make it work, my whole dart app including 400+ files (images, html, dart, less, etc) is under 400kB and adding those js libraries will make the app explode in size. I'm merely looking for the mechanism that bootstrap is using to make that menu button work so that I can rewrite it in dart / dquery / bootjack or if there's already a bootjack mechanism that can do it, how to use it.
Update, some code as requested:
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();
...
}
