Is it possible to make the UI Tabs closed by default, until clicked?
The 2 week search is still on! Such a complex/bloated script, and yet no simple way to control
Try this jsfiddle,
$("#tabs").tabs({
collapsible: true,
active: false
});
This could use some polish, but it should get you on the right track.
http://jsfiddle.net/vbmMJ/2/
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$(".tab-content").hide();
$(".ui-tabs-active").removeClass("ui-tabs-active");
$(".ui-state-active").removeClass("ui-state-active");
$(".ui-tabs-anchor").click(function() {
$($(this).attr("href") + " .tab-content").first().show();
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
<div class="tab-content">
tab 1 content
</div>
</div>
<div id="tab-2">
<div class="tab-content">
tab 2 content
</div>
</div>
</div>
</body>
</html>
Related
I want to display rgraph bar chart on second page of my multipage Jquery Mobile App. Here is the structure of my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
<script type="text/javascript" src="rgraph/libraries/RGraph.common.core.js"></script>
<script type="text/javascript" src="rgraph/libraries/RGraph.bar.js"></script>
<script src="rgraph/libraries/RGraph.gauge.js"></script>
<script src="rgraph/libraries/RGraph.cornergauge.js"></script>
<script src="rgraph/libraries/RGraph.common.dynamic.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! If you click on the link below, it will take you to Page Two.</p>
Go to Page Two
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
// My chart should come here
<canvas id="cvs" width="500" height="250">[No canvas support]</canvas>
<script>
$(document).ready(function ()
{
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
})
</script>
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
But chart is showing on the first page (main page).Is Jquery mobile Document.ready function is working for child pages?if not what should i change to make this working..please help
For jQuery Mobile, don't use $(document).ready(function ().... Instead use the provided page and/or pagecontainer events. For your example you could put the script at the bottom of the html (outside all page markup) and inside a pagecreate event for pagetwo:
$(document).on("pagecreate", "#pagetwo", function(){
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
});
Here is a working DEMO
I am new for jquery mobile. I got two pages which are page1.html and page2.html. page1 will navigate to page2 and inside page2 got a navbar.
Here is my code
page1.html navigate to page2
$.mobile.pageContainer.pagecontainer("change", "page2.html", {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
reloadPage: false,
changeHash: true
})
page2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div id="fragment-1">
<p>This is the content of the tab 'One', with the id fragment-1.</p>
</div>
<div id="fragment-2">
<p>This is the content of the tab 'Two', with the id fragment-2.</p>
</div>
<div id="fragment-3">
<p>This is the content of the tab 'Three', with the id fragment-3.</p>
</div>
</div>
</div>
</div>
</body>
</html>
It can be work if i run page2 individually. But problem come once i change page from page1 to page2. please dont reply me add rel="external" It may cause white screen issue once i using rel="external"
This is a known jQuery Mobile 1.4 bug, it will be fixed in jQuery Mobile 1.4.3 version.
Read more about it here: https://github.com/jquery/jquery-mobile/issues/7169
There you will also find a workaround.
There's one other solution, it requires you to dynamically create tab widget, something like this:
$(document).on("pagecreate", "#p2", function () {
var tabs = '<div data-role="tabs" id="tbPaymentMethod"><div data-role="navbar"><ul><li>Tab 1</li><li>Tab 2</li><li>Tab 3</li></ul></div><div id="tabCash"><p>This is the content of the tabwith the id fragment-1.</p></div><div id="tabCcard"><p>This is the content of the tabwith the id fragment-2.</p></div><div id="tabCheck"><p>This is the content of the tabwith the id fragment-3.</p></div></div>';
$("#p2 .ui-content").append(tabs).enhanceWithin();
});
Working example: http://jsfiddle.net/Gajotres/JAuwV/
Wondering if anyone has been able to use the Dygraph in conjunction with a jquery mobile. Say I define the following page:
<html>
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="/js/dygraph-combined.js"></script>
</head>
<body>
<div class="page" data-role="page">
<div class="header" data-role="header">
<h1>Header</h1>
</div>
<div class="ui-content" data-role="main">
<div id="graph" style="border:1px solid"></div>
</div>
<div class="footer" data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
//<![CDATA[
new Dygraph(document.getElementById("graph"), //"http://localhost:8081/twenty20/scores");
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
//]]>
</script>
The graph does not get displayed. All I see is a blank div. But if I replace the body with just
<body>
<div id="graph"></div>
</body>
This works fine.
Could it be to do with the timing of when I create my Dygraph object?
For jQuery Mobile you should use their documented page structure and the events they provide for when the page is ready:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div role="main" class="ui-content" >
<div id="graph"></div>
</div>
</div>
Use CSS to set the graph size:
#graph { height: 300px; }
In JavaScript, it seems that pagecreate, pagebeforeshow do not work for the dygraphs, so you can use pageshow or another event that comes after the page is rendered:
var g1;
$(document).on("pageshow", "#page1", function(){
if (!g1){
g1 = new Dygraph(document.getElementById("graph"),
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
}
});
Here is a DEMO
jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});
I’ve run into a problem using accordions within tabs, the initially inactive accordions do not render their content correctly when their tab is selected.
Reading around I see the reason for this is that the inactive tabs have display:none initially, so the height of the divs within the accordion do not get calculated correctly. None of the suggested solutions work for me.
Have has anyone overcome this or have a work around?
Here's some example code of the problem:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="main" class="round roundB">
<div id="tabs">
<ul>
<li>Tab 1 </li>
<li>Tab 2 </li>
</ul>
<div id="tab1">
<div id="accordion1">
<h3>Section 1</h3>
<div>
<p>
TAB 1 Accordion 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
TAB 1 Accordion 2
</p>
</div>
</div>
</div>
<div id="tab2">
<div id="accordion2">
<h3>Section 1</h3>
<div>
<p>
TAB 2 Accordion 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
TAB 2 Accordion 2
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I had the same problem before.
The solution is: You must active accordion before tabs.
$("#accordion").accordion();
$("#tabs").tabs();
Maybe you need left align.
.ui-accordion-header{
text-align: left;
}
good luck
After reading the stated problem, it was my impression that a problem I have run into was of a similar nature. Using the accordion functionality within a tab was forcing my accordion content to contain a scrollbar, a feature I did not want.
For some reason or another, the current solution provided did not work for me.
The solution I found was to overwrite the default accordion setting of autoHeight (default of true, overwrite to false)
$("#accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
Initialize accordion when you activate tab:
sample:
$('.selector').bind('tabsadd', function(event, ui) {
...
});
your sample:
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$("#accordion1").accordion();
$("#accordion2").accordion();
});
});
</script>
Maybe that you will need to initialize every accordion special for each tab.
Or use latest UI lib:
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
$( "#tabs" ).tabs({
load: function(event, ui) {
$("#"+ui.panel.id+" .accordians:first").accordion();
}
});
This worked when using ajax html with tabs.
None of the above worked for me. For me, the trick was to change from using unique div IDs for each accordion to a single class identification for all accordions. That is, change: <div id="accordion1>, <div id="accordion2>,etc... to<div class="accordion"> within each of the tabs.
You may also need to add to your $(document).ready function
$(".accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$(".accordion").accordion("resize");
});
So the format would be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$(".accordion").accordion("resize");
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li>User</li>
<li>Folders</li>
<li>Decks</li>
</ul>
<div id="tabs-1">
<div class='accordion'>
<h3>Header 1</h3>
<div</div>
<h3>Header 2</h3>
<div></div>
<h3>Header 3</h3>
<div><</div>
</div>
</div>
<div id="tabs-2">
<div class='accordion'>
<h3>Header 4</h3>
<div</div>
<h3>Header 5</h3>
<div></div>
<h3>Header 6</h3>
<div><</div>
</div>
</div>
<div id="tabs-3">
<div class='accordion'>
<h3>Header 7</h3>
<div</div>
<h3>Header 8</h3>
<div></div>
<h3>Header 9</h3>
<div><</div>
</div>
</div>
</div>
</body>
</html>
See
http://bugs.jqueryui.com/ticket/5601
.ui-helper-clearfix { display:block; min-width: 0; overflow: hidden; }
just read carefully http://docs.jquery.com/UI/Tabs#
there is an answer. it's simpliest way