Question

我跟随Sams在24小时内自学jquery mobile。但是下面的代码不起作用。

我尝试调试javascript但没有javascript。如果有一种方法来调试jquery mobile会很好。 Isuru的简历

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Isuru's R&#233;sum&#233;</h1>
        </div>

        <div data-role="content">
            <p>I'm a Mobile Developer with experience in web and android mobile app development. 
                My skills include HTML, CSS, Python, WAMP Development and Java. 
                I also have experience with SEO and Internet Advertising.</p>
            <a href="#contact" data-role="button" data-rel="dialog">Contact me!</a>
        </div>

        <div data-role="page" id="contact" data-theme="c">
            <div data-role="header"><h1>Clicked!</h1></div>
            <div data-role="content">
                <p>Clicked content!</p>
                <a href="#contact" data-rel="back" data-role="button">Go back</a>
            </div>
        </div>  

    </div>

</body>
</html>

Answer 1

你几乎没有错误。

这是一个有效的例子：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-role="header">
            <h1>Isuru's R&#233;sum&#233;</h1>
        </div>

        <div data-role="content">
            <p>I'm a Mobile Developer with experience in web and android mobile app development. 
                My skills include HTML, CSS, Python, WAMP Development and Java. 
                I also have experience with SEO and Internet Advertising.</p>
            <a href="#contact" data-role="button" data-rel="dialog">Contact me!</a>
        </div>
    </div>   

  <div data-role="dialog" id="contact" data-theme="c">
    <div data-role="header"><h1>Clicked!</h1></div>
    <div data-role="content">
      <p>Clicked content!</p>
      <a href="#contact" data-rel="back" data-role="button">Go back</a>
    </div>
  </div>   

</body>
</html>

这是jsFiddle示例：http://jsfiddle.net/Gajotres/w3ptm/

你有这个错误：

在对话框中 data-role =“page”必须是 data-role =“对话框”

<div data-role="dialog" id="contact" data-theme="c">
    <div data-role="header"><h1>Clicked!</h1></div>
    <div data-role="content">
        <p>Clicked content!</p>
        <a href="#contact" data-rel="back" data-role="button">Go back</a>
    </div>
</div>

它也必须与主页位于同一级别。

JQuery Mobile Dialog无法打开

1 个答案: