This SAPUI5 application that I am developing uses a Panel control that has some buttons on it. Now I have to hide those buttons whenever a user collapses the panel and show them back upon expanding. I tried using the getCollapsed() method but to no effect. What I am basically looking for is a collapse event for the panel which is not available by default.
Any helping hand out there?
Thanks.
Hmmm, seems like there are no event handlers for the Panel control indeed...
As a workaround, you could add your own expand/collapse toggle button in the panel tray, and upon clicking that button you could grab the getCollapsed() state and show/hide your other buttons accordingly
You could use the sap.m.Panel https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.Panel.html#event:expand
which has an expanded property and you can just use
setExpanded(true) ;
to expand the panel and let the control retain its state without you having to track it.
I am sure this has all changed since you asked the question and this answer is related to 1.24.2
Perhaps the only solution here is to replace the default collapse icon with a button of your own and attach the press event to it. Like:
1. Declare a `Panel` with `showCollapseIcon` set to false.
var oPanel = new sap.ui.commons.Panel({
showCollapseIcon: false
});
2. Add your own button. I prefer a `lite` button.
var oCollapseButton = new sap.ui.commons.Button({
icon: '<your icon>',
lite: true,
press: function (e) {
if (!oPanel.getCollapsed()) {
//If not collapsed
oPanel.setCollapsed(true);
//Code to hide panel buttons
//(and toggle collapse button image if needed) after this
} else {
//If already collapsed
oPanel.setCollapsed(false);
//Code to show panel buttons
//(and toggle collapse button image if needed) after this
}
}
});
oPanel.addButton(oCollapseButton);
P.S: You might also want to add some styling and alignment to your custom collapse button. For that, you can add a CSS3 class to your button before adding it to the panel like:
oCollapseButton.addStyleClass('<your class>');
Related
Here is the link to the codepen.
https://codepen.io/Cerebros/pen/VwMzdgR
What i am trying to achieve :
Currently when someone clicks on any part of the accordion tab it opens up the dropdown menu which is how it should be .
I would like it so that if someone clicks on the actual name of the accordion tab it would go to that respective page and also open the accordion on that page appropriately.
For example the first tab is Badminton. It has a dropdown of Event Images.
If i click Badminton it will go to the badminton page and also expand the dropdown below it to show the Event Image link.
If i click on Event image it would go to the event images page and keep the Badminton Tab expanded.
The accordion uses checkboxes to open and collapse it so what i tried was adding the following code :
$("#idoflink").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#idofcheckbox").prop("checked", !$("#idofcheckbox").prop("checked"));
});
</script>
What it would do is check if the link is clicked, then for that checkbox it would set the it to checked.
however the prevent Default sets it so that the link cant be clicked.
Any guidance on this would be appreciated.
Thank you,
I have been facing with the above problem in Angular. For mobile device the menu should collapse once it get select any one of them but it doesn't close on click.
Please help me out to get rid from this.
Thanks in advance
Try changing your (click) method, whatever is it called to toggle the variable the toggle is tied to.
menuOpenVariable: any = false;
clickedMenuItem(){
menuOpenVariable = false; // re-close the menu on yor click method.
// do menu things
}
And this should all be linked to your HTML file where the menu 'lives'.
<menu menuOpenVariable>
<menu-item (click)="clickedMenuItem()">item 1</menu-item>
</menu>
When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.
Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it
In my case it was enough to add
e.stopPropagation();
I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.
You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html
You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");
I'm using Twitter Boostraps component collapse to reveal some fields which is done by clicking in another field. However, if I click the same field again the other fields get hidden again (i.e toggling).
What I want is to disable the toggling so that the fields won't hide when clicking the field a second time. Could this be done easily with some built-in methods or do I need to dive deep into the js file to change it myself?
You should be able to do something as simple as..
$('#myDiv').on('hide.bs.collapse', function (e) {
preventDefault(e);
})
This handles the Bootstrap 3 hide.bs.collapse event, and prevents the DIV from being hidden again.
Demo: http://bootply.com/75650
The solution is actually pretty simple and the one marked as correct comes pretty close, here is how you can disable the toggle mechanism:
$('#myDiv').on('hide.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
}).on('show.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
});
Cheers
Chris