In my application i am using navibar to display bottom tab menu evering thing working fine but when i am selecting highlighter is braking
as shown above image. bellow code i am using.
<!-------------Footer---------------------------------------->
<div data-role="footer" class="test1" id="bottom-footer" data-position="fixed">
<div data-role="navbar" class="test1" data-grid="d">
<ul data-transition="none">
<li><a data-transition="none" id="menu_nav_walloffame" data-icon="custom" data-iconpos="top" > Wall</a></li>
<li><a data-transition="none" id="menu_nav_associateview" data-icon="custom" data-iconpos="top">Associate</a></li>
<li><a data-transition="none" name="menu_nav_managersview" id="menu_nav_managersview" data-icon="custom" >Managers</a></li>
<li><a data-transition="none" id="menu_nav_treasurechest" data-icon="custom" data-iconpos="top" >Treasure</a></li>
<li><a data-transition="none" id="menu_nav_redeem" data-icon="custom" data-iconpos="top" >Redeem</a></li>
</ul>
</div>
</div><!---------footer----------------->
Working fine here http://jsfiddle.net/zVgAz/
Or try this jquery..( it also works although without this script )
JQUERY
$('ul#footer_nav').on('vclick', 'li', function() {
$( "ul#footer_nav" ).navbar({
create: function( event, ui ) {}
});
});
HTML
<div data-role="footer" class="test1" id="bottom-footer" data-position="fixed">
<div data-role="navbar" class="test1" data-grid="d">
<ul id="footer_nav" data-transition="none">
<li><a data-transition="none" id="menu_nav_walloffame" data-icon="custom" data-iconpos="top" > Wall</a></li>
<li><a data-transition="none" id="menu_nav_associateview" data-icon="custom" data-iconpos="top">Associate</a></li>
<li><a data-transition="none" name="menu_nav_managersview" id="menu_nav_managersview" data-icon="custom" >Managers</a></li>
<li><a data-transition="none" id="menu_nav_treasurechest" data-icon="custom" data-iconpos="top" >Treasure</a></li>
<li><a data-transition="none" id="menu_nav_redeem" data-icon="custom" data-iconpos="top" >Redeem</a></li>
</ul>
</div>
</div>
Related
Using Bootstrap 5, with the navbar being a re-usable component used on many screens. The drop down menus work on all screens except for one, but for the life of me I can't see why that screen is different. JS console shows no errors, the navbar markup is identical to the one used in the other screens.
Any ideas on this are welcome.
Here's the navbar code (some data redacted for client's privacy):
<div class="bg-light">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">client's name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link " href="/bkofc/">Main</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/bkofc/cases/" aria-current="page">Screen 1<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownConfiguration" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
ניהול
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownConfiguration">
<a class="dropdown-item" href="/bkofc/branches/">config 1</a>
<a class="dropdown-item" href="/bkofc/caseTypes/">config 2</a>
<a class="dropdown-item" href="/bkofc/clients/">config 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/bkofc/users/">config 3</a>
<a class="dropdown-item" href="/bkofc/inviteUser/">config 4</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarUserDropdown">
<a class="dropdown-item" href="/bkofc/users/admin/edit">my account</a>
<div class="dropdown-divider"></div>
<form class="dropdown-item" action="/bkofc/logout" method="POST">
<input type="hidden" name="csrfToken" value="..." />
<button type="submit" class="btn btn-outline-danger"> logout</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
I'm working on mobile app.I want pop-up to appear on click of icon(carat-r). Actually i'm not gettin where to link. Below is my code. Thanks in advance
<div data-role="page" data-theme="a" data-content-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>weekdays</h1>
</div>
<div data-role="tabs" id="tabs">
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true">
<li ><a href="#">
<h2>Sunday</h2>
</a></li>
<li><a href="#">
<h2>monday</h2>
</a></li>
</ul>
</div>
</div>
If you want to launch a popup when the icon is clicked, but still have the rest of the listitem be a regular link, you should use the split button option on the listview:
http://demos.jquerymobile.com/1.4.4/listview/#Splitbuttons
You can set the icon to carat-r using the data-split-icon attribute.
In your markup:
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true" data-split-icon="carat-r">
<li>
<h2>Sunday</h2>
</li>
</ul>
DEMO
I have a Layout page that has a fixed header with few hyperlinks
When you click on a link I want to display a two column page
which will have a left navigation and content will be to the right
The left navigation will have hyperlinks as well which can be clicked
and content should always display on the right. Every link on top will have
different left navigation content when displayed
..Right now what I have is that when I click on the left navigation,
content is displayed but the left navigation column disappears.
How can I fix this?
Main layout
<body>
<div class="wrapper">
<div class="header">
<div class="Test-logo"></div>
<div class="menucontrol-x"></div>
</div> <!-- end "header" -->
<div class="mainNav">
<ul class="menuMain1">
<li><a alt="" href="">My Info</a></li>
<li><a alt="" href="">My Result</a></li>
<li><a alt="" href="">My Deliveries</a></li>
<li><a alt="" href="">Messages</a></li>
<li><a alt="" href="">Contact</a></li>
<li><a alt="" href="">Settings</a></li>
<li><a alt="Frequently Asked Questions" href="">FAQ</a></li>
</ul>
<ul class="menuMain2">
<li><a alt="Sign out" href="">Sign Out</a></li>
<li><a alt="Shop at our online store" href="">My Store</a></li>
</ul>
</div><!-- end "mainNav" -->
<div id="sidebar">
#RenderSection("SideBar",required:false)
</div>
<div id="content">
#RenderBody()
</div>
<div class="footer">
<ul class="menuFooter1">
<li><a alt="Contact Us" href="">Contact Us</a></li>
<li><a alt="Shop at our online store" href="">Online Store</a></li>
</ul>
</div><!-- end "footer" -->
</div>
</body>
Child view
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutSecondMaster.cshtml";
}
#section SideBar
{
<div class="subMenu">
<ul class="services">
<li><a alt="" href="#Url.Action("Garments","Dots")">Garments</a></li>
<li>Products</li>
<li>Special Order History</li>
<li>My Service Team</li>
</ul>
</div><!-- end "subMenu" -->
<div class="miscNav">
<p>View our <a alt="Terms & Conditions" href="">Terms & Conditions</a>.</p>
<p>Visit our other Cool sites:</p>
<ul>
<li><a alt="testing1.com" href="">Stuff.com</a></li>
<li><a alt="Store.Testing.com" href="//store.testing.com">Store.testing.com</a></li>
</ul>
</div><!-- end "miscNav" -->
<div class="smProduct1">
<h3>Product Representation<br /> (smProduct1)</h3>
</div> <!-- end "smProduct1" -->
}
<div class="whatever">
<h2>Product</h2>
Here you go buddy!Here you go buddy!Here you go buddy!Here you go buddy!Here you go buddy!
Here you go buddy!Here you go buddy!Here you go buddy!Here you go buddy!Here you go buddy!
</div>
Is there are any way to add the split button (that comes with ListView) to the collapsible; I have tried/tested the below code, but doesn't work!
<div data-role="collapsible-set" data-theme="a" data-content-theme="e" data-split-icon="gear" data-split-theme="e">
<div data-role="collapsible">
<h3> Breakfast </h3>
<p>
<a href="somthing.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
<div data-role="collapsible">
<h3> Lunch</h3>
<p>
<a href="somthingElse.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
</div>
Any Idea or any other solution (workaround) is highly welcome.
Well it needs a little work but here is what I have
Live Example:
http://jsfiddle.net/yPhJp/5/
http://jsfiddle.net/yPhJp/6/ ( Adding verbiage to the collapsible )
JS
$(".splitButtonClicked").on("click", function (event, ui) {
alert('Hello');
return false; // stop collapsible event
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Breakfast</h3>
</a>View Menu
</li>
</ul>
</h2>
</div>
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Lunch</h3>
</a>View Menu
</li>
</ul>
</h2>
</div>
</div>
</div>
</div>
Hope this helps you
I am using jquery UI Tab in my asp.net MVC(RAZOR) application. Issue that i found is that each tab click render the html in first div i.e here div with id "tabs-1".
Jquery code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function ($) {
$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>
HTML:
<div id="example" class="tabs" style="width: 698px;">
<ul style="list-style: none;">
<li>Overview</li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=5" >Specifications</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=1" >Exterior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=2" >Interior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=3" >Dimensions</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=4" >Feature</a></li>
<li><a href="/Version/Details?versionID=#ViewBag.versionId&grpId=6" >Instrument Panel</a></li>
<li>Color</li>
</ul>
<div id="tabs-1" style="width: 698px;">
This is Tab one
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
<div id="tabs-8">
</div>
</div>
Please guide me.
Thanks,
#paul
Finally i got the solution by matching a title attribute and the container's id like bellow
<li>OverView</li>
<li>Specifications</li>
<div id="tabs-1" style="width: 698px;">This is Tab one</div>
<div id="tabs-2"> </div>
Thanks,
#paul
I think id="example" should be down one level with the class="tabs" div.
<div id="example" class="tabs" style="width: 698px;">
<ul style="list-style: none;">
<li>This is Tab one</li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=5" >Specifications</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=1" >Exterior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=2" >Interior</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=3" >Dimensions</a></li>
<li><a href="/Version/Details?ID=#ViewBag.versionId&grpId=4" >Feature</a></li>
<li><a href="/Version/Details?versionID=#ViewBag.versionId&grpId=6" >Instrument Panel</a></li>
<li>Color</li>
</ul>
<div id="tabs-1" style="width: 698px;">
Overview
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
<div id="tabs-5">
</div>
<div id="tabs-6">
</div>
<div id="tabs-7">
</div>
<div id="tabs-8">
</div>
</div>
</div>
EDIT:
$('#example').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#example li").removeClass("ui-corner-top").addClass("ui-corner-left");
$('#example')
What is the third line in your jquery supposed to be doing? Is it generating a javascript error that prevents the tabs from functioning correctly?
Your problem is your hrefs in your anchor tags. You have to format them as "#tabs-number".
Here is a jsfiddle showing you it working (completely without any CSS styling since that was not provided in your example either. But each tab being clicked takes you to different tab contents.
http://jsfiddle.net/UBxPJ/
But basically, the change is:
<li>Overview</li>
<li><a href="#tabs-2" >Specifications</a></li>
<li><a href="#tabs-3" >Exterior</a></li>
<li><a href="#tabs-4" >Interior</a></li>
<li><a href="#tabs-5" >Dimensions</a></li>
<li><a href="#tabs-6" >Feature</a></li>
<li><a href="#tabs-7" >Instrument Panel</a></li>
<li>Color</li>