1
我正在運行一些簡單的代碼，它不會在我的家用機器上運行。我使用JQuery UI來運行一個例子，甚至不會運行。我已經下載完整版本的JQuery，並使用WAMP/Apache運行它。JQuery沒有在瀏覽器中與CSS鏈接
的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
$('#slider').slider({
range: true,
values: [17, 67]
});
// Progressbar
$("#progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<meta charset="utf-8">
<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
.tooltip {
border-bottom: 1px dotted #000000;
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html li:hover { background: transparent; }
.classic { background: #FFFFAA; border: 1px solid #FFAD33; }border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
</style>
<script>
$(function() {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
}
});
});
</script>
<div class="demo">
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h3><a href="#">Processors</a></h3>
<div>
<ul class ="tooltip">
<a class ="tooltip"><span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span>Intel i7</a>
<li>Intel i5</li>
<li>Intel i3</li>
</ul>
</div>
<h3><a href="#">Graphics Cards</a></h3>
<div>
<ul>
<li>Nvidia GeForce 9700</li>
<li>Nvidia 1200GT</li>
<li>Nvidia GeForce GTX 580</li>
</ul>
</div>
<h3><a href="#">Monitors</a></h3>
<div>
<ul>
<li>Acer 15'</li>
<li>Dell 17'</li>
<li>Compaq 12'</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</div>
</body>
</html>
當我嘗試去爲localhost，進入我的文件，它會顯示沒有任何CSS或圖片。但是，它會在我的大學機器上工作。兩組文件具有相同的文件結構並運行相同的代碼。
我做錯了什麼？
你的'html'，'head'和'body'標籤在哪裏？我的猜測是你的當前瀏覽器看到這個代碼，並試圖解析它時放棄。您在'style'和'script'標記中缺少'type'屬性，並且缺少必需的jQuery UI包含。 – 2011-04-24 16:05:19
你不在這個例子中包含jquery的 @ – Brad 2011-04-24 16:06:13
@你可以再次發佈你的代碼，一些重要的東西missig .. – kobe 2011-04-24 16:07:49