【发布时间】：2015-10-08 14:16:36
【问题描述】：
我正在构建一个项目并使用 Bootstrap 和 Jquery Ui 作为前端。
index.php 文件是：
<html>
<head>
<script src="weatherModule/weatherFetcherForIndex.js"></script>
<?php
include "resources/resources.php";
echo $bootstrap;
include "NewsFeed/CnnNewsFeed.php";
$cnn = new CnnNewsFeed("world");
$feed = $cnn->getRss();
echo $jquery_ui;
?>
<script src="resources/dragable.js"></script>
</head>
<body>
<?php
//navbar
echo $navbar;
$items = $feed->channel->item;
?>
<div id="temp" style="width: 30%; height: 7%; margin-top: 6.5%;">
</div>
<?php
echo $cnnNewsHeader;
for($i = 0; $i <= 2+1; $i++)
{
echo "<a href='". $items[$i]->guid ."' class='list-group-item'>
<h4 class='list-group-item-heading'>" . $items[$i]->title . "</h4>
<p class='list-group-item-text'>" . $items[$i]->description . "</p>
</a>";
}
echo $cnnNewsFooter;
?>
</body>
</html>
您可以跳过运行良好的天气部分。而那个 resources/resources.php 文件是：
<?php
/**
* Created by PhpStorm.
* User: root
* Date: 11/7/15
* Time: 10:42 AM
*/
$jquery_ui = '<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>';
$weather_icons = "<link src='http://startyour.club/weather-icons/css/weather-icons.css' type='text/css' rel='stylesheet' />";
$bootstrap = "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>
<script src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js\"></script>";
$navbar = "<nav class= \"navbar navbar-default\">
<div class=\"container-fluid\">
<!-- Brand and toggle get grouped for better mobile display -->
<div class=\"navbar-header\">
<button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\">
<span class=\"sr-only\">Toggle navigation</span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
</button>
<a class=\"navbar-brand\" href=\"#\">Project</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">
<ul class=\"nav navbar-nav\">
<li class=\"active\"><a href=\"#\">Home <span class=\"sr-only\">(current)</span></a></li>
<li><a href=\"#\">News</a></li>
<li><a href=\"#\">Weather</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>";
$navbar_for_weather = "<nav class= \"navbar navbar-default\">
<div class=\"container-fluid\">
<!-- Brand and toggle get grouped for better mobile display -->
<div class=\"navbar-header\">
<button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\">
<span class=\"sr-only\">Toggle navigation</span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
</button>
<a class=\"navbar-brand\" href=\"#\">Project</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">
<ul class=\"nav navbar-nav\">
<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">News</a></li>
<li class=\"active\"><a href=\"#\">Weather <span class=\"sr-only\">(current)</span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>";
$cnnNewsHeader = "<div class=\"col-sm-4\" style=\"margin-left: 65%; margin-top: 2.5%;\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
Cnn News
</div>
<div class=\"panel-body\">
<div class=\"list-group\">";
$cnnNewsFooter = "</div>
</div>
</div>
</div>";
这基本上定义了许多要在我的主页中使用的变量。
而我的 resources/dragable.js 是：
$(function() {
$( ".panel" ).draggable();
});
还有我的weatherFetcherForIndex.js如下：
/**
* Created by root on 11/7/15.
*/
navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
var long = location.coords.longitude;
var lat = location.coords.latitude;
$.post("weatherModule/jsPhpInterface.php", {lat: lat, lon: long})
.done(function (data) {
var parsedJSON = JSON.parse(data);
$("#temp").html
(
"<div class='panel panel-primary'>" +
"<div class='panel-heading'>" +
"Temperature" +
"</div>" +
"<div class='panel-body'>"
+
parsedJSON.data.current_condition[0].FeelsLikeC + "° C" +
"</div>" +
"</div>" +
"</div>"
);
});
}
当我打开我的index.php 时，新闻面板是可拖动的，但天气面板是不可拖动的。任何帮助将不胜感激！！！！
干杯！
【问题讨论】：
标签： javascript php jquery twitter-bootstrap