1

我正在使用库 1.1。我正在尝试显示一个简单的对话框，我不想加载一个页面，我只想显示来自同一页面的 div 标签内容。

除了标准 1.1 参考之外，我是否需要添加任何特殊的 jquery 参考？

可以说我有这个

   <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a>

        <div data-role="dialog" id="dialog">
            <div data-role="header" data-theme="e">
                <h1>Foo</h1>
            </div>
            <div data-role="content" data-theme="e">
                <p>Bar</p>
            </div>
        </div>

单击要显示的对话框的按钮时，我需要对页面执行什么操作？

完整的输出html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Plenfy</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/mobile/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css"      />


        <img src="/Content/mobile/images/logo-80.png"/>
 <p>
 </p>
 <ul data-role="listview" data-inset="true">
<li><a href="/Account/join">Join</a></li>
<li><a href="/Account/Login">Log In</a></li>
<li><a href="/contact-us">Contact Us</a></li>
</ul>   
       </div>
        <div data-role="page" id="start">
            <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a>
        </div>
        <div data-role="dialog" id="dialog">
            <div data-role="header" data-theme="e">
                <h1>Foo</h1>
            </div>
            <div data-role="content" data-theme="e">
                <p>Bar</p>
            </div>
        </div>
        ?



    </div>

</div>

<script src="/Scripts/mobile/jquery-1.6.4.js" type="text/javascript"></script>

4

1 回答 1

1

不要忘记包含 jQuery Mobile (css AND js ) 和 jQuery Core 1.6.4 OR 1.7.1，如jQuery Mobile Docs中所述。

并确保您的页面结构有效：

<div data-role="page" id="start"> 
    <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a>
</div> 

<div data-role="dialog" id="dialog">
    <div data-role="header" data-theme="e">
        <h1>Foo</h1>
    </div>
    <div data-role="content" data-theme="e">
        <p>Bar</p>
    </div>
</div>​

工作jsfiddle示例

根据您的完整 html 更新：

不包括 jQuery 1.7.1 AND 1.6.4，删除 jQuery 1.6.4 的 script 标签，并在包括 jquery 1.7.1 之后包括jQuery Mobile JS 。您的包含应如下所示：

<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/Content/mobile/jquery.mobile-1.1.0.js"></script>
<link href="/Content/mobile/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css"/>
于 2012-06-26T13:13:25.997 回答