0
我正在嘗試使用Themeroller小部件來構建一個頁面，並且遇到了一些錯誤並且無法弄清楚原因。第一個：我的拖動元素繼續在我的drop元素後面而不是在它之上。第二個：我的標籤沒有顯示爲標籤，而是一個無序列表（這不一定是一個錯誤，我只是jQuery UI的新手，我很難將自定義主題和主題從CDN，如果任何人都可以解釋我在做什麼錯誤，將不勝感激）。最後一個：我正在嘗試使用datepicker（）（當然現在沒有主題）讓用戶輸入他們的生日。我希望他們按，然後收到一條通知，他們只是吐出他們的生日回來，我似乎無法用（$ datepicker）.value做到這一點。這裏是我的代碼：初學jQuery Themeroller問題
<!DOCTYPE html>
<html>
<head>
<title>ThemeRoller</title>
<link type="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css ">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
body{
height:680px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#draggable{
height:50px;
width:150px;
border:1px solid black;
top:40px;
left:550px;
background:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
overflow-y: auto;
overflow-x: hidden;
}
#draggable span{
display:table;
margin:0 auto;
margin-top:15px;
}
#droppable{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#droppable span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
border-bottom:2px solid ghostwhite;
position: absolute;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
}
#sortable{
width:200px;
bottom:0px;
right:0px;
top:75px;
border-top:2px solid ghostwhite;
border-bottom: 2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: absolute;
}
ol {
margin:0 0 10px 0
}
li:not(:last-child) {
margin-bottom: 10px;
}
</style>
<script>
$(init);
function init(){
var divdrag=$('#draggable');
var divdrop=$('#droppable');
var divsort=$('#fruitlist');
var divtab=$('#tabs');
divdrag.draggable()
divdrop.droppable({
drop:function(){
divdrag.text("Dropped!");
},
out: function(){
divdrag.text("No! Please drop me!");
},
over: function(){
divdrag.text("Please drop me! Pls...");
}
})
divsort.sortable();
divtab.tabs();
$('#datepicker').datepicker();
}
function birthday(){
var birth=$('#datepicker').value;
alert('You were born on: '+birth);
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='draggable'><span>Drag me!</span></div>
<div id='droppable'><span>Drop here!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul>
<li><a href="#tabs-1">Home</a></li>
<li><a href='#tabs-2'>About</a></li>
<li><a href='#tabs-3'>Products</a></li>
</ul>
<div id='#tabs-1'>Welcome to my best jQuery page yet!</div>
<div id='#tabs-2'>Sometimes I go a little overboard with compsci</div>
<div id='#tabs-3'>I also make and sell word clocks built with Arduino microcontrollers!</div>
</div>
<div id='sortable'><span>Sort me!</span>
<span id="fruits">
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
</body>
編輯：哎呀。好吧，我的主題工作。使用type =「stylesheet」而不是rel =「stylesheet」 編輯2：我做了第二個頁面，使用幾乎相同的拖放代碼，拖動元素覆蓋了drop元素。所以我的網頁上的其他內容一定會引起它，但我不知道是什麼。這是新文檔中的拖放代碼。
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
});
它幾乎是相同的。實際上，我將這些代碼複製並粘貼到我的原始文檔中，並仍然將拖動元素放在原始元素的拖放元素後面。有些東西告訴我我的CSS與我的代碼不兼容。