初学者jQuery themoller问题

Beginner jQuery Themeroller Problems

本文关键字：问题 themoller jQuery 初学者      更新时间：2023-09-26

我正在尝试使用Themeroller小部件构建一个页面，我遇到了一些错误，无法找出原因。第一个:我的拖放元素一直在拖放元素的后面而不是在它上面。第二个:我的标签不是作为标签显示，而是一个无序的列表(这并不一定是一个bug，我只是非常新的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:我用几乎相同的拖放代码创建了第二个页面，拖放元素位于拖放元素之上。所以我的页面上一定有别的东西引起了这个问题，但我不知道是什么。下面是新文档中的拖放代码:

$(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>
相关文章：