I am working on a site that uses Bootstrap for desktop and jQuery Mobile for mobile devices. I am running into a problem with the HTML structure for tabs in Bootstrap vs. pages in jQuery Mobile. Essentially the jQuery Mobile pages end up being nested if I use Bootstrap's HTML (as seen below). When the jQuery Mobile data-role="page" tags are nested it does not seem to work. Any ideas?
<div class="tabbable" data-role="page"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1" data-role="page">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2" data-role="page">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
The solution I used to solve this problem was a jquery mobile plugin called subpage.
I changed the nested pages to subpages and it worked.
Related
I am trying to use jquery mobile panels and it hides the slider when I open the panel, it removes/hides the slider. Adding rel="external" to the button for panel doesn't do anything as it is not a link to physical page.
Here is an example given in fiddle:
http://jsfiddle.net/dhavaljani/zZKhT/
Html for panel
<div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-theme="d" data-content-theme="d">`
<ul data-role="listview" data-theme="d" data-icon="false">
<li>Home</li>
<li>Services</li>
<li>Case Studies</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
123-456-7890
</div>
This is a bug in jQuery Mobile 1.4, as panel when first opened, it wraps it's siblings in a <div class="ui-panel-wrapper"> other than header and footer.
This problem isn't present in previous versions of jQuery Mobile.
<section class="slider ui-panel-wrapper">
<!-- elements -->
</section>
Demo
I am building an MVC application and am trying to use twitter bootstrap to build a responsive ui. I have setup my navigation as follows:
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active">Dashboard</li>
<li>Sell</li>
<li>Products</li>
<li>Customers</li>
<li>Settings</li>
<li>Help</li>
</ul>
</div>
<div>
<div class="tab-content">
<div id="panel1" class="tab-pane">
page 1
</div>
</div>
<!--Panels 2-6 are omitted to save space -->
</div>
</div>
My question is what is optimal solution.
1) To find a way, to put this in a Razor Layout and load the individual panes as RenderSections
2) To scrap the Razor Layout and just apply the navigation to all content pages
In this case I would Probably recommend using RenderPage vs RenderSection as it would appear that you will always have the same content rendered in each panel. So most of your work will be done in your _Layout.cshtml. Your body is going to look like this:
<body>
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active">Dashboard</li>
<li>Sell</li>
<li>Products</li>
<li>Customers</li>
<li>Settings</li>
<li>Help</li>
</ul>
</div>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Then you are going to have an Index.cshtml which will act as your landing page and it will look something like this:
<div>
#Html.Partial("ViewName")
// Reapeat for each tab
</div>
Then is each tab partial you will have your content for the tab:
<div class="tab-content">
<div id="panel1" class="tab-pane">
page 1
</div>
</div>
This can be done using layouts. Here are the basic steps:
Create a layout that includes your navbar. Put the layout in the /Views/Shared folder. (e.g. _LayoutMain.cshtml)
<body>
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active">Dashboard</li>
<li>Sell</li>
<li>Products</li>
<li>Customers</li>
<li>Settings</li>
<li>Help</li>
</ul>
</div>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Create a template (optionally with a controller action) for each nav bar item (Sell, Products, Customers, etc.)
In each template, reference your layout like so:
#{
Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
Then add the following javascript code to the main layout page. This code actively selects which nav bar item you've currently clicked:
<script>
$(document).ready(function () {
var pathname = $(location).attr('pathname');
$('a[href="' + pathname + '"]').parent().addClass('active');
});
</script>
The nice thing about this approach is that you can nest as many layouts as you want. So for example, you could have a main navbar and within one of those pages you could have another navbar (such as tabs/pills) using the same approach.
This might be helpful too:
http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor.
I am Using cordova-2.1.0, JQueryMobile-1.3.0 for iOS app. Some of the pages in my app has very small content still that pages scrolls. I am testing it on iOS 6. How to stop scrolling of the pages having small content. I dont want to use the preventDefault.
It's just looks normal when I tried in the fiddle http://jsfiddle.net/JEqKh/
this is the HTML I used. Try import the libraries in the <head></head> tag
<div data-role="page" id="menu">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>Header</h3>
</div>
<div data-role="content">
<ul data-role="listview" id="mainMenu">
<li style="height:50px"><img src="a.png" class="ui-li-icon"/>Menu1
</li>
<li style="height:50px"><img src="b.jpg" class="ui-li-icon"/>Menu2
</li>
</ul>
</div>
</div>
My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.
I'm building a mobile app with Cordova, Backbone for the MVC structure and jQuery Mobile for UI.
This works well except for the user experience while loading a new page. Actually a new page is created dynamically, and when it's ready, jquery mobile handles the page transition to this page. In a mobile browser this transition is slower than in a classic browser, so while page is loading the user sees a blank white screen and then appears the new page.
The matter is about my header/footer bar. I'd like it to keep showing while the content is loading, so the user will see the header/footer and only a blank/white content during the transition.
So this is a classic page structure:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
For me the easiest way to go is like that:
<div data-role="header"></div>
<div data-role="page">
<div data-role="content"></div>
</div>
<div data-role="footer"></div>
And fix the content with CSS positioning.
But I'd like to find something smarter.
What do you think of having a single JQM page, with Backbone just updating the <div data-role="content"> for each route? What about JQM rendering? And what about transitions?
Documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html
Basically you put a data-role="footer" element in each page like this:
<div data-role="footer" data-id="foo-footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Friends</li>
<li>Albums</li>
<li>Emails</li>
<li><a href="d.html" >Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Notice the data-id, it must be the same on all data-role="footer" elements to take advantage of the persistent toolbar option. The data-role="footer" element also must have the data-position="fixed" attribute.
Here is a demo: http://jsfiddle.net/SpRAA/