0

我已按照链接Split view model中Jquery mobile + phone gap的说明实施：

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

在JQuery mobile中为 iPad实现拆分视图非常容易

并且需要 2-3 分钟来实现一个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>

我需要实现左侧根视图的选择方法

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

![在此处输入图像描述][1] 但是how to implement did select method to the left side root view

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

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

4

2 回答 2

0

试试这个...

$('ul[data-role="listview"] li').click(function() {
    var li_text = $(this).text();
    $.ajax({
       url:'<url to get detail from li text>',
       data : 'data='+li_text,
       success: function(result) {
           $('.content-primary').find('p').get(0).html(result);
       } // <-- add this
    });
});
于 2012-05-28T07:21:53.907 回答
0

另一种方法是使用 css 显示和隐藏 div。也可以有更好的方法来做到这一点。由我的 2 美分！

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>

演示.js

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

$('a#Ashland').live('click', function() {
    $("div#link1").hide();  
    $("div#link2").show();  
});
于 2012-05-28T08:44:33.493 回答