I have simple application in zf2, I have menu in layout which is for each page of application. e.g., provinces/index.phtml, districts/index.phtml, cities/index.phtml etc.
Menu is:
<li class="start active ">
<a href="admin">
<i class="fa fa-home"></i>
<span class="title">
Dashboard
</span>
<span class="selected">
</span>
</a>
</li>
<li>
<a href="provinces">
<i class="fa fa-globe"></i>
<span class="title">
Provinces
</span>
</a>
</li>
<li>
<a href="districts">
<i class="fa fa-map-marker"></i>
<span class="title">
Districts
</span>
</a>
</li>
<li>
<a href="cities">
<i class="fa fa-tint"></i>
<span class="title">
Cities
</span>
</a>
</li>
I have code:
<div class="page-content-wrapper">
<?php echo $this->content; ?> <!--this print contents of index.phtml -->
</div>
which access each page in the same layout.
Now I want to make menu dynamically, i.e., when provinces is selected then provinces should highlighted, if districts is selected then districts in menu should be highlighted.
I tried the logic like below:
In provinces/index.phtml I write the code $selected_page="provinces", in districts/index.phtml I write the code $selected_page="districts" etc
Then in menu in layout:
I write class="start active" >
same is for districts and provinces etc.
But here variable $selected_page can not accessed, because
<?php echo $this->content; ?>
can only print and display content of index.phtml, and variable is not passed to layout.
So how should I do this? how should I pass variable $current_page to layout, or show me other logic about it.
Thanks in advance:
screenshot is given below with Dashboard highlighted:
If you want to pass variable from controller/action (for example provincesAction()) to view. Use layout() controller plugin:
public function provincesAction()
{
$this->layout()->setVariable('foo', 'bar');
return new ViewModel([]);
}
In layout.phtml
// html code
<?php echo $this->foo; ?> // It will display "bar"
// more html code
But for your example. I would suggest you to use navigation() view helper. Read more on https://framework.zend.com/manual/2.4/en/modules/zend.navigation.view.helper.menu.html. This plugin is made just for such things like you need.
Related
I am using a sidebar using HTMLTemplateProcessor
<nav id="sidebar">
<h1>Side</h1>
<ul class="list-unstyled components mb-5">
<li class="active">
<span class="fa fa-home"></span> Home
</li>
<li>
<span class="fa fa-user"></span>
{%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}
</li>
<li>
<span class="fa fa-sticky-note"></span> Reports
</li>
<li>
<span class="fa fa-cogs"></span> Tools
</li>
<li>
<span class="fa fa-paper-plane"></span> Contacts
</li>
</ul>
</nav>
The {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%} is the TIWLink reference part, but how do I put the span class (for the logo of link) correctly like the sidebar template.
Now it look something like this because can't put the span class into the rendered <a> tag for {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}.
In my Thymeleaf + Spring Boot project, I have a sidebar that has href link to part of sidebar (see code below). The problem it wouldn't 'uncollapse' when click on it. If I change it to href to outside (ie. www.yahoo.com) it works. With thymeleaf, how do I get the href link to part of page to work? Appreciate the help!
<li>
<a data-toggle="collapse" href="#myLinks">
<i class="material-icons">image</i>
<p> Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="myLinks">
<ul class="nav">
<li>
<a th:href="#{http://www.yahoo.com}">
<span class="sidebar-mini"> Y </span>
<span class="sidebar-normal"> Yahoo </span>
</a>
</li>
</ul>
</div>
</li>
I'm working on a view. The view has a dropdown menu and i want to add other fields to the view, depending on the index i selected in the dropdown.
http://abload.de/image.php?img=unbenanntcajcc.png
at ... i want to show other stuff like textfields. (i'm using bootstrap for styling)
thats the code:
<div class="col-md-4">
<div style="height: 452px; overflow: auto">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select a Filter <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>First name</li>
<li>Last name</li>
<li>Occupation</li>
<li>Location: Birth</li>
<li>Location: Marriage</li>
<li>Location: Death</li>
<li>Location: Burial</li>
<li>Time: Birth</li>
<li>Time: Marriage</li>
<li>Time: Death</li>
<li>Time: Burial</li>
<li>Relatives </li>
</ul>
</div>
<br />
...
<br />
<button type="button" class="btn btn-success">+</button>
<br />
<br />
<button type="button" class="btn btn-default">Add filter</button>
</div>
You want something like this:
add classes to your different anchor tags in the dropdown menu like so:
<ul class="dropdown-menu" role="menu">
<li><a class="firstname" href="#">First name</a></li>
</ul>
<div class="stuffIwanttoadd"></div>
Then in a javascript file have something like:
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
and do that for each element of the list (you should wrap the javascript in a function to make this easier).
EDIT: to get the javascript to run you'll need to attach it to the page, this means registering it in a window.onpageload event (or something like that) assuming you are using turbolinks you're going to want to do that like this:
var initFunc = function() {
// everything you want to attach to the dom goes in initFunc
$("a.firstname").click(function(event) {
event.preventDefault();
$("div.stuffIwanttoadd").innerHTML="<p>Here is some stuff I want to add</p>";
});
};
$(document).ready(initFunc);
$(window).bind('page:change', initFunc);
I want to show a view with 2 listview like this:
But when I implement by Kendo UI Mobile with:
<div id="cptTab" data-role="view" data-title="Billing" data-layout="billing-layout">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">CPT</span>
<a data-align="left" data-role="button" href="#censusmainTab">Census</a>
<a data-align="right" data-role="button" data-click="onNavigateToAddCpt">+</a>
</div>
</header>
<div>
Patient:
<label>
<input readonly="true" class="PatientNameLabel" />
</label>
</div>
<div>NEW CPT's</div>
<ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" />
<div>PREVIOUS CPT's</div>
<ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" />
</div>
But it display like this, it's missing 2nd listview (Previous listview):
Please let me know if I did something wrong or it's a bug of Kendo UI Mobile.
Thanks
You could use
<ul data-role="listview" data-type="group" id="ListView" data-click="onItemClicked"/>
to create two group, the first for new CPT's and the second for previous CPT's.
The function onItemClicked should change its behaviour according to which group is clicked.
see the documentation for better details
Try this code
<ul data-role="listview" data-style="inset" data-type="group">
<li>NEW CPT's
<ul>
<li>
<a> 1 st item in 1st list view </a>
</li>
</ul>
</li>
<li>PREVIOUS CPT's
<ul>
<li>
<a >1 st item in 2nd list view </a>
</li>
<li>
<a >2nd item in 2nd list view </a>
</li>
</ul>
</li>
</ul>
For live demo click Here
I am having issues determining if a particular dom object is visible or not. I have the following code outputting to the console and it always returns false even though I can see the element on the screen.
console.log(itemElement.innerText +" is visible: " + $(itemElement.id).is(':visible'));
The context that I am testing is to see whether a list item in a jQuery Accordion object is visible or not. I am iterating through all the list elements (including sub list elements) and performing this check. Always the check returns false. I have googled everywhere for an answer but couldn't find one.
Here is the html to show what the layout looks like. I have edited it a bit to keep it reasonable but you should get a good idea of how it is set up.
<div id="collection_form">
<div id="element_container">
<ul class="element_list element_group ui-sortable">
<li id="de_1" class="element_group_parent eg-collapsed element_group_leaf">
stuff in here is same as below
</li>
<li id="de_29" class="element_group_parent eg-collapsed element_group_leaf">
<div>
<span>Room Booking</span>
<span class="element_type"> - Group</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
<ul class="element_group">
<li id="de_30" class="element_config_form element_group_leaf">
<div>
<span>Room Number</span>
<span class="element_type"> - Text</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
</li>
</ul>
</li>
<li id="de_31" class="element_group_parent eg-collapsed element_group_leaf">
<div></div>
<ul class="element_group">
<li id="de_32" class="element_config_form element_group_leaf">
<div> more stuff </div>
</li>
</ul>
</li>
</ul>
</div>
</div>
What is it that I am doing wrong?
Try this :
$(itemElement).is(':visible'); // this works if itemElement is a DOM element, or even if itemElement is a jQuery wrapped DOM elemenent
i suspect your itemElement.id is undefined
But if itemElement.id is correctly defined (as the id of your itemElement, in this case means that itemElement is a DOM element) you can do both these :
$("#"+itemElement.id).is(':visible');
or even better :
$(itemElement).is(':visible');