Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone JQuery: How to implement a Split view in iPad using Jquery Mobile + phone gap in iPhone

I had tried to implement a split view using the JQuery mobile Phone gap

sample code in index.html

    <head> 
        <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
        <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
        <link rel="stylesheet" href="inc/resources/css/jquery.toastmessage.css" />

        <script type="text/javascript" src="inc/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>

        <script type="text/javascript" src="inc/phonegap-1.2.0.js"></script>
    </head> 

    <body> 

        <div data-role="page" data-theme="c">
            <div data-role="header">
                Mpbile Split View
            </div>   

            <div data-role="content">

                 <!--- Left side view------>
                <div class="left-content">
                    <h3>lef hand content</h3>
                    <ul data-role="listview">
                        <li>One</li>
                        <li>One</li>
                        <li>One</li>
                        <li>One</li>
                    </ul>
                </div>

                <!--- Right side view------>
                <div class="right-content">
                    <h3>Right hand content</h3>
                    <ul data-role="listview">
                        <li>Two</li>
                        <li>Two</li>
                        <li>Two</li>
                        <li>Two</li>
                    </ul>
                </div>
            </div>
        </div>


    </body> 
</html> 

But it shows both view on same page one by one top to bottom as shown bellow

enter image description here

I need two tables as split view one in left side (root view) and other in right side (details view)

how is it possible using jQuery? thanks in advance

like image 890
Vijay Avatar asked May 25 '12 12:05

Vijay


3 Answers

You can use http://jeromeetienne.github.com/jquery-mobile-960/ and split it with that grids.

If you know 960.gs or any other css grid framework it will be very easy for you. There is demo of usage at mentioned site.

like image 189
d0ax Avatar answered Nov 07 '22 23:11

d0ax


Try using my multiview plugin.

It allows 1/2/3 panels side-by-side plus popover panels in Jquery Mobile. I have not tried it with PhoneGap (just finishing for JQM 1.1), so if you give it a try, please let me know if it works (it should I guess).

Please use the 1.1 version and the JQM 1.1.multiview, which needs a few tweaks to get working.

I'm currently doing the new README and sample site. Should be up in a few days.

like image 41
frequent Avatar answered Nov 07 '22 22:11

frequent


Try simplesplitview

http://simplesplitview.sourceforge.net/

Its the best jquerymobile splitview and damn easy to implement

like image 1
Biranchi Avatar answered Nov 07 '22 21:11

Biranchi