0

リンクの指示に従って実装Split view modelしました：Jquery mobile + phone gap

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

JQuery モバイルで 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>

左側のルート ビューに select メソッドを実装する必要があります

なので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

もう1つの方法は、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>

demo.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 に答える
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 に答える