I want to animate a collapsible set in jquery mobile 1.4.2. Unfortunately I haven't found anything. All animated scripts use version 1.3.2 oder 1.4.0.
I'm still a newbie and don't know if I just can switch down to 1.4.0 or 1.3.2 keeping my design?
What can I do?
Here is a way to do it:
Instead of a collapsibleset, use a wrapper div with the class="ui-collapsible-set", this gives you the collapsible set styling, but then allows you to implement the logic:
<div class="ui-collapsible-set">
<div data-role="collapsible" class="animateMe">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" class="animateMe">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible" class="animateMe">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
I have added a class of animateMe to each collapsible for convenience in adding a handler:
$(".animateMe .ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
//collapse all others and then expand this one
$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
$(".ui-collapsible-content", current).slideDown(300);
} else {
$(".ui-collapsible-content", current).slideUp(300);
}
});
This code is a click handler on each collapsible header. It checks to see if the clicked collapsible is currently expanded or collapsed. If it is expanded, we simply collapse it with the slideUp animation. If it is collapsed, we first collapse any expanded items and then expand this one with the slideDown animation.
If you want to allow multiple items to be expanded at the same time, just remove this line:
$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
Here is a working DEMO
Related
I want to set a default tab in jQuery Mobile.
My source code:
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
$("#tabs").tabs({ active: 0 });
It worked but has no background color, because the first tab is not actually clicked.
I want to set default tab with background when I login in.
No background color demo
To set the active tab, try:
$( "#tabs" ).tabs("option", "active", 1);
Here is a working DEMO
UPDATE: the blue background on the tab button comes from the class ui-btn-active. Either add this class to the button, or instead of setting the active tab, trigger the click event on the appropriate button: http://jsfiddle.net/ezanker/c29gd4h6/1/
I have added class="ui-btn-active" in first tab-li
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->
If not work then try below It working for me when page load only I mean refresh page in browser
Put following code in jquerymobile pagecreate event that will make every first tab selected
$('[data-role="tabs"] a:first').each(function() {
$(this).click();
});
I had put above lines into pagecreate event
$(document).on("pagecreate", "#homepage", function(event) {
$('[data-role="tabs"] a:first').each(function() {
$(this).click();
});
});
In above line #homepage is my page id and pagecreate is event of jquery-mobile that fire when page load/init
HTML
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>Default</li>
JS
$(document).on("pagecreate", function (event) {
$('#tab-one').trigger('click');
});
I found the existing mentioned solutions had issues:
the one by #ezanker showed the content but didn't set the tab button as active
the one by #Devendra Chhaiya clicked any first link that the tab content contained also! :-)
I also found that the tab wasn't remaining selected when coming back to that page, so I used this solution to fix that too.
there was also an issue with pages loading into tab content, so I had to fix that too
in addition (yes, there's more :-) I wanted to selected a specific tab based on the requirements of that specific page, so I added a class select-this-tab on page generation from the server.
So I modified the one by #Devendra Chhaiya to click only the actual tab button (and not any tab content, keep the tab selected, and also prevent content loading into the tab area. I had to move the trigger from pagecreate to pageinit for it to work:
/*
* https://stackoverflow.com/questions/13837304/jquery-ui-non-ajax-tab-loading-whole-website-into-itself/17384908#17384908
*/
jQuery(function () {
jQuery('base').remove();
jQuery("#tabs").tabs();
});
$(document).on('pageinit', function () {
console.log('pageinit');
/*
* Ensure the correct tab of a set is selected (and only once)
* https://stackoverflow.com/questions/25336233/jquery-mobile-default-tab/64080164#64080164
*/
$('[data-role="tabs"] [data-role="navbar"] ul li.select-this-tab').each(function () {
console.log('Clicking tab');
$(this).removeClass("select-this-tab").find("a").click();
});
/*
* Ensure a tab REMAINS selected when coming back to that page.
* https://stackoverflow.com/questions/16752704/tab-active-state-in-jquery-mobile/23725612#23725612
*/
$('div[data-role="tabs"] [data-role="navbar"] a').click(function (e) {
e.preventDefault();
$('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
$(this).addClass('ui-btn-active ui-state-persist');
});
You can remove the console.log lines which you can just use to prove the code actually fires.
I have the following Panel in my jQuery mobile app , I want to make it to be drop down as appears in the following image rather than to be slide from the page edge . Is this can be done in jQuery mobile and How can i do this ?
<div data-role="page" id="MainPage" >
<div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data- position="right" data-position-fixed="true">
<ul data-role="listview"><li>
<a href="#MainPageheader" data-rel="close" class="ui-btn" >Close</a></li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap- toggle="false" data-fullscreen="false">
<div> <font size="6px"> Main Page </font></div>
</div>
<div data-role="content" >
//content
</div>
</div>
You can use popup widget to simulate dropdown menu.
As of jQuery Mobile 1.4, a new attribute data-arrow is added to popup widget. This creates an arrow which can be positioned anywhere in popup.
Arrow:
The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true, false, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as "l,t,r,b" and false or "" indicates that the popup should be displayed without an arrow.
HTML
<div data-role="popup" id="popupID" data-arrow="t">
<!-- content -->
</div>
Add data-rel="popup" to button to call popup.
Menu
To modify arrow's size, check this link.
Demo
The documentation says
The footer bar has the same basic structure as the header except it uses the data-role attribute value of footer.
But this fiddle shows that I can't put controls in the footer the same way as I can the header.
Q: How can I write a footer such that there is text followed by an h1 tag followed by text, and they are all on the same line?
You can use the same classes jQM applies to the header elements (ui-btn-left, ui-title, ui-btn-right):
<div data-role="footer">
<a href="JavaScript:;" class="ui-btn-left" >c</a>
<h3 class="ui-title">Footer</h3>
<a href="JavaScript:;" class="ui-btn-right" >d</a>
</div>
Here is your updated fiddle: http://jsfiddle.net/ezanker/mXjHJ/86/
I am using jquery mobile for my mobile app. I want to make a page where data-role=content should be scroll when it is overflow but it is scrolling whole page with header and footer. I want to scroll only content div and header and footer divs should be fixed. I have already seen iscrollview but its only working in iPhone or any other way.
Please suggest how can I make this design.
Just add a data-position="fixed" to your header and footer. Check this example below:
<div data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">...</div>
<div data-role="content">...</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">...</div>
</div>
Take a look at http://cubiq.org/iscroll-4; it may not be jQuery, but it is a great JavaScript plugin for Mobile Scrolling.
You would add an ID to each UL and attach a scroll to each one separately.
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.