2

我是新的 jquery mobile 所以我去寻找教程并找到了一些并制作了我自己的高尔夫得分 UI 它运行良好，直到最后一部分我想放置一个带有主页按钮和关于所有页面上显示的按钮的页脚但显然它是这里没有显示是我的代码

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Golf Score</title> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.min.css">
  <script src="jq/jquery.js"></script>
  <script src="jq/jquery.mobile-1.3.2.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">  
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  <style type="text/css"></style>
    <script type="text/javascript">//<![CDATA[ 
        $(window).load(function(){
        $('#newgame').live('pageshow',function(event, ui) {
            // refresh specific element
            $('#refresh').val('');
        });

        $('#viewscore').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        $('#currentscore').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        $('#previousscore').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        $('#about').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        });//]]>  
    </script>
</head> 
<body>
    <div data-role="page" id="home" >    
        <div data-role="content" name="contentlogin">
        <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
            <h1 class="ui-title" role="heading" aria-level="1">Home</h1>
        </div>         
            <a href="#newgame" data-role="button" id="login">New Game</a>   
            <a href="#viewscore" data-role="button">View Score</a>            
        </div>             
    </div> 

    <div data-role="page" id="newgame" >

            <div data-role="content">
                <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                    <h1 class="ui-title" role="heading" aria-level="1">New Game</h1>
                </div> 
                <div data-role="fieldcontain">
                    <label for="textarea2">
                        Golf Club
                    </label>
                    <textarea name="" id="textarea2" placeholder="Golf Club"></textarea>
                </div>
                <div data-role="fieldcontain">
                    <label for="textarea1">
                        Golf Course
                    </label>
                    <textarea name="" id="textarea1" placeholder="Golf Course"></textarea>
                </div>
                <div data-role="fieldcontain">
                    <label for="selectmenu1">
                        Number of Players
                    </label>
                    <select id="selectmenu1" name="">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="selectmenu2">
                        Number of Holes
                    </label>
                    <select id="selectmenu2" name="">
                        <option value="9">
                            9
                        </option>
                        <option value="18">
                            18
                        </option>
                        <option value="27">
                            27
                        </option>
                        <option value="36">
                            36
                        </option>
                        <option value="45">
                            45
                        </option>
                        <option value="54">
                            54
                        </option>
                    </select>
                </div>
            </div>
        </div>            


    <div data-role="page" id="viewscore" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">View Score</h1>
            </div> 
            <a href="#currentscore" data-role="button">Current</a>
            <a href="#previousscore" data-role="button">Previous</a>
        </div>             
    </div>
    <div data-role="page" id="currentscore" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">Current Score</h1>
            </div>


        </div>             
    </div>
    <div data-role="page" id="previousscore" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">Previous Score</h1>
            </div>

        </div>             
    </div>
    <div data-role="page" id="about" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">About</h1>
            </div>

        </div>             
    </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                Footer
            </h3>
            <a data-role="button" href="#about" class="ui-btn-left">
                About
            </a>
            <a data-role="button" href="#home" class="ui-btn-right">
            Home
            </a>
        </div>
</body>
</html>
4

1 回答 1

1

你已经放在data-role=footer外面了data-role=page。因此，它不会被显示，换句话说，在渲染页面时会被忽略。正确的语法如下。

<div data-role="page">
  <!-- panel -->
  <div data-role="panel">...</div>

  <!-- popup -->
  <div data-role="popup">...</div>

  <!-- header -->
  <div data-role="header">...</div>

  <!-- content -->
  <div data-role="content">...</div>

  <!-- footer -->
  <div data-role="footer">...</div>
</div>

所有主要的 div 都应该包含在data-role=page.

笔记：

  1. 从 jQuery v1.7 开始，不推荐使用后者.on，.live因为后者已被弃用。
  2. 移除$(window).load(function () {并监听jQM 事件。
  3. 而不是多重绑定到pageshow，您可以一步完成：
    $(document).on('pageshow', '[data-role=page]', function() {
      var allInputs = $(':input');
      allInputs.val('');
    });
于 2013-09-30T09:10:04.417 回答