Fatal编程技术网
  • jquery/
  • JQuery-Mobile：如何在拆分视图中实现did-select方法，以显示相应的选中行'；“详细信息”视图中的信息和详细信息

JQuery-Mobile：如何在拆分视图中实现did-select方法，以显示相应的选中行'；“详细信息”视图中的信息和详细信息

jquery iphone jquery-mobile cordova

JQuery-Mobile：如何在拆分视图中实现did-select方法，以显示相应的选中行'；“详细信息”视图中的信息和详细信息,jquery,iphone,jquery-mobile,cordova,uisplitviewcontroller,Jquery,Iphone,Jquery Mobile,Cordova,Uisplitviewcontroller,我已经按照链接中的说明在Jquery mobile+phone gap中实现了拆分视图模型： 在JQuery mobile中为iPad实现拆分视图非常容易 在iPad中使用jQuery mobile+phone gap实现拆分视图需要2-3分钟 <body> <div data-role="page" data-theme="e" data-content-theme="d"> <div data-role="head

我已经按照链接中的说明在Jquery mobile+phone gap中实现了拆分视图模型：

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

在iPad中使用jQuery mobile+phone gap实现拆分视图需要2-3分钟

 <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>


使用链接的JQuery分割视图http://www.youtube.com/watch?v=qnNyHPWRz-Y
根视图

    

  • 阿什福德岭矿
    • 

  • 阿什兰金矿
    • 

  • 布罗德福德矿
    • 

  • 大角矿
    • 

  • 埃尔科山口
    • 

  • 埃默拉德松金
    • 


详细信息视图

这里有详细的视图。。。。。。
我需要在左侧根视图中实现did select方法

正如
当我们单击左侧表中的一行时，它会在右侧详细信息视图中显示相应的选定行的信息和详细信息。

!！[在此处输入图像描述][1] 但是
如何在左侧根视图中实现did select方法

以表格视图的形式在右侧详细信息视图中显示相应选定行的信息和详细信息。

或者
请为我提供一个在iPhone中使用jQuery mobile phone gap分割视图的好教程

试试这个

$('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
    });
});

$（'ul[data role=“listview”]li'）。单击（函数（）{
var li_text=$（this.text（）；
$.ajax({
url:“”，
数据：“数据=”+LIU文本，
成功：功能（结果）{
$（'.content primary'）.find（'p'）.get（0.html）（结果）；

}//另一种方法是使用css显示和隐藏div。还有一种更好的方法可以做到这一点。我的朋友

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>



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

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