ultima-menu animated with checkoxes

Post Reply
serenne
Posts: 76
Joined: 21 Jul 2015, 07:43

23 Jul 2018, 11:25

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">&#xE5D2;</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

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

27 Jul 2018, 10:14

Hi @serene,

Do you want to open/close the left menu with a checkbox?

serenne
Posts: 76
Joined: 21 Jul 2015, 07:43

02 Aug 2018, 14:51

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 !

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

08 Aug 2018, 08:54

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,

serenne
Posts: 76
Joined: 21 Jul 2015, 07:43

09 Aug 2018, 15:10

Hi Aragron,

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">&#xE5D2;</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>

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests