Home/ Questions/Q 8006783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:37:36+00:00

I Have implemented Split view model in Jquery mobile + phone gap by following

  • 0

I Have implemented Split view model in Jquery mobile + phone gap by following the instructions in the link:

http://www.youtube.com/watch?v=qnNyHPWRz-Y .

Its very easy to implement a split view for iPad in JQuery mobile

and it takes 2-3 minuits to implement a split view using jQuery mobile+ phone gap in iPad.

 <body> 
        <div data-role="page" data-theme="e" data-content-theme="d">

            <div data-role="header">
                JQuery Split View using link http://www.youtube.com/watch?v=qnNyHPWRz-Y
            </div>

            <div data-role="content">

                <!--- Right side view------>
                <div class="content-secondary">
                    <h3>Root View</h3>
                    <ul data-role="listview">
                        <li>Ashford Ridge Mine</li>
                        <li>Ashland Gold Mine</li>
                        <li>Brodford mine</li>
                        <li>Big Horn Mine</li>
                        <li>Elko pass</li>
                        <li>Emerad pine Gold</li>
                    </ul>
                </div>

                <!--- Right side view------>
                <div class="content-primary">
                    <h3>Details View</h3>
                    <p>
                    Detail VIEWS goes here......            
                    </p>
                </div>

            </div>

        </div>

    </body>

I need ti implement did select method to the left side root view

as when we click a row in left side table it to display corresponding selected row's information and details in right side details view.

![enter image description here][1]
But how to implement did select method to the left side root view

to display corresponding selected row's information and details in right side details view in the form of table views.

Or please provide me a good tutorial for Split view using jQuery mobile phone gap in iPhone

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Other way is to show and hide the div using css. There could also a better way to do it. by my 2cents!!

    splitwin.html

    <!DOCTYPE html> 
<html> 
    <head> 
    <title>Another Page</title>     
    <link rel="stylesheet" href="css/jquery.mobile-1.0.css" />
    <link rel="stylesheet" href="css/jqm-docs.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
</head> 
<body>

 <body>
    <div data-role="page" data-theme="e" data-content-theme="d">
        <div data-role="header">
            JQuery Split View using link http://www.youtube.com/watch?v=qnNyHPWRz-Y
        </div>
        <div data-role="content">
            <!--- Right side view------>
            <div class="content-secondary">
                <h3>Root View</h3>
                <ul data-role="listview">
                    <li>
                        <a href="#" id="Ashford">Ashford Ridge Mine</a>
                    </li>
                    <li>
                        <a href="#" id="Ashland">Ashland Gold Mine</a>
                    </li>
                    <li>
                        Brodford mine
                    </li>
                    <li>
                        Big Horn Mine
                    </li>
                    <li>
                        Elko pass
                    </li>
                    <li>
                        Emerad pine Gold
                    </li>
                </ul>
            </div>
            <!--- Right side view------>
            <div class="content-primary">
                <h3>Details View</h3>
                <p>
                    Detail VIEWS goes here......
                    <div id="link1" style="display:none">
                        Clicked 
                        Ashford Ridge Mine
                    </div>
                        <div id="link2" style="display:none">
                        Clicked 
                        Ashland Gold Mine
                    </div>
                </p>
            </div>
        </div>
    </div>
        </body> 

</body>
</html>

    demo.js

    $('a#Ashford').live('click', function() {
    $("div#link2").hide();  
    $("div#link1").show();  
});

$('a#Ashland').live('click', function() {
    $("div#link1").hide();  
    $("div#link2").show();  
});
    • 0