Skip to main content

Hack: Creating A Tablet Split View For jQuery Mobile

Posted on February 10, 2012 by Anthony James Founder/CEOAnthony James Founder/CEO

We are calling this screencast a hack because jQuery Mobile doesn’t have its own method to create a split view. The closest solution allows you to create grids, which is what we covered in this screencast. In this screencast we are going to look at the jquerymobile.com source and grab the CSS that is created on the jQuery Mobile Docs to create the split view. Of course, just as jQuery Mobile did, you can create your own CSS for your apps. However, we are going to just copy the source and implement into a simple app for a quick solution.


4 Comments

Image of Michelle
Michelle
8 years ago

Thanks for this!

Image of Michelle
Michelle
8 years ago

And what text editor do you recommend?

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
8 years ago

What is are you using?

Reply
Image of Niccu
Niccu
8 years ago

Hi anthony, Is this same with the documentation page on Jquery mobile where you resize the browser to a mobile size and the left column with be on the of the right column?
If I didn’t make sense, you can check my post here in the forum on JQuery cuz it has an image there of the goal I need to achieve: http://forum.jquery.com/topic/grid-layout#14737000003415848

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
8 years ago

Well, this is using media queries, I’d http://tuts.pinehead.tv/2012/02/17/create-a-split-or-tablet-view-with-jquery-mobile-and-media-queries/ watch this tut if I were you.

Reply
Image of priya
priya
7 years ago

Awesome tutorial!! Can u please explain navigation?? if i click a list item, content should be displayed on the right side.

Leave a Reply

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