In my Android JQM app , I have a tabbed layout of 5 tabs in navbar. Each tab is like a persistent header. The Following is code for 2nd tab.
Now how can I implement swiping across multiple tabs?
<div data-role="header" data-position="fixed" data-id="headernav">
<h1>Header1</h1>
Home
<div data-role="navbar">
<ul>
<li>
<a href=" Description.html" data-transition="slide" ><b>Description </b></a>
</li>
<li>
<a href="illustration3.html" data-transition="slide" class="ui-btn-active ui-state-persist" ><b>Illustration</b></a>
</li>
<li>
<a href=" Complications.html" data-transition="slide" ><b>Complications</b></a>
</li>
<li>
<a href="Indications.html" data-transition="slide" ><b>Indications</b></a>
</li>
<li>
<b>Equipment</b>
</li>
</ul>
</div>
</div>
You can use swipeleft and swiperight events like so:
function changeNavTab(left) {
var $tabs = $("div[data-role=navbar] li a", $("div[data-role=page].ui-page-active"));
var curidx = $tabs.closest("a.ui-btn-active").parent().index();
var nextidx = 0;
if (left){
nextidx = (curidx == $tabs.length - 1) ? 0 : curidx + 1;
} else {
nextidx = (curidx == 0) ? $tabs.length - 1 : curidx - 1;
}
$tabs.eq(nextidx).click();
}
$("div[data-role=content]").on("swipeleft", function(event){
changeNavTab(true);
});
$("div[data-role=content]").on("swiperight", function(event){
changeNavTab(false);
});
Working sample (jsFiddle) is here
Related
I have a search input box to take a string in the frontend with suchfensterAction. The result seems to be correct. But when I click to page 2 or higher I always get the suchfensterAction and never the higher paginated page.
(static function() {
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
'Myext', 'Myext',
[...\Controller\MyextController::class => 'suchfenster, list,show, new, .....
To show the result in the frontend with pagination i have used following controller code:
...
public function suchfensterAction()
{
return $this->htmlResponse();
}
public function listAction(int $currentPage = 1): \Psr\Http\Message\ResponseInterface
{
$args=$this->request->getArguments();
$gefunden=$this->absolventenRepository->search($this->request->getArguments());
$itemsPerPage = 15;
$arrayPaginator = new \TYPO3\CMS\Extbase\Pagination\QueryResultPaginator($gefunden,
$currentPage, $itemsPerPage);
$pagination = new SimplePagination($arrayPaginator);
$this->view->assignMultiple(
[
'paginator' => $arrayPaginator,
'pagination' => $pagination,
'pages' => range(1, $pagination->getLastPageNumber()),
]
);
return $this->htmlResponse();
}
...
and the templates suchfenster.html
<f:form action ="list" >
<f:form.textfield autofocus ="1" name="query" value="{queryvalue}" placeholder = '{text}' />
<f:form.submit value="Suchen"/><br>
</f:form>
...
und list.html
...
<table>
<f:for each="{paginator.paginatedItems}" as="item" iteration="iterator">
<tr><f:render partial="Item.html" arguments="{item:item}" /></tr>
</f:for>
</table>
<f:render partial="Paginator.html" arguments="{pagination: pagination, pages: pages,
paginator: paginator}" />
...
My Paginator.html:
<ul class="pagination pagination-block">
<f:if condition="{pagination.previousPageNumber} &&
{pagination.previousPageNumber} >= {pagination.firstPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}" title="{f:translate(key:'pagination.first')}">
<i class="material-icons">first_page</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'pagination.previous')}">
<i class="material-icons">chevron_left</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">first_page</i></li>
<li class="disabled"><i class="material-icons">chevron_left</i></li>
</f:else>
</f:if>
<f:for each="{pages}" as="page">
<li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'active', else:'waves-effect')}">
{page}
</li>
</f:for>
<f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'pagination.next')}">
<i class="material-icons">chevron_right</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPageNumber})}" title="{f:translate(key:'pagination.last')}">
<i class="material-icons">last_page</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">chevron_right</i></li>
<li class="disabled"><i class="material-icons">last_page</i></li>
</f:else>
</f:if>
</ul>
Where I have to control the argument 'currentPage'? bzw. where I have to increment 'currentPage'?
The code is doing the pagination correctly, however, I am unable to use the boostrap class that shows the active page
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
#{
if (ViewBag.PageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber- 1 })">«</a>
}
else
{
<a class="page-link disabled">«</a>
}
}
</li>
#{
var currentPage= ViewBag.PageNumber;
for (var i = 1; i <= ViewBag.totalCount; i++)
{
<li #(currentPage== i ? "class= page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Boats", new {search= ViewBag.searchData, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.PageNumber< ViewBag.totalCount)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber+ 1 })">»</a>
}
else
{
<a class="page-link disabled">»</a>
}
</li>
</ul>
</div>
The part that should show the active item is this, but for some reason, this class is not working
<li #(currentPage== i ? "class= page-item active" : "")>
HTML output:
As can be seen in HTML, the class is called, but it doesn't pass anything to it...
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
<a class="page-link" href="/Barcos?numeroPagina=1">«</a>
</li>
<li>
<a class="page-link" href="/Boats?pageNumber=1">1</a>
</li>
<li class="page-item" active="">
<a class="page-link" href="/Boats?pageNumber=2">2</a>
</li>
<li>
<a class="page-link disabled">»</a>
</li>
</ul>
</div>
You're not adding quotes to the class property value, adding quotes will make your HTML render properly:
<li #Html.Raw(currentPage== i ? "class=\"page-item active\"" : "")>
I am using ionic framework in a hybrid app which have a page that will display the current year in the middle. There are two arrows left and right which will decrease and increase the year respectively. That module is working fine on android but when testing on ios, it shows some unwanted values prefixed to the year bindings.
The value looks fine initially but when the binding gets updated it shows something like this.
The code looks like below.
(function () {
angular.module('surprise')
.controller('calendarController', [calendarController]);
function calendarController() {
var ref = this;
ref.today = moment();
ref.year = ref.today.year();
ref.prev = ref.year -1;
ref.next = ref.year+1;
ref.isActiveMonth = function(month) {
if(month === ref.today.month()) {
return true;
}
return false;
};
ref.prevYear = function() {
ref.year -= 1;
console.log(ref.year);
};
ref.nextYear = function() {
ref.year +=1;
console.log(ref.year);
}
}
})();
The view template
<ion-view>
<ion-nav-title>
<div class="title header-text">
<i class="icon"><img src="image/create_icon4.png" class="full_width" /></i>
<span>{{'CALENDAR' | translate}}</span>
</div>
</ion-nav-title>
<ion-content>
<section class="recent_row">
<div class="cale_main">
<div class="bar bar-subheader year-select">
<a ng-click="vm.prevYear();" class="align_left"><i class="icon"><img src="image/arrow-left.png" /></i><span>{{vm.prev}}</span></a>
<h2 class="title">{{vm.year}}</h2>
<a ng-click="vm.nextYear();" class="align_right"><span>{{vm.next}}</span><i class="icon"><img src="image/arrow-right.png" /></i></a>
</div>
<div class="row">
<div class="menuview_main">
<ul>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:01})">
<img ng-src="{{!vm.isActiveMonth(0) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>January</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:02})">
<img ng-src="{{!vm.isActiveMonth(1) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>February</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:03})">
<img ng-src="{{!vm.isActiveMonth(2) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>March</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:04})">
<img ng-src="{{!vm.isActiveMonth(3) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>April</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:05})">
<img ng-src="{{!vm.isActiveMonth(4) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>May</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:06})">
<img ng-src="{{!vm.isActiveMonth(5) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>June</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:07})">
<img ng-src="{{!vm.isActiveMonth(6) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>July</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:08})">
<img ng-src="{{!vm.isActiveMonth(7) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>August</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:09})">
<img ng-src="{{!vm.isActiveMonth(8) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>September</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:10})">
<img ng-src="{{!vm.isActiveMonth(9) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>October</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:11})">
<img ng-src="{{!vm.isActiveMonth(10) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>November</h6>
</a>
</li>
<li>
<a ui-sref="app.calendarMonth({year:vm.year, month:12})">
<img ng-src="{{!vm.isActiveMonth(11) && 'image/cal-unselect.png' || 'image/cal-select.png'}}"/>
<h6>December</h6>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</ion-content>
</ion-view>
When I check it in the console the value shows fine even in iOS, so I guess this is something to do with the view update of ionic framework.
I solved the mystery after debugging for hours, This was caused by iOS behaviour of converting numbers into hyperlinks with telephone numbers.
The solution is to disable that using the following meta tag
<meta name="format-detection" content="telephone=no">
I hope this may save someone else's time and frusturation. More info here
I create nested list view in Asp.net mvc with jQuery mobile, it has 2 sub view, when i navigate to first subview1 i can return back to main view, but when i navigate from subview1 to subview2 i can not back to subview1, since subview1 is somehow null.
in my layout page i put this script
<script>
$(document).on('mobileinit', function () {
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Back";
$.mobile.page.prototype.options.backBtnTheme = "a";
$.mobile.defaultPageTransition = "slide";
});
</script>
the main page is :
<script>
$(document).on('click', '[data-rel=back]', function (e) {
e.preventDefault();
var activepage = $.mobile.activePage.attr("id");
if (activepage == "schedule")
$.mobile.changePage($('#flight'), { transition: "slide", reverse: false });
if (activepage == "dayFlight") {
$.mobile.changePage($('#schedule'), { transition: "slide", reverse: false });
}
});
<div data-role="page" id="flight" data-add-back-btn="true">
<div data-role="content">
<ul id="flightListView" data-role="listview" data-inset="false" data-filter="true">
#foreach (var item in Model)
{
<li>
<a href="#Url.Action("Schedules", new { from = item.DepartureFrom, to = item.Destination })" data-direction="reverse" data-transition="slide">
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">#item.NumberOfFlights</span>
</a>
</li>
}
</ul>
</div>
the subview1 is:
<div data-role="page" data-add-back-btn="true" id="schedule">
<div data-role="content">
<ul id="scheduleListView" data-role="listview" data-inset="false" data-filter="false">
#foreach (var item in Model)
{
<li>
<a href="#Url.Action("DayFlights", new { from = from, to = to, date = item.Date })" data-direction="reverse" data-transition="slide">
<span class="lg">#Html.DisplayFor(modelItem => item.Day)</span>
<span class="lg number laligned">#Html.DisplayFor(modelItem => item.Date)</span>
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">#item.Nof</span>
</a>
</li>
}
</ul>
</div>
the subview2 is :
<div data-role="page" data-add-back-btn="true" id="dayFlight">
<div data-role="content">
<ul id="dayListView" data-role="listview" data-inset="true" data-filter="false">
#foreach (var item in Model)
{
<li>
<a href="#item.AgencyUrl" rel="external" data-ajax="false">
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">#item.Cap</span>
</a>
</li>
}
</ul>
</div>
something that i figure out, it is when i navigate to subview1, the mainview and the subview1 both of them are in DOM but then when i navigate to subview2, subview1 will replaced by subview2, so it means when i am at subview2 the subview1 does not exist in DOM.
in all cases $.mobile.activePage.prev('.ui-page'); return null, that is the reason why i decided to use if clause to determine to which page i should navigate back to, however when i want to navigate back from subview2 to subview1 it does not work.
how can i implement this senario?
thanks in advance
I'm using MVC3 to create a beta mobile web app. It was working fine until I started to try and get inline pages inside of a view similar to this
This is what I currently have in my view called Index. How come when I click the links in the navbar it doesn't go to the page?
#model List<ShawGoVersion1.Models.NewsItem>
#{
ViewBag.Title = "News";
}
#section Header {
#Html.ActionLink("Back", "Index", "Home", null, new { data_icon = "arrow-l"})
<h1>#ViewBag.Title</h1>
<div data-role="navbar">
<ul>
<li>My News</li>
<li>Press Releases</li>
<li>All News</li>
</ul>
</div>
}
<div data-role="page" id="MyNews">
<div data-role="content">
<h1>This feature coming soon</h1>
</div>
</div>
<div data-role="page" id="AllNews">
<div data-role="content">
<ul data-role="listview">
#for (int i = 0; i < Model.Count; i++ )
{
if (Model[i].type == "Article")
{
<li>
<a href="#Url.Action("NewsItemDetails", "News", new { id = i })">
#if (Model[i].pictureURL != null)
{
<div class="ui-grid-c">
<div class="ui-block-a" style="width:31%;vertical-align:middle">
<img src="#Model[i].pictureURL" style="width:100%;height:auto"/>
</div>
<div class="ui-block-b" style="width:4%; vertical-align:middle"></div>
<div class="ui-block-c" style="width:65%;vertical-align:middle">
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
</div>
</div>
}
else
{
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
}
</a>
</li>
}
}
</ul>
</div>
</div>
<div id="PressReleases" data-role="page">
<div data-role"content">
<ul data-role="listview">
#for (int i = 0; i < Model.Count; i++ )
{
if (Model[i].type == "Press Release")
{
<li>
<a href="#Url.Action("NewsItemDetails", "News", new { id = i })">
#if (Model[i].pictureURL != null)
{
<div class="ui-grid-c">
<div class="ui-block-a" style="width:31%;vertical-align:middle">
<img src="#Model[i].pictureURL" style="width:100%;height:auto"/>
</div>
<div class="ui-block-b" style="width:4%; vertical-align:middle"></div>
<div class="ui-block-c" style="width:65%;vertical-align:middle">
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
</div>
</div>
}
else
{
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
}
</a>
</li>
}
}
</ul>
</div>
</div>
Your navbar should appear within data-role="page". Within the data-role="page" you should have a data-role="header" and your navbar should go in there if you want it to be in the header of the jqm page.
Alternatively if you don't want to do it that way(which you should do, as its the correct way). You could try catch the onclick event of those links in your navbar yourself and then fire
$.mobile.changePage();
This may work.