0
사용자가 하나의 열에서 다른 열로 iteam을 끌어다 놓을 수있는 작은 Json 기반의 작은 응용 프로그램입니다. 또한 항목에는 개별 설명이로드시 숨김으로 표시되며 항목 목록을 클릭 할 때만 나타납니다. 아래 문제로 확인하십시오Jquery popover가 작동하지 않음
Json DOM 요소의 드래그 앤 드롭 기능의 목록 항목 클릭시 Jquery-ui 툴팁 (http://jsfiddle.net/bh4ctmuj/164/)을 구현했습니다. 하지만 Jquery-UI 툴팁이 작동하지 않는 이유를 알 수 없습니다. 당신은 중복 포함이
"message": "Uncaught TypeError: $(...).tooltip is not a function",
"filename": "http://stacksnippets.net/js",
"lineno": 147,
"colno": 32
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'jSon.json',
data: '',
dataType: 'json',
success: function (data) {
//console.log(data);
$.each(data.hotels, function (i, hotel) {
$('.hotels').append("<li class='hotel' title='" + hotel.description + "'>" + hotel.name + "</li>");
});
$('.hotels').append('<div></div>');
$.each(data.location, function (i, place) {
$('.locations').append("<li class='place'>" + place.name + "</li>");
});
$('.locations').append('<div></div>');
}
});
$('li.hotels').tooltip({
position: { my: 'center bottom', at: 'center top-10' },
tooltipClass: "myclass",
disabled: true,
close: function (event, ui) { $(this).tooltip('disable'); }
});
$('li.hotels').on('click', function() {
alert();
$(this).tooltip('enable').tooltip('open');
});
})
$(function() {
$("#sortable1, #sortable2, #sortable3").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});ul.hotels, ul.Locations, ul.drop-container {
list-style-type: none;
border-radius: 5px;
margin: 0px;
padding: 0px;
}
.hotels li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #6eb0e5;
}
li.hotel {
background: #c7dff6;
border:#4c85b2 solid 1px;
color:#4c85b2;
}
li.place{
\t background: #daedd5;
\t border:#53a464 solid 1px;
\t color:#53a464;
}
span{
\t display:none;
}
.Locations li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #80cb9a;
}
.drop-container li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #80cb9a;
}
.float-left {
float: left;
}
.clear {
clear: left;
}
#sortable1, #sortable2, #sortable3 {
border: 1px solid #eee;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
}
#sortable1 li, #sortable3 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
}<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<html>
<head>
<title>Assi</title>
<meta charset="utf-8" />
</head>
<body>
<div class="">
<div class="float-left">
<ul class="hotels connectedSortable" id="sortable1">
<li>Hotels</li>
</ul>
</div>
<div class="float-left">
<ul class="Locations connectedSortable" id="sortable1">
<li>Locations</li>
</ul>
</div>
<div class="float-left">
<ul class="drop-container connectedSortable" id="sortable3" type="A">
<li>Hotels & Locations</li>
<li class="hotel">Hotel 1</li>
<li class="place">Loction 1</li>
</ul>
</div>
<div class="clear"></div>
</div>
둘 모두 필요하지 않습니다. –
그게 무슨 소리 야? 동일한 라이브러리에 충돌이 발생하는 두 번 포함됩니다 ... 그리고 둘 다'tooltip'을 포함하고 있습니다 .. –
콘솔에서 오류를 표시하는 중 하나가 제거되면 http://protechnology.com/dev/assign/ –