I'm trying to use JQuery UI Accordion for a multi-level menu, like a Superfish menu, but with vertial accordion presentation instead. For example:
Home
Products
product category 1
product category 2
The 'main menu' level items are linked to the corresponding page, so in this example, 'products' is linked to the 'products' page. In the accordion menu, if you click the '+' to open the 'products' menu, the 'products' link is activated and you are taken to the 'products' page.
This seems wrong to me. The '+' should open the menu, but not activate the link. A user should have to click on the 'products' link itself to activate it.
Is there a configuration option or jQuery function I can use to trigger different actions for the link and the '+'?
Thanks for helping.
It's a matter of event bubbling.
I don't use jQuery UI but I give you an example:
<span class="himg"></span>
<script>
$('a').click(function(){menuclick(this)})
$('span').click(function(){menuclick($(this).parent());return false})
</script>
Demo:
http://jsfiddle.net/keszlercsaba/qqwPS/
Give a try.
Related
I use AngularJS ui-router in my application and I have a mainPage where I can navigate to a subPage over clicking an icon at the main page.
If I am at subpage than main menu item is marked as active - this works fine.
But If I click at the main menu to get back to the main page where I came from than the menu item is deactivated (the active color is disappeared)
Here is my menu list item:
<li ng-class="{'active': vm.state.includes('auth.subPageReachedByIconOnPage')}" ui-sref="auth.mainPage" ui-sref-active="active"><a>Main Page Menu Text</a></li>
Is there any possibility to solve my issue?
Your ng-class and ui-sref-active attributes override each other. For example, if your current state is 'auth.subPageReachedByIconOnPage' ng-class will add active class to your li tag. If your state is 'auth.mainPage', ui-sref-active will add active class to your tag, but ng-class will override this changes and remove this class, because statement vm.state.includes('auth.subPageReachedByIconOnPage') returns false.
I see at least two ways to solve this issue:
1) Combine your statements for adding active class into one statement. To achieve this you should remove your ui-sref-active attribute and add additional statement to your ng-class. Something like this:
<li ng-class="{'active': vm.state.includes('auth.subPageReachedByIconOnPage') || vm.state.includes('auth.mainPage')}" ui-sref="auth.mainPage"><a>Main Page Menu Text</a></li>
Example on plunker.
2) The second way is refactoring of your states in the app. You can move your 'subPageReachedByIconOnPage' under 'auth.mainPage' state. After that you can remove your ng-class attribute at all. Because ui-sref-active will add class active if user is on auth.mainPage or auth.mainPage.subPageReachedByIconOnPage. But I don't know anything about your application, so it can be not so easy to implement in your case.
I'm testing angled-navbar:
http://codepen.io/m-e-conroy/pen/bcEsA
The problem is simple: when I try to programatically call a dropdown menu's 'toggle' action from where-ever, the dropdown cannot be opened anymore. Simple to reproduce:
run the codepen
set chrome console to the "codepen index.html" iframe
click on the left-most dropdown to expand it
Finally, while expanded, run in the console:
$('nav li[ng-repeat="menu in menus"]:first-child').dropdown('toggle');
Result: the dropdown closes, but now any click on it will not open it. This does not happen with "bare" bootstrap3 navbars, but it does happen with the angled-navbar impl.
any idea how to get the 'toggle' to work?
After hours of headbanging, I finally found the solution: I need to call the 'toggle' action on the TOP LEVEL ANCHOR inside the dropdown menu - NOT on the dropdown menu 'li' tag itself:
$('nav li[ng-repeat="menu in menus"]:first-child > a').dropdown('toggle');
After the dropdown closes, it can be opened again! Narf.
My Angular app teaches kids how to cook. The main screen of the app is a kitchen.
On the left, the user can select a food category of the ingredient they want to add. Then, in the next column, they can select the specific food.
So for example, if they want to see all the spices, they click "Spices" and then drag the exact spice into the pot.
My question is, how can I get the "Spices" button to be highlighted while it is in use?
I've seen some similar questions but they are all related to routing. This is not related to routing (i.e. the page is not changing)
Use ng-class to toggle some sort of 'selected' class based on what is unique about your data when you click on that particular menu item. It could look something like this:
<a ng-click="items = spices" ng-class="{selected: (items === spices)}">Spices</a>
Then you just need to create a style for your .selected items.
I've a ext js tab panel defined with some tabs.
On the same page I've a menu of hyper links for asking user which tab to open.
I want open the selected tab when the user clicks the link.
Basically when u click on the tab header to open the tab, I want exact same thing to happen on clicking some button/hyperlink.
Seems like a pretty normal thing, but I can't find the solution anywhere!!
Please help.
thanks
ues setActiveTab( newItem ) method of tabpanel.You can pass an ID, index or the component itself as newItem.
Is there a way to add a custom button to the action section of the apex:enhancedlist?
Thanks
Frank
Frank,
To my knowledge you cannot create an <apex:commandbutton> from which you can invoke controller actions, however you can create a 'Custom Buttons and Links' style button from the setup menu. If you go to the Custom Buttons and Links section for the sObject that you are feeding to the type attribute of your enchanced list, you can create a button whose display type is 'List Button'. Then it will show up on any enhanced list component of that sObject type. As I mentioned, you can't invoke a controller action, but you can navigate to an arbitrary URL, display a Visualforce page, or run arbitrary javascript that way. Hope that help you.