Hi Aragorn,
I was looking for a solution to keep a menu with chexboses open to allow the user to check/uncheck more tna one item at a time.
My menu in in the topbar-right :
<a id="topbar-menu-button" href="#"> <i class="material-icons"></i></a>
<ul class="topbar-items fadeInDown animated" >
and I use
<ul class="ultima-menu animated">
<li role="menuitem">
and a form with a panelGrid
Do you think it is possible, or should I move to another solution ?
Kindest regards
ultima-menu animated with checkoxes
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi @serene,
Do you want to open/close the left menu with a checkbox?
Do you want to open/close the left menu with a checkbox?
Github Profile: https://github.com/mertsincan
Hi Aragorn,
I think I didn't explain well (or I do not understand your ...)
What I have today id
____________________________________________________________________
(topbar) My Icon (<i class="topbar-icon material-icons">visibility</i>)
___________________________________________________________________
| checbox 1 | My menu : <ul class="ultima-menu animated">
| checbox 2 | with N <li>, each of them containing a panelGrid with a checkox and the label
| .... |
________________
My problem : each time I check or uncheck one of these checkbox, the menu is collapsed. I would like to keep it open, to check and/or uncheck many items without having to reopen it before any single operation (not user friendly : check one checkbox, click again on the icon to reopen, uncheck another one, click again click again on the icon to reopen, ..... ). One solution for me would be to change and use a popup window
instead of the menu, but the idea of the menu is visually more attractive !
I think I didn't explain well (or I do not understand your ...)
What I have today id
____________________________________________________________________
(topbar) My Icon (<i class="topbar-icon material-icons">visibility</i>)
___________________________________________________________________
| checbox 1 | My menu : <ul class="ultima-menu animated">
| checbox 2 | with N <li>, each of them containing a panelGrid with a checkox and the label
| .... |
________________
My problem : each time I check or uncheck one of these checkbox, the menu is collapsed. I would like to keep it open, to check and/or uncheck many items without having to reopen it before any single operation (not user friendly : check one checkbox, click again on the icon to reopen, uncheck another one, click again click again on the icon to reopen, ..... ). One solution for me would be to change and use a popup window
instead of the menu, but the idea of the menu is visually more attractive !
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi @serenne,
I think you need to override the $(document.body).off('click').on('click', function() { ...} event in line 293. You can add a debugger in this method to check this issue. Also, could you please attach your xhtml page for us?
Best Regards,
I think you need to override the $(document.body).off('click').on('click', function() { ...} event in line 293. You can add a debugger in this method to check this issue. Also, could you please attach your xhtml page for us?
Best Regards,
Github Profile: https://github.com/mertsincan
Hi Aragron,
The complete code of the topbar.xhtml is (chaged from the topbar.xhtml of the sapmle site of Ultima)
The complete code of the topbar.xhtml is (chaged from the topbar.xhtml of the sapmle site of Ultima)
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:pu="http://primefaces.org/ultima">
<style>
.layout-wrapper .topbar .logo {
height: 40px;
}
.title {
margin-right: 100px;
font-size: 3em;
margin-top: 10px;
color: white;
}
</style>
<div class="topbar clearfix">
<div class="topbar-left" style="padding-top:10px;">
<div class="logo" style="background: none">
<p:graphicImage value="#{appBean.image}">
<f:param name="filename" value="images/logo.png" />
</p:graphicImage>
</div>
</div>
<div class="topbar-right">
<a id="menu-button" href="#"> <i></i>
</a>
<h:outputText value="#{localeManagerBean.getMessage('L-AppTitle')}"
style="color:white; font-size: 20px; position: relative; top: 8px;" />
<a id="topbar-menu-button" href="#"> <i class="material-icons"></i></a>
<c:if test="#{habilitationsBean.isUserMonoModule() == false and habilitationsBean.isPageModuleInterest()}">
<ul class="topbar-items fadeInDown animated" >
<li >
<a href="#">
<i class="topbar-icon material-icons">visibility</i>
<span class="topbar-badge animated rubberBand">#{habilitationsBean.userMonoModule ?1:2}</span> <span class="topbar-item-name">Notifications</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem"><h:form>
<h:panelGrid columns="2" cellpadding="5"
<p:selectBooleanCheckbox value="#{habilitationsBean.epiModuleInterest}" valueChangeListener="#{habilitationsBean.changeEpiModuleInterest}">
<p:ajax event="change" update=":dashboardP,:formRow2,:formRow32,:formRow33,:formAcqAla" />
</p:selectBooleanCheckbox>
<i class="material-icons">perm_identity</i>
<span>#{localeManagerBean.getMessage('L-ReferentielEpiMonitoring')}</span>
</h:panelGrid>
</h:form></li>
<li role="menuitem"><h:form>
<h:panelGrid columns="2" cellpadding="5"
<p:selectBooleanCheckbox value="#{habilitationsBean.eqpModuleInterest}" valueChangeListener="#{habilitationsBean.changeEqpModuleInterest}">
<p:ajax event="change" update=":dashboardP,:formRow2,:formRow32,:formRow33,:formAcqAla" />
</p:selectBooleanCheckbox>
<i class="material-icons">build</i>
<span>#{localeManagerBean.getMessage('L-ReferentielEpqMonitoring')}</span>
</h:panelGrid>
</h:form></li>
</ul></li>
</ul>
</c:if>
</div>
</div>
</ui:composition>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 10 guests