jsf - शामिल किए गए नेविगेशन मेनू में सक्रिय लिंक के रूप में वर्तमान पृष्ठ को हाइलाइट करना




2 Answers

आप निम्नानुसार EL में वर्तमान दृश्य आईडी प्राप्त कर सकते हैं

#{view.viewId}

तो, यह करना चाहिए

class="#{view.viewId eq '/index.xhtml' ? 'active' : ''}"

कुछ List<Page> में उन सभी लिंक को पकड़ना आसान होगा, ताकि आप कुछ ऐसा कर सकें

<li class="nav-header">#{menu.header}</li>
<ui:repeat value="#{menu.pages}" var="page">
    <li class="#{view.viewId eq page.viewId ? 'active' : ''}">
        <h:link value="#{page.title}" outcome="#{page.viewId}" />
    </li>
</ui:repeat>

इसके बजाय कोड का एक ही भाग कॉपी और कॉपी करना

मेरे पास साइडबार में एक स्थिर मेनू है, जिसे मैं हर JSF पृष्ठ में शामिल करता हूं। मेनू ऐसा दिखता है:

  <li class="nav-header">Item 1</li>
  <li class="active"><a href="index.xhtml">Item 2</a></li>
  <li><a href="new_workload.xhtml">Item 3</a></li>
  <li><a href="import_workload.xhtml">Item 4</a></li>

<li> मेनू को हाइलाइट करने के लिए class="active" जोड़ना JSF2 में सुनिश्चित करें कि चयनित आइटम गतिशील रूप से हाइलाइट किया गया है?

मुझे पता है कि प्राइमफैसेस और रिचफेस ने इसके लिए तैयार किए गए घटक तैयार किए हैं, लेकिन मैं पहले शुद्ध जेएसएफ 2 समाधान की कोशिश करना चाहता हूं। एक शुद्ध ग्राहक पक्ष जावास्क्रिप्ट समाधान भी स्वीकार्य है।




मेरा समाधान कस्टम घटक पर आधारित है:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:c="http://java.sun.com/jsp/jstl/core" >
<composite:interface>
    <composite:attribute name="outcome" />
    <composite:attribute name="label" />
</composite:interface>

<composite:implementation>
    <li class="menuItem #{view.viewId == cc.attrs.outcome ? 'active' : ''}">
        <h:outputText value="#{cc.attrs.label}" rendered="#{view.viewId eq cc.attrs.outcome}"/>
        <h:link outcome="#{cc.attrs.outcome}" value="#{cc.attrs.label}" rendered="#{view.viewId ne cc.attrs.outcome}" />
    </li>
</composite:implementation>
</html>

कोड में प्रयुक्त:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:my="http://java.sun.com/jsf/composite/my">
...
<ul class="nav">
     <my:menuItem outcome="/home.xhtml" label="Home" />
</ul>



Related

jsf jsf-2 menu

Tags

jsf   jsf-2   menu