I am creating a simple page with a number of tabs, and inside each tab there will be 3 sections which I am using an accordion for as this is the best solution for what I want. Everything works perfectly on the first tab, the accordion operates as it should and the content is rendered fine.
When I click on tab2 the content is rendered as just text with no accordion applied. I have used the dev tools and the accordion class is not being applied to the accordion div in tab2 for some reason. It may be that I am missing something really fundamental here but I would appreciate any help.
Excuse the basic code layout here but for demonstration purpose this is what the html might look like.
<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
<ul>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div id="tabs-1"><!-- Start of tabs-1 -->
<div id="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-1 -->
<div id="tabs-2"><!-- Start of tabs-2 -->
<div id="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>
You have multiple divs with the same id, namely accordion. Either name them seperately, or use a class with your selector. For example:
<body>
<h1 class="mainTitle">Page Title</h1>
<div id="tabs">
<ul>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div id="tabs-1">
<div class="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-1 -->
<div id="tabs-2"><!-- Start of tabs-2 -->
<div class="accordion">
<h3>Section 1</h3>
<div>
This section is for general information relating to this project.
</div>
<h3>Section 2</h3>
<div>
Section 1 content
</div>
<h3>Section 2</h3>
<div>
Section 2 content
</div>
</div><!-- End of accordion -->
</div><!-- End of tabs-2 -->
</div><!-- End of tabs -->
</body>
And then:
$( ".accordion" ).accordion();
You have two <div>s with the same ID ("accordion"). I would recommend changing them to use a class of "accordion" rather than an ID, then change your jQuery to apply the accordion effect to <div.accordion>.
Related
i am implementing tab bar using jquery mobile.I need to show different pages on different buttons on tab bar .But it is showing in same page.
http://jsfiddle.net/ravi1989/654gX/
<div data-role="navbar">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div data-role="content" class="content">
<div id="tab-1">
<h2>Here is the first tab</h2>
</div>
<div id="tab-2">
<h2>Here is the second tab</h2>
</div>
<div id="tab-3">
<h2>Here is the third tab</h2>
</div>
</div>
You need to restructure you app, first follow this structure given at jquery mobile docs.
Secondly navbars are supposed to be inside footer or header, so wrap you navbar around footer then you need fixed header and footer with same data-id so the pages transition between dynamically keeping the same header and footer, which looks like tabs, example
<div data-role="page" id="one">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->.
<div data-role="page" id="two">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Different page same footer.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page2 -->
Js fiddle example
I am attempting to have a jQuery Mobile collapsible listview expand upwards instead of the default downwards direction. The listview code I have is:
<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1">
<h1>Menu</h1>
<ul data-role="listview" id="lvpage1">
<li data-icon="false">Page2</li>
<li data-icon="false">Page3</li>
<li data-icon="false">Page4</li>
</ul>
</div>
When the Menu h1 tag is clicked, the listview expands downwards. What I'm trying to do is get the menu to expand out the top of the Menu h1 tag, so the Menu h1 tag then appears at the bottom of the listview with all li items above it.
I'm guessing it has something to do with binding the slideUp effect (which normally hides a div) to the expand event but can't figure it out!
Any help would be appreciated.
Try moving the collapsible content before your collapsible element
Does this work?
http://jsfiddle.net/SnRx8/
JS:
$('.ui-collapsible-content').insertBefore('#mpage1');
HTML
<div data-role="page" class="type-home">
<div data-role="content">
<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1">
<h1>Menu</h1>
<ul data-role="listview" id="lvpage1">
<li data-icon="false">Page2</li>
<li data-icon="false">Page3</li>
<li data-icon="false">Page4</li>
</ul>
</div></div>
</div>
For a project that I was working on the solution was to set bottom position. If you set absolute position and define the bottom distance, the sections will open upward.
E.g. http://jsfiddle.net/ea4duyfa/
#test-set{
position: absolute;
top: 100px;}
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" id="test-set">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
I am having problems with adding a page to a listview sublist (li)..
I'm doing something like this:
<ul data-role="listview">
<li>Click me
<ul>
<li data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</li>
</ul>
</li>
</ul>
Is there a better way to do this as I have a few problems with it...
The fixed header and footer does'nt work on IOS 6 (iphone 3GS)
Padding and Margins need setting to 0.
Is this the best way to do this?
Normally a list will contain a sub list with links but I want to sublist to contain the page detail (information page).
Update: Trying this but the link does not link to the page gererated:
$.each(data.id, function(index, value){
output += <li>\
<a href="#mypage">\
<h3 class="h3_title">link title</h3>\
</a>\
</li>\
<div id="mypage" data-role="page">\
<div data-role="header" data-position="fixed">\
<h1>Page Title sub</h1>\
</div>\
<div data-role="content">\
one<br/>\
</div>\
<div data-role="footer" data-position="fixed">\
<h4>Page Footer</h4>\
</div>\
</div>';
...
You could just add the page as a separate div outside the ul tag and make the li a link to it. For example:
<div id="your-current-page" data-role="page">
<ul data-role="listview">
.
.
.
<li>Click me
.
.
.
</ul>
</div>
<div id="your-second-page" data-role="page">
You can put here whatever you'd like
</div>
i m using Yii framework component CLISTVIEW on page load with ajax accordion stop working
i have tried follow, but it didn't work
$(".items").on('load',function(){
$(this).accordion();
});
when i change the event type in on form load to click it starts working. what would be the right event type to call here.
Accordion plugin expects this kind of content:
<h3>Section 1</h3>
<div>
<p>Content section 1</p>
</div>
<h3>Section 2</h3>
<div>
<p>Content section 2</p>
</div>
But if I've understand your situation, you have this kind of code:
<body>
<div class="items">
<h3>Section 1</h3>
<div>
<p>Content section 1</p>
</div>
</div>
<div class="items">
<h3>Section 2</h3>
<div>
<p>Content section 2</p>
</div>
</div>
</body>
With this script firs I .wrapAll .items elements and then I rewrite elements as accordion plugin want:
<script>
$(function() {
$('.items').wrapAll($('<div>').attr('id','accordion'));
$.each($('.items'),function(){
$(this).remove();
$('#accordion').append($(this).html());
});
$('#accordion').accordion();
});
</script>
HTML will be:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Content section 1</p>
</div>
<h3>Section 2</h3>
<div>
<p>Content section 2</p>
</div>
</div>
And accordion will work fine.
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>