0

我还在学习 javascript、jquery 和它附带的所有东西。作为学习的个人测试，我正在开发一个最终将从 php 服务器中提取的程序。现在我正在从一个硬编码的 json 文件中提取并预加载一个页面。然后，用户将能够单击填充的编辑按钮，它将提供一个带有该部分数据的预加载表单的弹出窗口（这是我目前需要帮助的部分）。使用带有 migrate 和 mustache.js 和 jqmodal 的 jquery 1.9.1 来处理表单弹出这是我的代码：

HTML：

 <!DOCTYPE html>
 <html>
 <head>
 <title></title>
 </head>
 <link href='css.css' rel='stylesheet' type='text/css'>
 <script id="playerTpl" type="text/template">
      {{#playerList}}
           <li id="player{{player}}">
                <h3>player: {{player}}</h3>
                <p><strong>Name:</strong> {{name}}</p>
                <p><strong>Score:</strong> {{score}}</p>
                <p><strong>Rank: </strong>{{rank}}</p>
                <a href="" class="editBtn" name="modal">Edit</a>
                <a href="" class="deleteBtn">Delete</a>
          </li>
 {{/playerList}}
 </script>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqModal/r14/jqModal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>

<body>
<div id="mainContent">
    <h1>Prototype Example:</h1>
    <ul id="playersUL">
    </ul>

    <a href="#" id="addBTN">Add Player</a>
    <div class="clear"></div>
    <div class="addplayerStyle" id="addPlayer">
        <form id="myForm">
            <label>Player Number</label>
            <select id="optionList" name="player" required>
                <option value="1">1</option>
                <option value="1">2</option>
                <option value="1">3</option>
                <option value="1">4</option>
            </select><br><br>
            <label>Player Name</label>
            <input type="text" name="name" placeholder="Player Name" required /><br><br>
            <label>Player Score</label>
            <input type="number" name="score" placeholder="Player Score" required /><br><br>
            <label>Player Rank</label>
            <input type="number" name="rank" placeholder="Player Rank" required /><br><br>
            <input type="reset" value="Cancel" class="jqmClose" /><input type="submit" value="Submit" />
            <div class="clear"></div>
        </form>
    </div>
    <script src="script.js"></script>
</div>

</body>

json文件：

 { 
 "playerList" : [
   {
"player":1,
"name":"Barot Bellingham",
"score":10000,
"rank":5
  },
  {
"player":2,
    "name":"Jonathan G. Ferrar II",
    "score":50,
    "rank":1
   },
   {
"player":3,
    "name":"Hillary Hewitt Goldwynn-Post",
    "score":100000,
    "rank":100
   }
 ]}

最后是到目前为止的javascript：

 $(document).ready(function() {

    $.getJSON('data.json', function(data){
        var template = $('#playerTpl').html();
        var html = Mustache.to_html(template, data);
        $('#playersUL').html(html);

        /*for (var i = 0, i <= data.playerList.length, i++) {
            for (key in data.playerList[i].player){
                alert(data.playerList[i].player;
            }
        };*/
        $('#playersUL').on("click", 'a[name=modal]', function(e) {
            e.preventDefault();
            console.log('1');
            /*$.each(data.playerList, function(key, val) {
                console.log(val.player);
                playerArray.push(val);*/
            });//populatePlayerNum();


            $('#addPlayer').jqmShow({
            });
        });
    }); //getJSON

$('#addPlayer').jqm({
    trigger: '#addBTN'
});

 });

最后，您可以让弹出窗口正常工作并按照我的方式格式化 css：

 .clear { 
clear: both; 
}
h1 {
margin: 0;
padding: 0;
}
#mainContent {
width: 50%;
margin: 0 auto;
padding: 30px;
background: #0CF;
box-shadow: #666 0 5px 10px;
}
#mainContent h1 {
margin-bottom: 20px;
}
ul { 
float: left; 
margin: 0; 
padding: 0; 
list-style: none; 
}
ul li {
float: left; 
width: auto; 
margin-right: 25px; 
padding: 15px; 
border: 1px solid #666; 
background: #ccc; 
box-shadow: #666 2px 5px 5px;
}
a { 
float: left; 
margin: 5px; 
padding: 5px 10px 5px 10px; 
text-align: center; 
color: #fff; 
text-decoration: none; 
background: #666; 
border: 1px solid #000; 
}
#addBTN { 
}
a:hover { 
background: #009; 
}
form { 
margin-top: 15px; 
}
#addPlayer {     
}
label { 
width: 100px; 
}
 input[type='reset'], input[type='submit'] { 
display: block; 
float: left; 
margin-right: 5px; 
padding: 5px 10px 5px 10px; 
text-align: center; 
color: #fff; 
text-decoration: none; 
background: #666; 
border: 1px solid #000; 
cursor: pointer; 
}
input[type='reset']:hover, input[type='submit']:hover { 
background: #009; 
 }

.addplayerStyle {
display: none;
position: absolute;
top: 50px;
left: 600px;
z-index: 2;
width: 300px;
padding: 20px;
background: #ccc;
border: 1px solid #000;
}

.jqmOverlay { 
background-color: #000; 
}

我希望很清楚我现在正在寻找什么。我不打算发布到数据库，也不想将数据添加到表单中。感谢您的帮助，并提前感谢您。

4

0 回答 0