I tested the Autodivider feature of the JQM Listview along with the Count bubbles, but i just discovered that they when i set data-autodivider="true" the count bubbles disappears:
function setAutodividers() {
$("#list-1").listview("option", "autodividers", true).listview("refresh");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
Set Autodividers
<div data-role="content">
<ul id="list-1" data-role="listview" data-inset="true">
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h2>Avery Walker</h2>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!</p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h2>jQuery Team</h2>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h2>Stephen Weber</h2>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
What should i do to have a Listview with autodividers and count bubbles?
I just need to display the count of the underlying list items.
Related
I am developing a tizen web application using html, js, tau and jquery.
I need a context menu when user click on a specific position.
Is it possible to do that ?
I tried,
$("#myContextMenu").popup('open');
it shows
TypeError: $(...).popupwindow is not a function
Any help will be appreciated.
You need to add TAU library. TAU has different types of Context menu.
Try like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
<meta name="description" content="Tizen Mobile Application"/>
<title>Hello Tizen</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/main.js"></script>
<script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
</head>
<body>
<div class="ui-page" id="list-styles-page">
<div class="ui-header" data-position="fixed">
<h1>Home</h1>
</div>
<div class="ui-content">
<ul class="ui-listview">
<li class="ui-group-index">Horizontal Style</li>
<li class="ui-li-anchor">Horizontal Basic</li>
<li class="ui-li-anchor">Horizontal Scroll</li>
<li class="ui-li-anchor">Horizontal 2line</li>
<li class="ui-group-index">Vertical Style</li>
<li class="ui-li-anchor">Vertical Basic</li>
</ul>
<div id="ctxpopup_horizontal_basic" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
</ul>
</div>
<div id="ctxpopup_horizontal_scroll" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Close</li>
</ul>
</div>
<div id="ctxpopup_horizontal_2line" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Select All</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Paste</li>
</ul>
<ul class="ui-listview">
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Dictionary</li>
<li class="ui-li-anchor">Translate</li>
<li class="ui-li-anchor">Share via</li>
</ul>
</div>
<div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
</ul>
</div>
</div>
</div>
</html>
here is a demo of vertical style (basic)
Please see Tizen Online Sample 'TAUUIComponents' for TAU examples
I have tried everything I can think of, but my page loads weirdly. With no style or form, and for the life of me, I have no clue why! Here is my code below : and attached is a picture of the outcome I get when running the code.
My outcome when I run this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
<ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:centure;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">Click
Me</button>
</div>
</div>
</body>
</html>
It's a simple typo. The first <ul> in your header's navbar is not closed.
Somehow jquery-mobile dont like this and stops rendering with a error. You should see this error in your browsers dev tools.
If your references to jquery and jquery-mobile are correct. it should work if you close the <li> tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="_assets/js/index.js"></script>
<!-- jQuery Mobile -->
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
</ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:center;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">
Click Me
</button>
</div>
</div>
Beside that, you have others error in your code.
You should insert your personal javascript code <script src="_assets/js/index.js"></script> after jquery and jquery-mobile. If you do so, you're always sure, that all libraries are loaded before you use them in your "personal" javascript file.
There is no need to include the same CSS Files twice. like you did with
css/themes/default/jquery.mobile-1.4.5.min.css and _assets/css/jqm-demos.css
In Jquery-mobile, there is the possibility to include CSS and/or Javascript file inside of the data-role="page" container. But in this case it makes absolut no sense.
The class ui-btn-active is unnecessary inside of the navbar <div>. If you want to set a button of your navbar active, you have to include this class inside of the <li> tag
And you have a typo inside of your footer. centure
I need a clickable "table" in my app.
The closest I have gotten is using listviewer and links in combination with grid.
The example below is what I need (a clickable tablerow and a separate button to the right).
My problem is that I cant line up the "body-columns" with the "header-titles" becuase the button in my "table body" offsets the grid.
http://jsfiddle.net/lokkin/p9M8p/3/
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li data-role="list-divider">
<div class="ui-grid-d">
<div class="ui-block-a">TRK</div>
<div class="ui-block-b">STATUS</div>
<div class="ui-block-c">NR</div>
<div class="ui-block-d">PFIX</div>
<div class="ui-block-e">EHNR</div>
</div>
</li>
<li> <a href="#Select" class="ui-grid-d">
<div class="ui-block-a">
TRUCK1
</div>
<div class="ui-block-b">
123
</div>
<div class="ui-block-c">
ABC123
</div>
<div class="ui-block-d">
456
</div>
<div class="ui-block-e">
789
</div>
</a>
Details
</li>
</ul>
</div>
</body>
</html>
Just add right padding to the divider to match the listitems:
.ui-li-divider{
padding-right: 56px !important;
}
Updated FIDDLE
I have just started using jquery mobile and got a weird thing happening. When I click the navigation bar quickly(on different item each time) my footer disappears on one of these pages.
Here is my code (that's the main file but all other files are identical with the exception of ui-active class on the nav bar item)
<!DOCTYPE html>
<html>
<head>
<title>Page Title in head</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/lib/jquery.mobile-1.0b1.css" />
<script type="text/javascript" src="js/lib/jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.0b1.js"></script>
<script>
$.mobile.defaultPageTransition='none';
//$.mobile.useFastClick='false';
</script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>Friends</h1>
Home
</div>
<div data-role="content">
<p>
This is the test
</p>
<ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
<li data-role="list-divider">
A
</li>
<li>
Adam Kinkaid
</li>
<li data-role="list-divider">
B
</li>
<li>
Bob Cabot
</li>
<li data-role="list-divider">
C
</li>
<li>
Caleb Booth
</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-id="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
<div data-role="navbar">
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /page -->
</body>
</html>
Should I just stop using jquerymobile footers or does anyone know a workaround?
Thank you!
I am running jquery-mobile alpha 1 and I am creating a list with a fixed header. When I view the page the header is on top of the first list item. The only solution I have found so far is to put a hidden list item with enough space at the top for the header to cover. Is there any other solution?
Here is an initial example:
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery Mobile List test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true" id="list">
<div data-role="header" data-position="fixed">
<h1>This is a header</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <div>Item 1</div> </li>
<li> <div>Item 2</div> </li>
<li> <div>Item 3</div> </li>
<li> <div>Item 4</div> </li>
<li> <div>Item 5</div> </li>
<li> <div>Item 6</div> </li>
<li> <div>Item 7</div> </li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
For the record the problem was that the header had 'data-fullscreen="true".
<header data-fullscreen="true>
After removing this attribute the list is placed below the header.