初学者 jQuery Themeroller 问题
Beginner jQuery Themeroller Problems
我正在尝试使用 Themeroller 小部件构建页面，但我 运行 遇到了一些错误，但无法找出原因。第一个：我的拖动元素一直在我的拖放元素后面而不是在它上面。第二个：我的标签没有显示为标签，而是一个无序列表（这个不一定是错误，我只是 jQuery UI 的新手，我遇到了困难链接自定义主题和来自 CDN 的主题，如果有人能解释我做错了什么，将不胜感激）。最后一个：我正在尝试使用 datepicker() （当然现在没有主题）让用户输入他们的生日。我希望他们按下去并收到一个通知，只是向他们吐出他们的生日，我似乎无法使用 ($datepicker).value 来做到这一点。这是我的代码：
<!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：我用几乎相同的拖放代码制作了第二页，并且拖动元素越过放置元素。所以我页面中的其他东西一定是造成它的原因，但我不知道是什么。这是新文档中的 drag/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 不适合我的代码。
做到了。虽然无法弄清楚如何处理日期选择器值。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="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>
div{
font:12px normal arial, helvetica;
}
body{
height:670px;
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;
}
#dragdiv{
height:50px;
width:150px;
border:1px solid black;
top:100px;
left:565px;
background-color:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
position: absolute;
}
#dropdiv{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background-color: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#dragdiv span{
display:table;
margin:0 auto;
margin-top:15px;
}
#dropdiv 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;
position: absolute;
background: #5D5D5D ;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: grey;;
color: #222;
}
.tab-content{
display: none;
background: grey;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
margin-bottom: 10px;
}
#sortable{
width:200px;
left:1070px;
top:-5px;
height:620px;
border-top:2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: relative;
background:#5D5D5D ;
}
ol {
margin:0 0 10px 0;
cursor:pointer;
}
li:not(:last-child) {
margin-bottom: 10px;
}
#goback{
position: absolute;
top:550px;
left:620px;
}
</style>
<script>
$(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...');
}
});
var divsort=$('#fruitlist');
divsort.sortable();
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$('#datepicker').datepicker();
});
function goBack(){
window.location = "http://www.javascriptpractice.pcriot.com/practiceSet5.html"
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='dropdiv'><span>Drop Here!</span></div>
<div id='dragdiv'><span>Drag Me!</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 class="tabs">
<li class="tab-link current" data-tab="tab-1">Home</li>
<li class="tab-link" data-tab="tab-2">About<li>
<li class="tab-link" data-tab="tab-3">Products</li>
<li class="tab-link" data-tab="tab-4">Tabs</li>
</ul>
<div id="tab-1" class="tab-content current">
Welcome to my best jQuery page yet!
</div>
<div id="tab-2" class="tab-content">
I really like compsci. Sometimes I go overboard.
</div>
<div id="tab-3" class="tab-content">
I also make and sell word clocks with Arduino microcontrollers!
</div>
<div id="tab-4" class="tab-content">
Tabs aren't as easy as they look.
</div>
</div>
<div id='sortable'><span>Sort me!</span>
<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>
<input id='goback' type="button" value="Go Back" onClick='goBack()'/>
</body>
</html>
我正在尝试使用 Themeroller 小部件构建页面，但我 运行 遇到了一些错误，但无法找出原因。第一个：我的拖动元素一直在我的拖放元素后面而不是在它上面。第二个：我的标签没有显示为标签，而是一个无序列表（这个不一定是错误，我只是 jQuery UI 的新手，我遇到了困难链接自定义主题和来自 CDN 的主题，如果有人能解释我做错了什么，将不胜感激）。最后一个：我正在尝试使用 datepicker() （当然现在没有主题）让用户输入他们的生日。我希望他们按下去并收到一个通知，只是向他们吐出他们的生日，我似乎无法使用 ($datepicker).value 来做到这一点。这是我的代码：
<!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：我用几乎相同的拖放代码制作了第二页，并且拖动元素越过放置元素。所以我页面中的其他东西一定是造成它的原因，但我不知道是什么。这是新文档中的 drag/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 不适合我的代码。
做到了。虽然无法弄清楚如何处理日期选择器值。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="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>
div{
font:12px normal arial, helvetica;
}
body{
height:670px;
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;
}
#dragdiv{
height:50px;
width:150px;
border:1px solid black;
top:100px;
left:565px;
background-color:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
position: absolute;
}
#dropdiv{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background-color: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#dragdiv span{
display:table;
margin:0 auto;
margin-top:15px;
}
#dropdiv 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;
position: absolute;
background: #5D5D5D ;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: grey;;
color: #222;
}
.tab-content{
display: none;
background: grey;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
margin-bottom: 10px;
}
#sortable{
width:200px;
left:1070px;
top:-5px;
height:620px;
border-top:2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: relative;
background:#5D5D5D ;
}
ol {
margin:0 0 10px 0;
cursor:pointer;
}
li:not(:last-child) {
margin-bottom: 10px;
}
#goback{
position: absolute;
top:550px;
left:620px;
}
</style>
<script>
$(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...');
}
});
var divsort=$('#fruitlist');
divsort.sortable();
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$('#datepicker').datepicker();
});
function goBack(){
window.location = "http://www.javascriptpractice.pcriot.com/practiceSet5.html"
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='dropdiv'><span>Drop Here!</span></div>
<div id='dragdiv'><span>Drag Me!</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 class="tabs">
<li class="tab-link current" data-tab="tab-1">Home</li>
<li class="tab-link" data-tab="tab-2">About<li>
<li class="tab-link" data-tab="tab-3">Products</li>
<li class="tab-link" data-tab="tab-4">Tabs</li>
</ul>
<div id="tab-1" class="tab-content current">
Welcome to my best jQuery page yet!
</div>
<div id="tab-2" class="tab-content">
I really like compsci. Sometimes I go overboard.
</div>
<div id="tab-3" class="tab-content">
I also make and sell word clocks with Arduino microcontrollers!
</div>
<div id="tab-4" class="tab-content">
Tabs aren't as easy as they look.
</div>
</div>
<div id='sortable'><span>Sort me!</span>
<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>
<input id='goback' type="button" value="Go Back" onClick='goBack()'/>
</body>
</html>