I'm building a sidenavigation bar for my dashboard and in the process of building it, found a good tutorial which has built something similar. I'm planning to use this as a base work and will customise it afterwards. In the tutorial, the dynamic things have been handled using Jquery. Since I'm using Angularjs for my development, I want to do it Angular way. Can anyone please explain me how can I accomplish it.
Following is the link to tutorial.
Code snippets:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
How can I convert it to do line Angular way ?
Thanks
Replace this bind event with a View/Controller mapping
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
In the view
<div id="menu-toggle" ng-click="toggleClass"></div>
Then in your angular controller
$scope.toggleClass = function(){
angular.element('#wrapper').toggleClass('toggled')
};
You can do the same for this one
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
initMenu can be triggered in your main controller, just replace the $ with angular.element
If there are no old browser compatibility requirement, you should start using CSS3 class for transition instead of JS due to css perf vs js perf
function initMenu() {
angular.element('#menu ul').hide();
angular.element('#menu ul').children('.current').parent().show();
}
initMenu();
For the $('#menu li a').click() event, same, use the View/Controller mapping
Related
I'm trying to make buttons in a side-bar navigation (using the bootstrap framewrk) close or collapse onclick.
If you follow the link below to see a working template you'll see what I mean - the left hand column has a button called "ShortCut" which if clicked allows a dropdown of other links which works great....
However....I'd like it so that when it is clicked again it closes and reverts to as it was originally...
http://seegatesite.com/bootstrap/simple_sidebar_menu.html
My thoughts are that it is something to do with javascript which is below:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
The line below must be able to do what I am trying to do - I just cant figure it out...thanks for all help...
$('#menu li a').click(
nav-pills is only a css style that doesn't have a js actions.
Perhaps you're confused.
.
Possibly you can use Accordion(http://getbootstrap.com/javascript/#collapse-example-accordion) with nav-pill styling,
or use jquery .slideUp() and .slideDown() to get it done manually.
http://api.jquery.com/slideup/
http://api.jquery.com/slidedown/
.
The code you provided uses following part to collapse/open
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
I could be misunderstanding your question, but you can always hide a pill by removing the "active" class.
$('#item').removeClass('active');
I want to build a tree using bootstrap like the one in the link http://jsfiddle.net/jhfrench/GpdgF/
I've manage to close all tree branches by adding the following line in script
$('.tree li').hide();
$('.tree li:second').show();
but this isn't what i want.
I want to close some branches of the tree and open others:
here is the script i use:
<script>
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
</script>
-i have some ideas how to make this work, but i have no idea how to implement it
my idea is to ad an attribut to a tag in html and in javascript to read that attribute and all of its children to hide
P.S also i would appreciate if you have an idea how to close a hole level of children not just one
After a long search and try-error methods , i've manage to find a solution for closing at a custom level of children
here is the solution for lvl 3 children
$('.tree li>ul>li>ul').hide();
$('.tree li:first').show();
I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle
When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$('#nav .is-open').removeClass('is-open').hide();
$(this).removeClass('active');
}
});
It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?
If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
}
});
Check this Fiddle
I'm not that good with js. How do I get this to work with hoverIntent?
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
return false;
});
I have try searching around, but just not too sure how to do it. It's basically working now with hover. but how do I add in .hoverIntent into the code.
This is the Fiddle.
I can't just change .hover to .hoverIntent right?
For hoverIntend, see jQuery plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
(You just have to download the minified version and import it to your application: http://cherne.net/brian/resources/jquery.hoverIntent.minified.js).
Here the jsFiddle: http://jsfiddle.net/Fmu8Y/1/
Also a helpful link: Delay jquery hover event?
$(document).ready(function () {
$('#nav > li > a').hoverIntent(function(){
if (!$(this).hasClass('active')){
$('#nav li ul').slideUp(800);
$(this).next().slideToggle(800);
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
}, function() {
if ($(this).hasClass('active')){
$(this).next().slideUp(800);
$(this).removeClass('active');
}
});
return false;
});
I have some code that uses jquery:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
And I converted it to use mootools
window.addEvent('domready', function() {
$$('#tabs div').hide();
$$('#tabs div:first').show();
$$('#tabs ul li:first').addClass('active');
$$('#tabs ul li a').addEvent('click', function(event) {
$$('#tabs ul li').removeClass('active');
$$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$$('#tabs div').hide();
$$(currentTab).show();
return false;
});
});
But I get an error: $$(this).parent is not a function
How do I fix it?
this is quite poor. many bad practices and api differences.
window.addEvent('domready', function() {
// cache what we will reuse into vars
var tabs = document.id('tabs'),
divs = tabs.getElements('div'),
// for loop
len = divs.length,
ii = 1;
// hide all but the first one w/o extra lookups.
for (;ii < len;++ii)
divs[ii].hide();
// first match
tabs.getElement('ul li').addClass('active');
// attach the events to all links
tabs.getElements('ul li a').addEvent('click', function(event) {
event && event.stop();
tabs.getElement('ul li').removeClass('active');
this.getParent().addClass('active');
tabs.getElement(this.get('href')).show();
return false;
});
});
basically, a few practices you need to consider:
cache your selectors, esp repetitive stuff
avoid going to dom and work from memory
use normal js array looping or methods to avoid an extra selector like :first or :last, you already have the data
stop the event directly, don't return false
.getElement() will return the first match
avoid storing stuff into variables that you won't reuse
consider using event delegation and attaching a click handler once to the ul rather than to all child A's - eg, tabs.getElement('ul').addEvent('click:relay(li a)', fn) will achieve the same but only create a single event handler
there is no parent method in mootools, instead, the method name is getParent.it is not difficulty to convert from jquery to mootools. it is helpful having a look on docs.