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>
Related
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>
I am searching a plugin in jQuery mobile for tab implementation. tabs must be in content of the page. This is wat I have...
<div data-role="page" id="nav">
<div data-role="page" id="nav">
<div data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
</ul>
</div>
<div data-role="page" id="one" data-transition="slide">
<div data-role="content" style="background-color:#ff0;">
<h1>One</h1>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h3>
Footer
</h3>
</div>
</div>
When i click on page id "one". it is not displaying its respective content.
Can anyone pls help me.
Or you can use my tabview plugin. Based on JQM collapsbile set, you just need to replace JQMs collapsible and collapsible set widget with my versions. Old collapsibles will continue working as normal. When you add data-type="horizontal" to a collapsible set, it becomes ... tabs...
Demo here, Repo on Github.
I like the other solution, too.
I modified jQuery.mobile-tabs to allow the tab bar to be placed anywhere within the page. Is this what you had in mind?
I'm new to jquery mobile and need some help to move further in my application
I used NAVBAR with two buttons view and two buttons are navigating fine and displaying different list views & when I click on list view item the page is navigating to another HTML page and displaying related data but the problem is I'm not able to view navbar in next page...
I want the navbar to be constant for all pages like tabgroup activity in android.
anyone please help me with good example and application or show me some good links to achieve this...
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" id="nav1">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
<div class="ui-grid-but" id="list">
<div class="ui-block-a">
<a href="#lv1" data-role="button" id="button1" >
<img src="task.png" alt="Tasks" /></a>
</div>
<div class="ui-block-b">
<a href="#lv2" data-role="button" id="button2">
<img src="reminder.png" alt="Reminders" /></a>
</div>
</div>
<div class="def_content_div" id="dashboard">
<ul data-role="listview" data-inset="true">
<li>List View 1 </li>
<li><a href="#lv2" >List View 2</a> </li>
<li><a href="#lv3" >List View 3</a> </li>
<li><a href="#lv4" >List View 4</a> </li>
</ul>
</div>
<div class="content_div" id="deals">
<ul data-role="listview"data-inset="true">
<li> List View 5</li>
<li> List View 6</li>
<li>List View 7</li>
<li>List View 8</li>
</ul>
</div>
</div>
The best way to achieve this is to put your navbar inside a JQM header and use the same data-id for every header. i.e.
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
You have to include the above code snippet in every listview page. That will give the appearance of a constant fixed nav menu.
Here is an example as requested http://jsfiddle.net/codaniel/z5VYF/1/
I got the solution from http://jquerymobile.com/demos
According to codaniel's answer, we need to include the code snippet in every listview page.
And then, we need to add the following class to the "current" nav-button of every page.
class="ui-btn-active ui-state-persist"
For the first front page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
And the second page:
<div data-role="header" data-posistion="fixed" data-id="constantNav">
<div data-role="navbar">
<ul>
<li>Dashboard</li>
<li>Deals</li>
</ul>
</div>
</div>
whenever my list is small the jquery leave some white space after few theme space it happens only in portrait orientation in the IPAD and works fine in landscape and portrait mode in browser and landscape mode in IPAD
here is a sample of one page-role my portrait resolution is 768 X 1024
<div data-role="page" id="videos" data-theme="e">
<link rel="stylesheet" href="videos.css" /><!-- my custom css -->
<div data-role="header" data-position="fixed" data-theme="e"><!-- header -->
<div class="ui-grid-b center-align">
<div class="ui-block-a classBlock pad" data-class="1">
<a data-rel="external" data-ajax="false" href="./FingerTips/index.html" data-role="button" class="revise-menus">Collection</a>
</div>
<div class="ui-block-b classBlock" data-class="2">
<div class="titles">Store</div>
<div data-role="controlgroup" data-type="horizontal" >
<a href="#booksnsubjects" data-role="button" >Books</a>
<a href="#appview" data-role="button" >Apps</a>
Video
</div>
</div>
<div class="ui-block-c classBlock" data-class="1">
<img src="images/cart.png" id="linkcart">
<div id="cart-item"></div>
</div>
</div><!-- /grid-b -->
</div>
<div data-role="content"><!-- content -->
<ul data-role="listview" data-theme="c" id="class-lists">
<li><a data-class="IV" href="#subjects" data-transition="slide">VI</a></li>
<li><a data-class="IIV" href="#subjects" data-transition="slide">VII</a></li>
<li><a data-class="IIIV" href="#subjects" data-transition="slide">VIII</a></li>
<li><a data-class="IX" href="#subjects" data-transition="slide">IX</a></li>
<li><a data-class="X" href="#subjects" data-transition="slide">X</a></li>
<li><a data-class="XI" href="#subjects" data-transition="slide">XI</a></li>
<li><a data-class="XII" href="#subjects" data-transition="slide">XII</a></li>
</ul>
</div><!-- content -->
</div><!-- /page -->
please help me out of it is i am doing something wrong
i found solution: using new version of jquery mobile JS solves the issue