Question

我是PHP，JavaScript和JQuery的新手。只是觉得建立一个足球记分牌会很有趣。所以在做了一些研究之后我想出了这个。我确信有更好的方法，但我刚从这个网站上的很多文章中借鉴了一些想法。我遇到了Gridster的障碍。我相信它正在用我的桌位来正确地编写cookie。我把表放在列出的项中，因为当定义为widget_selector时，我无法使表工作。

这是我的代码。为了读取cookie的位置数据并相应地订购我的表，我需要做什么？非常感谢你的帮助！

<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/jquery.gridster.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<title>Scores</title>

</head>
<body>

<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="assets/jquery.gridster.js" charster="utf-8"></script>
<script type="text/javascript" src="assets/jquery.cookie.js"></script>
<script type="text/javascript">
var gridster;

$(function() {
gridster = $(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [140, 110],
min_cols: 2,
max_cols: 10,
serialize_params: function($w, wgd) {
    return {
    id: wgd.el[0].id,
    col: wgd.col,
    row: wgd.row,
    size_y: wgd.size_y,
    size_x: wgd.size_x          
    }
},
draggable: {
    stop: function(event, ui) {
    var positions = JSON.stringify(gridster.serialize());
    console.log(positions);
    $.cookie("grid-data", positions, { expires : 7 });
    }
}
}).data('gridster');    
});
</script>

<?php 
//this array contains sports and their URLs 
$sports = array( 
"NFL" => "http://wu.apple.com/nfl/bottomline/xml/scores",); 

// load logo files
$nfllogoxml = simplexml_load_file('nfllogo.xml');

foreach ( $sports as $sport => $url ) { 
//get the page pointed to by $url 
$simplexml = simplexml_load_file($url);
echo "<h2>".$sport."</h2>";
echo "<div id='gamescores' class='gridster'>";
echo "<ul>";
// If game is in progress, change URL given by feed to point to boxscore
foreach ($simplexml->GAME as $game){

    echo "<li id='".$game->GAMEID."' data-row='1' data-col='1' data-sizex='2' data-sizey='1'>";

    if ($game->STATUSID == 2 || $game->STATUSID ==22 || $game->STATUSID ==23){
        $boxurl = preg_replace("/scoring/", "boxscore", $game->URL);
        echo "<table id='".$game->GAMEID."' cols='4' style='background-color:#CCF5CC' ondblclick=\"this.className='tableclick';window.location='".$boxurl."'\">";
    }
    elseif ($game->STATUSID == 7){
        echo "<table id='".$game->GAMEID."' cols='4' style='background-color:#CCF5CC' ondblclick=\"this.className='tableclick';window.location='".$boxurl."'\">";
    }
    elseif ($game->STATUSID == 3){
        echo "<table id='".$game->GAMEID."' cols='4' style='background-color:#BCBCCA' ondblclick=\"this.className='tableclick';window.location='".$game->URL."'\">";
    }
    else {
        echo "<table id='".$game->GAMEID."' cols='4' ondblclick=\"this.className='tableclick';window.location='".$game->URL."'\">";
        }
    echo "<col width='30'>";
    echo "<col width='180'>";
    echo "<col width='30'>";
    echo "<col width='60'>";
    echo "<th colspan='3' align='center'>";
    echo "<b>Matchup #".$game->attributes()->count."</b>";
    echo "</th>";
    echo "<th align='right'><b>Bets</b></th>";
    echo "<tr>";
    if (strpos($sport,'NFL') !==false){
        $gamestatus=$game->STATUSID;
        $teamnamev=$game->AWAY->TEAM;
        $teamnameh=$game->HOME->TEAM;

        //  Get NFL Team Icon from icon XML file stored locally
        $iconurlv = $nfllogoxml->xpath(" /TRM/teamRecord/iconURL[../team/text() = '".$teamnamev."'] ");
        $iconurlh = $nfllogoxml->xpath(" /TRM/teamRecord/iconURL[../team/text() = '".$teamnameh."'] ");
        foreach ($iconurlv as $iconpathv){
            echo "<td><img src='".$iconpathv."' height='25' width='25'></img></td>";
            }                   
        echo "<td>".$game->AWAY->TEAM."</td>";
        echo "<td>".$game->AWAY->SCORE."</td>";
        echo "</tr>";
        echo "<tr href='".$game->URL."'>";
        foreach ($iconurlh as $iconpathh){
            echo "<td><img src='".$iconpathh."' height='25' width='25'></img></td>";
            }               
        echo "<td>".$game->HOME->TEAM."</td>";
        echo "<td>".$game->HOME->SCORE."</td>";
        echo "</tr>";
        echo "<tr>";
        if ($game->STATUSID == 7){
            echo "<td colspan='3'>DELAYED</td>";
            }
        elseif ($game->STATUSID == 23){
            echo "<td colspan='3'>HALFTIME</td>";
            }
        else{
            echo "<td colspan='3'>".$game->STATUS."</td>";
            }
        echo "</tr>";       
        echo "</table>";
        echo "</li>";

        }
}
        echo "</ul>";
        echo "</div>";
echo "<p class=\"clear\">";
}

?>

</body>
</html>

Answer 1

我找到了使用以下代码执行此操作的方法。似乎工作以防任何人感兴趣...

if ($.cookie("grid-data") !== null) {
    var scorepos = JSON.parse($.cookie("grid-data"));   
}

for (var i = 0; i < scorepos.length; i++){
    var position = scorepos[i];
    var list = document.getElementsByTagName("ul")[0]
    list.getElementsByTagName("li")[i].setAttribute("data-row",position.row);
    list.getElementsByTagName("li")[i].setAttribute("data-col",position.col);
}

Gridster从Cookie中读取位置

1 个答案: