#javascript #jquery #plugins
#javascript #jquery #Плагины
Вопрос:
Я использую плагин jquery для аннотации изображений. У меня есть несколько изображений на разных вкладках. Для этой цели я использую вкладки jquery, но до этого я использовал вкладки foundation и столкнулся с той же проблемой. вот мой код
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src="libs/jquery.min.js"></script>
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<link type="text/css" rel="stylesheet" href="annotorious-0.6.4/css/annotorious.css" />
<script type="text/javascript" src="annotorious.min.js"></script>
<script>
$(function() {
$( "#tabs-1" ).tabs();
});
</script>
<style>
#tabs-1{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body onload="init();">
<div id = "tabs-1">
<ul>
<li><a href = "#tabs-2">Tab 1</a></li>
<li><a href = "#tabs-3">Tab 2</a></li>
<li><a href = "#tabs-4">Tab 3</a></li>
</ul>
<div id = "tabs-2">
<img id="myImage" src="pic2.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
</div>
<div id = "tabs-3">
<img id="myImage1" src="pic1.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
</div>
<div id = "tabs-4">
<p>ed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<script>
function init() {
anno.makeAnnotatable(document.getElementById('myImage1'));
anno.makeAnnotatable(document.getElementById('myImage'));
}
</script>
</body>
</html>
Я хочу сделать аннотации к изображениям. Итак, здесь мои плагины для аннотаций изображений jquery отлично работают для вкладки 1 (первое изображение), но они не работают на вкладке 2 (второе изображение) или любых других вкладках. Возможно, это связано с событиями javascript, пожалуйста, помогите мне.
Комментарии:
1. В чем проблема? Пожалуйста, будьте конкретны, чтобы мы могли попытаться воссоздать это. Кроме того, проверьте журнал JS вашего браузера на наличие ошибок. К вашему сведению: в
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui- lightness/jquery-ui.css " rel = "stylesheet">есть пробел. Обычно пробелы даже не принимаются в URL-адресах, так что это может быть частью вашей проблемы.2. Пожалуйста, помогите мне.
Ответ №1:
В дополнение к пробелам, упомянутым Quangdao, вам также может потребоваться перевести jQuery в бесконфликтный режим согласно их документации. Кроме того, вы должны переместить свой init в метод ready вместо того, чтобы смешивать его с onload тела.
Редактировать: Похоже, что вам также необходимо использовать комбинацию инициализации на основе CSS (добавление class="annotatable" к вашим изображениям) и API для повторного включения плагина аннотаций при переключении вкладки. Для этого можно использовать activate событие вкладки:
<script>
jQuery.noConflict();
jQuery(function() {
jQuery("#tabs-1").tabs({
activate: function(event, ui) {
jQuery('img.annotatable', ui.newPanel).each(function() {
anno.makeAnnotatable(this);
});
}
});
});
</script>
Демонстрация ниже:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://annotorious.github.io/latest/annotorious.css" />
<script type="text/javascript" src="https://annotorious.github.io/latest/annotorious.min.js"></script>
<style>
#tabs-1 {
font-size: 14px;
}
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="tabs-1">
<ul>
<li><a href="#tabs-2">Tab 1</a>
</li>
<li><a href="#tabs-3">Tab 2</a>
</li>
<li><a href="#tabs-4">Tab 3</a>
</li>
</ul>
<div id="tabs-2">
<img id="myImage" class="annotatable" src="https://unsplash.it/g/200" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
</div>
<div id="tabs-3">
<img id="myImage1" class="annotatable" src="https://unsplash.it/200" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
</div>
<div id="tabs-4">
<p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<script>
jQuery.noConflict();
jQuery(function() {
jQuery("#tabs-1").tabs({
activate: function(event, ui) {
jQuery('img.annotatable', ui.newPanel).each(function() {
anno.makeAnnotatable(this);
});
}
});
});
</script>
</body>
</html>
Правка 2: Чтобы сохранить и перезагрузить из localstorage, вы хотите добавить обработчики событий для onAnnotationRemoved , onAnnotationCreated и onAnnotationUpdated сохранить это в localstorage при создании / изменении / удалении аннотаций. Чтобы загрузить аннотации при загрузке страницы, мне пришлось вызвать reset метод перед добавлением каждой аннотации из localstorage.
Это то, что я добавил:
function saveAnnotations() {
localStorage.setItem('annotations', JSON.stringify(anno.getAnnotations()));
}
// check for saved annotations
var storedAnnotations = localStorage.getItem('annotations');
if (storedAnnotations !== null) {
anno.reset(); //reinitialize the annotations
storedAnnotations = JSON.parse(storedAnnotations);
//restore saved annotations
storedAnnotations.forEach(function(annotation) {
anno.addAnnotation(annotation);
})
}
anno.addHandler('onAnnotationRemoved', saveAnnotations);
anno.addHandler('onAnnotationCreated', saveAnnotations);
anno.addHandler('onAnnotationUpdated', saveAnnotations);
Это не будет выполняться во фрагменте SO из-за проблем CORS с localstorage, поэтому вот подсказка:https://jsfiddle.net/jo6hmc7q /
Комментарии:
1. Я получаю ту же ошибку и с вашим кодом. Аннотация изображения не работает для второго изображения. Нужно ли мне вносить какие-либо изменения в настройки браузера? пожалуйста, помогите мне.
2. Если вы нажмете «Запустить фрагмент кода» в приведенном выше ответе xorspark, будет ли он работать так, как вы ожидали? Если нет, можете ли вы описать, что вы видите в сравнении с тем, что вы хотели бы видеть? Вам никогда не нужно будет изменять настройки, зависящие от браузера, и ожидать этого от ваших пользователей.
3. @VedPrakash Оказывается, я пропустил, что вторая вкладка работала не совсем правильно. Я обновил свой ответ. Похоже, вам нужно использовать комбинацию инициализации на основе CSS и API, чтобы плагин аннотаций продолжал работать при переключении вкладок. Возможно, есть лучший способ сделать это, но он, по крайней мере, работает сейчас.
4. Большое спасибо, @xorspark. Люблю тебя, чувак, ты спас меня.
5. Мне нужна еще небольшая помощь, ребята, я хочу сохранить эти заметки в локальном хранилище и загрузить их обратно после обновления.