How can I create a multi row (2) and multi column (3) button group of 6 buttons in Jquery Mobile? The Buttons need to be connected and have to have the same size.
Here is a sketch:
Two three item navbars do the trick:
<div style="margin:20px">
<div data-role='navbar'>
<ul>
<li><button>A</button></li>
<li><button>B</button></li>
<li><button>C</button></li>
</ul>
</div>
<div data-role='navbar'>
<ul>
<li><button>D</button></li>
<li><button>E</button></li>
<li><button>F</button></li>
</ul>
</div>
</div>
Related
I have created a dynamic HTML label. When is rendered by orbeon runner first it shows correctly but when I add a new item in a repeated grid inside it gets duplicated
The HTML label is like this:
<div class="form-table--head">
<div class="content-left">
<p class="property--title"></p><span class="property--qty">{$itCount} counted</span>
<div class="box-info box-link-popup hidden-xs">
<div class="box__popup" tabindex="-1">
<p>Options:</p>
<ul>
<li>Option 1.</li>
<li>Option 2.</li>
<li>Option 3.</li>
</ul>
</div>
</div>
<p class="property--amount property--amount-xs">{$itSum} €</p>
</div>
<div class="content-right">
<p class="property--amount hidden-xs">{$itSum} €</p>
<div class="header-menu">
<ul>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
</div>
</div>
Here is the entire form source code: https://pastebin.com/P3VK4hKm
Here is the behaviour first time:
And here after add a new iteration:
I am using Orbeon 2018.2.3 PE
The behavior you noticed is caused by a bug, which is fixed in Orbeon Forms in 2019.1. For reference, the issue is tracked as #4136.
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 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();
I use Jquery UI to create tabs. I want create new tabs with content tab1 = content tab2
You can use a bit of jQuery to accomplish this. Assuming that your jQuery UI tags code looks like:
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2">Test content</div>
</div>
You can use something similar to the following to copy the content into the first tab.
var content = $('#tabs-2').html();
$('#tabs-1').html(content);
This code takes the HTML string within the tabs-2 div and stores it in a variable. It then sets the content in tabs-1 div to the variable.
In my application i have tab at the top of the page which should each render a new page.
The tabs are defined in the Layouts file as this will be part of the standard view.
Now i have created different views for each of the options e.g. project is one of the tabs.
So when i click the tab option how will it render the body based on the tab i have selected?
I have used the Foundation layout tabs but will need jquery hooking into it to launch an event.
Any examples or replies would be great
Try jQuery UI Tabs
Edit 1:
<div id="tabs">
<ul>
<li>Projects</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="projects">
<% Html.RenderAction("Projects", "Home"); %>
</div>
<div id="tab-2">
<% Html.RenderAction("TabTwo", "Home"); %>
</div>
<div id="tab-3">
<% Html.RenderAction("TabThree", "Home"); %>
</div>
</div>
Decorate your tabs action method with [ChildActionOnly] if you want methods to work using child view only.