sorry if this question seems a bit open ended, but I'm often wanting to add new pages to my website. As my website grows, this means I'm having go back and add a link to the new page on all of my previous pages, which is becoming increasingly time consuming. Is there any way around this? An automatic method? Obviously in an ideal world you'd get the template page correct first, but this doesn't seem to allow for easy expansion. How do the big sites cope? Thanks.
You user server-side includes.
In PHP there are include() and require()
include('filename.php') will add the contents of 'filename.php' to the page it was included on. Require does the same thing, but the script stops if it can't locate or use the file.
Instead of doing:
<div id="navbar" >
<ul>
<li>Menu</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Put it in a file called "navbar.html" and just do:
<?PHP include('navbar.html'); ?>
In your include file you could have:
<div id="navbar" >
<ul>
<li id="1" class="<?PHP echo $m1class ?>">Menu</li>
<li id="2" class="<?PHP echo $m2class ?>">item</li>
<li id="3" class="<?PHP echo $m3class ?>">item</li>
<li id="4" class="<?PHP echo $m4class ?>">item</li>
</ul>
</div>
And then in the PHP file:
<?PHP
$m1class=$m2class=$m4class="notCurrent";
$m3class="current";
include('navbar.php');
?>
It would be the same as doing:
<?PHP
$m1class=$m2class=$m4class="notCurrent";
$m3class="current";
include('navbar.php');
?>
<div id="navbar" >
<ul>
<li id="1" class="<?PHP echo $m1class ?>">Menu</li>
<li id="2" class="<?PHP echo $m2class ?>">item</li>
<li id="3" class="<?PHP echo $m3class ?>">item</li>
<li id="4" class="<?PHP echo $m4class ?>">item</li>
</ul>
</div>
...except that you can change the include file so that it changes every page. The output of either would be:
<div id="navbar">
<ul>
<li id="1" class="notCurrent">Menu</li>
<li id="2" class="notCurrent">item</li>
<li id="3" class="current">item</li>
<li id="4" class="notCurrent">item</li>
</ul>
</div>
Goodluck!
Related
I am trying to display custom images for my list of objects. The images are stored in the database as one of the properties on the object and returned to my template in the model.
<ul>
<li th:each="fruit : ${MyPage.fruitList}">
<div class="field" th:onclick="'javascript:doSubmit(\'' + ${fruit.guid} + '\');'">
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
<label th:text="${fruit.name}" class="radio-label"></label>
</div>
</li>
</ul>
With above code, I am able to successfully display the image that is stored as property 'fruit_image' on the fruit object in database.
Now the question I have is, how do I display a default image if the property 'fruit_image' is not present on the fruit? Is there a way i can set a flag or variable inside the 'if'?
Thank you!
No, there isn't a way to change a variable in Thymeleaf like that. That being said, you can use collection projection to check for the existence of that property. For example, this is how I would do a default image:
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
<li th:unless="${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<div>
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
Rather than looping through all the properties, something like this could work for you as well.
<ul th:with="has_image = ${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<li th:if="${has_image}">
<img alt="fruit_image" id="fruitImage" th:src="${fruit.fruitProperties.^[propertyName == 'fruit_image'].propertyValue}" style="width:100px;height:100px;" />
</li>
<li th:unless="${has_image}">
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</li>
</ul>
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.
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 have the following to display a list of items and a button underneath the list. However the button is overlapping on top of the list. I must be not putting some kind of data-role or another one of their attributes on it.
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" >
<li class="hidden"> _sheetName</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
Here is what it looks like:
Live Example:
http://jsfiddle.net/B7nhA/ (the problem)
http://jsfiddle.net/B7nhA/1/ (the fix)
You're missing one of the attributes for the listview
data-inset="true"
HTML
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" data-inset="true">
<li class="hidden">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
i experienced the same problem. Here is my fix.
<style>
.ui-content .ui-listview
{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
JsFiddle Demo
You dont need to modify your markups.
How about inserting an line break befor the button.Not a clean solution I think.But it will work.
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" >
<li class="hidden"> _sheetName</li>
</ul>
</div>
<br>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
I used padding to solve this kind of problems. See below I added padding to the list-container div.
<div data-role="content" data-theme="b">
<div style="padding-bottom:20px">
<ul id="listOfSheets" data-role="listview" >
<li class="hidden">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
Here is a DEMO
I am trying to get an image on the right hand side but it always appear as an arrow.
<ul data-role="listview" data-theme="g">
<li>
<a href="#">
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 1</span>
<span class="ui-li-count">12</span>
</a>
<a href="#">
// I want an image to appear here
</a>
</li>
<li>
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 2</span>
<span class="ui-li-count">9</span>
</li>
</ul>
I'm not sure exactly what is wrong with the layout you're using for the list view,
I would study the documentation and compare it to your code
http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html
If you wanna replace those jqm icons with your icons, read this:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/buttons/buttons-icons.html
See if the "custom icons" section would help you.
I found this as an overview of the list: http://www.youtube.com/watch?v=YaZhS_8vaYo It shows the arrows because the entire contents is wrapped in an <a>, I think if you put the link inside an H3, it will become more contained and not show the error. The only thing I haven't figured out is a custom icon; you may be able to just float it.
I viewed the page source and found it very helpful...
lists-split.html
looks like this.
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a>Purchase album
</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>Purchase album
</li>
</ul>