DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Top 13 Mobile App Development Platforms You Need
  • The Definitive Guide to Developing Portable Tizen Apps

Trending

  • Build Quicker With Zipper: Building a Ping Pong Ranking App Using TypeScript Functions
  • Five Tools for Data Scientists to 10X their Productivity
  • Distributed Tracing Best Practices
  • Spring Authentication With MetaMask
  1. DZone
  2. Coding
  3. Frameworks
  4. Using the Autodivider Feature in jQuery Mobile

Using the Autodivider Feature in jQuery Mobile

Raymond Camden user avatar by
Raymond Camden
·
Dec. 19, 13 · Interview
Like (0)
Save
Tweet
Share
6.57K Views

Join the DZone community and get the full member experience.

Join For Free

a few days ago a reader asked me an interesting question. he wanted to create a list of dates in jquery mobile and group them by date. turns out, this is fairly easy using the autodividers feature of the listview widget.

jquery mobile has supported dividers in lists for a while now, but recent editions added support for creating them automatically. out of the box, jquery mobile will create dividers based on the first letter of the list item. consider this example.

<ul data-role="listview" data-inset="true" data-autodividers="true">
	<li>benedict</li>
	<li>bleys</li>
	<li>brand</li>
	<li>caine</li>
	<li>corwin</li>
	<li>eric</li>
	<li>gerard</li>
	<li>julian</li>
	<li>random</li>
</ul>

by adding autodividers="true" to the list, you get dividers based on the first letter in each name above.

so the obvious next question is - how do you create dividers based on some other form of grouping - like dates? luckily jquery mobile's listview widget gives you an easy way to handle this.

you simply take the listview widget and define a function that returns the "selector" for an item. in abstract, it would look like this:

$("some selector").listview({
	autodividers:true,
	autodividersselector: function ( li ) {
		// "li" is the list item, you can get the text via li.text()
		// and then you return whatever you want - in text that is
		return li.text().substring(0,1).touppercase();
	}
}).listview("refresh");

the method above should work the same as the default behavior. get the first letter and upper case it. (i typed this without actually running it so if there is a typo above blame my laziness.)

in order to support our date grouping, we can use this method and javascript date methods. let's look at a full example. first, the html. note that i've made an empty list widget that will store my data.

<!doctype html> 
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>divide demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    </head> 
    
    <body> 
        
        <div data-role="page" id="mainpage" >
            
            <div data-role="header">
                <h1>our events</h1>
            </div>
            
            <div data-role="content">
				<ul data-role="listview" data-inset="true" id="dates" data-autodividers="true">
				</ul>
            </div>
            
            <div data-role="footer">
                <h4>footer content</h4>
            </div>
            
        </div>

		<script src="datestuff.js"></script>

	</body>
</html>

now let's look at the javascript.

/* global $,document,console,quizmaster */
$(document).ready(function() {

	var dates = [
		"12/16/2013 12:00:00",
		"12/16/2013 14:00:00",
		"12/17/2013 12:00:00",
		"12/18/2013 12:00:00",
		"12/19/2013 12:00:00",
		"12/19/2013 16:00:00"
	];
	
	var datelist = $("#dates");
	for(var i=0, len=dates.length; i<len; i++) {
		datelist.append("<li>"+dates[i]+"</li>");	
	}
		
	datelist.listview({
		autodividers:true,
		autodividersselector: function ( li ) {
			var d = new date(li.text());
			return (d.getmonth()+1)+ "/" + d.getdate() + "/" + d.getfullyear();
		}
	}).listview("refresh");

});

at the top i've got a set of hard coded dates. these would typically be loaded via ajax. i loop over them and insert them into the list. once i've got that i can then initialize my listview and define a custom selector. as i mentioned above, i can use javascript date methods to return a string based on just the date portion of the date values i had above. (in other words, ignore the time.) i can also do some formatting on the date to make it look nice. here is the final result.

you can run a full demo of this below.

JQuery Mobile

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Top 13 Mobile App Development Platforms You Need
  • The Definitive Guide to Developing Portable Tizen Apps

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: