How to create list item using jquery mobile framework

Error: You must enable a payment gateway to use Easy Digital Downloads

Error: No checkout page has been configured. Visit Settings to set one.

Error: No checkout page has been configured. Visit Settings to set one.

Today I’m gonna to take you through yet another part of the tutorial on jQuery mobile framework.

Creating list item using jquery mobile framework

Here, I’ll teach you to create beautiful a responsive List Item using jQuery Mobile Framework. Not only that – These list Items will be Styled in a nice and sleek way with all the CSS3 Styling Properties like:

  • Linear Gradient
  •  Box-shadow
  •  Text-shadow
  • Few on hover effects to impress the users
 

Requirements:

You just need to be ready with the beautifully structured Unordered list with few List Items and Anchor tags respectively within.

You need to have the necessary jQuery Mobile files to get started with. If you have no idea of that, no worries – I’ll help you out. Just visit my Previous Tutorial that teaches you the very basics of jQuery Mobile and its usage [Simple way to understand jQuery Mobile]

Like below is what the basic Markup should look like:

That extra thing: Along with the default Markup – we need to accommodate few Data Attributes which are specific to jQuery Mobile Framework like:

Only one used for this tutorial:

So, the actual jQuery Mobile code to create a beautiful responsive List Item is as follows:

Guys, you’ve done with the Markup. Go ahead and preview your brand new Responsive List Item on your favorite Browser.

Here is what it should look like:

Tablet view of the jQuery Mobile – List Item

List item using jquery mobile framework PepFry

Creating list item using jquery mobile framework

iPhone view of the jQuery Mobile – List Item

List item using jquery mobile framework PepFry

Creating list item using jquery mobile framework

Now, you can even download the complete source code by clicking the below link.

 

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">