I am using JQuery mobile tab. Based on some condition, I want the second tab to be selected showing the corresponding tab view. Appreciate the help :)
<!-----HTML------->
<div class="custom-tabs" id="tabDiv">
<div data-role="navbar" class="">
<ul>
<li name="">Tab 1</li>
<li name="">Tab 2</li>
</ul>
</div>
<!--- First Tab --->
<div id="one" class="tab-content-wrap" name="tabOneContentId"></div>
<!--- Second Tab --->
<div id="two" class="tab-content-wrap" name="tabTwoContentId"></div>
</div>
<!------JS------>
$(document).on("pagebeforeshow", "#requestServiceHome", function() {
$("#tabDiv").tabs();
if(flag == true){
$('#tabDiv').tabs("option", "select", 1 );
}
});
You need a data-role="tabs" on the container DIV:
<div class="custom-tabs" id="tabDiv" data-role="tabs">
Then to set active tab:
$('#tabDiv').tabs("option", "active", 1 );
When you do this, the corresponding tab button does not change color. So you either need to add the ui-btn-active class to the button, or trigger the button click instead of setting the active tab, e.g:
$("#secondTab").click();
Related
I have a simple two tab layout. First tab shows details whereas the second tab shows a search box and search results. When a user navigates to the page I wish to show the first tab however when a search is performed (from the second tab) I wish the show the page displaying the second tab.
I had tried the code:
<ul class="nav nav-tabs">
<li class="<%= 'active' if !params[:search] %>">
Details
</li>
<li class="<%= 'active' if params[:search] %>">
Search
</li>
</ul>
The code above displays the correct tab however not the corresponding div so if a search is performed the "Search" tab is active however the "Details" div is displayed.
OK, I did not realise I had to set the active class for both the "li" item and the corresponding "div" item. Works now.
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
<div class="tab-content">
<div class="tab-pane <%= 'active' if !params[:search] %> fade in" id="details">
...
</div>
<div class="tab-pane <%= 'active' if params[:search] %>" id="search">
...
</div>
</div>
I try to bring some effects to my tabs navigation on my jquery-mobile page but it looks like that the data-transitions argument does not work combined with a tabs navigation.
My code looks like this:
<div data-role="header" data-theme="a" id="header">
<h1>Mainpage</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="tabs" id="tabs" >
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a id="lblTab1" href="#location" data-ajax="false" class="ui-btn-active" data-icon="search" data-transition="pop">search</a></li>
<li><a id="lblTab2" href="#product" data-ajax="false" data-icon="location" data-transition="pop">product</a></li>
</ul>
</div>
<div id="location" class="ui-body-d ui-content" > content </div>
<div id="product" class="ui-body-d ui-content" > content2 </div>
</div>
</div>
</div>
so how is it possible to bring some effects to the navigation bar?
I use jquery-mobile 1.4.0
Page transitions don't work on tabs as transition classes are activated when hiding/showing pages. You can create your own transitions, use third party CSS transitions or use jQM default ones.
First, you need to listen to tabbeforeactivate event. This event omits a ui object containing data of previous (ui.oldPanel) and next panel (ui.newPanel). All you need is to add animation classes to ui-newPanel and remove them once animation ends by binding Animation End one time only using .one().
$("#tabs").on("tabbeforeactivate", function (e, ui) {
$(ui.newPanel)
.addClass("animation")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("animation");
});
});
Demo - Custom animation by Daneden
Demo - jQM default transitions
I have navigation bar in a JQM page:
<div data-role="navbar">
<ul>
<li>About</li>
<li>Details</li>
</ul>
</div>
Both pages have the same navbar.
I have back button as below:
<a href="#" data-icon="back" data-rel="back" >Back</a>
The problem is that back button will not go to the previous page prior to viewing the page, #details and #about pages are included in the history. How to disregard or exclude the two pages so that clicking back button will go to the page that load it first.
You can't since "data-rel=back" uses the browser history, hence:
start with "Main"
click "About"
click "Details"
click "About"
click "Back" - returns you to "Details"
click "Back" - returns you to "About"
click "Back" - returns you to "Main", woohoo!
I suggest you remove the navbars on both "About" and "Details" pages, this way you only have one way to go: back to the page where you called it.
The simplest way to do that would be to make your about and details pages jquery mobile dialog pages (see documentation).
Open dialog
Dialog pages are not tracked in the history, which should achieve the goal you are looking for.
Try this solution:
<script>
$('#about').click(function(){
$('#contentDiv').html('Your content');
});
$('#details').click(function(){
$('#contentDiv').html('Your content');
});
</script>
<body>
<div data-role="page" id="main">
<div id="contentDiv" data-role="content">
</div>
<div data-role="navbar">
<ul>
<li><a id="about" class="ui-btn-active ui-state-persist">About</a></li>
<li><a id="details">Details</a></li>
</ul>
</div>
</div>
</body>
When using this solution, you will make sure that when you click on the back button, you go to the previous page.
jquery ui accordion contains lot of panels and every panel contains lot of single line menu items.
jqueryui accordion shows only single item in every panel. How to force accordion to show more items ?
$( "#accordion" ).accordion({
fillSpace: true,
autoHeight: false,
navigation: true,
collapsible: true
});
<h3>
mmmmmmm</h3>
<div>
<ul>
<li><a target='DoklstlG' href='xxxxxx'>
jjjjjj</a></li>
<li><a target='DoklstlO' href='yyyyy'>Ostuarve</a></li>
<li><a target='UnpaidG' href='zzzzzzz'>hjkhkjjsumine</a></li>
<li> </li>
...
</ul>
</div>
<h3>
kkkkk</h3>
<ul>
<li><a target='DoklstlVL' href='nnnnnnnn'>Väljastus</a></li>
<li><a target='DoklstlSL' href='mmmmmmmmmm'>Sissetulek</a></li>
...
as the other answer said, The documentation specifically instructs user to NOT do this
"NOTE: If you want multiple sections open at once, don't use an accordion."
yet, there is a way. i use it like this, and i find it very simple and useful:
create multiple one-item accordion panels one after another with collapsible set to true to emulate a multi-panel accordion.
here is the markup:
<div class="accordion">
<h3>First header</h3>
<div>First content</div>
</div>
<div class="accordion">
<h3>Second header</h3>
<div>Second content</div>
</div>
<div class="accordion">
<h3>Third header</h3>
<div>Third content</div>
</div>
here is the script:
$(".accordion").accordion({collapsible: true});
The documentation specifically instructs user to NOT do this:
NOTE: If you want multiple sections open at once, don't use an accordion.
Source: jQuery UI Documentation
UPDATE
Try changing fillSpace: false and autoHeight : true, see what that does.
I'm using jqueryUI for tabs on a page. I initialize it like below:
$("#tabs").tabs();
<div id="tabs">
<ul>
<li>Part A</li>
<li>Part B</li>
<li>Part C</li>
</ul>
<div id="tabs-4">
.....
</div>
<div id="tabs-2">
....
</div>
<div id="tabs-5">
....
</div>
</div>
I have 2 questions.
How do I set the tab to be custom. say I want second tab to be shown first. $('#tabs').tabs(2) does not work. i got that from this link
Let say I click on a button inside tab1. Clicking on the button takes control back to an action and then control comes back to this page. When the control comes back...then is it possible to set a custom tab?. For example. in tab 1 I click something...go back to the action...and then I want to come back to tab 2.
1.
Is there an error when you call $('#tabs').tabs(2)?
2.
You can set a variable in your controller that tells the view which tab to be active.
#controller
... do some stuff
#current_tab = 2
#view
$('#tabs').tabs(<%= #current_tab %>)