I am trying to display a menu on my page with options like File, Edit, View, etc you would find in a Word document and when you click on the main menu item (File for example), a dropdown pops up with submenu options. I thought this was a basic behavior a lot of the UIs have but I am failing to find examples of doing this via AngularJS. Any suggestions are greatly appreciated. Thanks in advance.
Angular doesn't have any widgets for this built-in. You can either pull in jQuery plug-in or use something like Bootstrap to achieve this.
This example assumes you're using bootstrap 2.3.2 and have already created the functions in the controller:
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">File <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>New</li>
<li>Open</li>
<li>Save</li>
<li>Close</li>
</ul>
</li>
</ul>
Bootstrap 2.3.2
Related
I'm building an app in Angular 1 and have seen that I'm not supposed to interact directly with the DOM, rather I'm supposed to build custom directives to handle that interaction. I'm a bit new to web development in general, so I'm not sure how I would translate the JQuery examples given on the documentation at all of the UI Framework websites I've been looking at. For example, MaterializeCSS uses JQuery to hide and show the side-nav.
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<script>$(".button-collapse").sideNav();</script>
Another example (what I'm currently stuck on) is their modal dialog.
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I have tried to see what's involved with calling the .modal() function from wihtin my controller, but it looks like it's a function that is returned from the JQuery selector. For functions that chain off the JQuery selector, is there no other way to invoke them, other than writing a directive and using JQuery in the directive? Or can I replace the JQuery usage with the element.bind and element.$apply stuff, invoking the UI Framework functions with the built in Angular element object? If not, do I have to worry about any life-cycle management since I'm interacting with the DOM through JQuery? I've read a couple of posts, but none seem to answer my question because they don't address 3rd party functions chained off JQuery.
Angular users are quite blessed with a big community, you can pretty much find a ready made Angular wrapper for every popular Jquery plugins.
By typing MaterializeCSS Angular in Google I found this plugin angular-materialize, it should be easier to integrate into your Angular app than the Jquery version.
If you are interested, you can read into his source code to learn how to wrap particular component into Angular directive, such as sidenav
I'm using a CKEditor to build a html page, when adding certain elements, specifically "" It likes to chew up and discard it as if it was bad code.
Is there anyway to avoid this? It will run the code fine, but as soon as I go back into the editor, it's chewed up.
Code I'm using (HTML):
<div class="nav">
<input type="checkbox" id="nav-toggle"/>
<label for="nav-toggle">≡</label>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>tab 4.. etc</li>
</ul>
<div class="clearfix"></div>
</div>
Are there any tags I can use to incase it that tell the editor not to touch this code?
Appreciate the help!
I'm using scrollspy bootstrap effect. Here is an example http://jsbin.com/huhavejipepi/1/edit?html,css,js
When the user is navigating the site at the top of the page, the scrollspy effect should be disabled . However as you can see from that example, even when the home section isn't showed the link at the top of the bar seems active. Maybe is it a bug? Any workaround is available?
I think there are two or three tricks you can do to avoid the non desired behavior. One of them could be for e.g:
<ul class="nav navbar-nav">
<li>Intro</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
As you can see, you can add a hidden link to the first paragraph. Check here demo to see a working example.
Hope it's useful!
I am working on admin dashboard with html, css and javascripts. This is my first time working on it. I used bootstrap for the responsive layout and some bootstrap js (tabs, collaps). I also use chartjs for pie chart and line chart and sidr responsive menu. But the problem is with bootstrap tab and collaps function. They didn't work properly.When i click on the tab menu tabs are working but don't showing chart content in it. I spent lot of time to fix this. But i can't. I need your help.
Here is the link for the admin dashboard: http://demo.devkinz.com/admindashboard/
You are including the JavaScript, but aren't targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.
Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.
In your code you have:
<ul class="list-inline pull-right" role="tablist">
<li class="active">Usage</li>
<li>Monthly</li>
</ul>
But you have no .tab-pane's with the id's: id="ussgemonth" & id="coletsmonth"
Not only do you have 2 missing .tab-pane with these ids -- since these are nested you have to follow the same structure as the parent.
I am trying to use Twitter Bootstrap to create a website detailing the statistics of Minecraft servers, to make it easy for my users to know which server is online. However, when I use the alert component in Twitter Bootstrap, I cannot dismiss the alert. Here is my code:
<!DOCTYPE html>
<title>Dillon's Minecraft Servers</title>
<ul class="nav nav-tabs">
<li>Home</li>
<li class="active">Vanilla</li>
<li>Feed the Beast</li>
<li>Big Dig</li>
</ul>
<div class="hero-unit">
<h2>Vanilla</h2>
<p>The Vanilla server runs just plain Minecraft. It has some advanced features like Mob Arenas, anti-cheat, and MMO-like leveling.</p>
</div>
<div class="alert">
×
<strong>Warning!</strong> This server is currently offline.
</div>
Never mind. I found my problem. I forgot add the jquery script to the header. Sorry about that.
Have you considered using a <button> rather than an <a>. That's what I did on my Bootstrap page as I was having a similar problem. Doesn't fix that problem but it is a valid way round
<button type="button" class="close" data-dismiss="alert">×</button>
Make sure that jquery.min.js is loaded before button.js!