1
Ich möchte in der Lage sein, die gleiche jqueryui zu jeder einzelnen Registerkarte zu verwenden. Im Moment funktioniert der Code nur in einer der Registerkarten ... aber nicht im Rest. Irgendwelche Ideen, wie ich das erreichen könnte?Hinzufügen derselben jqueryui zu mehreren Registerkarten
Dies ist jquery ich den HTML-Code anwenden möchten:
$(document).ready(function(e) {
// create button and add functionality
$('#add-todo').button({
icons: {
}
}).click(function() {
$('#new-todo').dialog('open');
}); // end click
// build dialog box and add functionality
$('#new-todo').dialog({
modal: true,
autoOpen: false,
buttons : {
"Add task" : function() {
var taskName = $('#task').val();
if (taskName === '') {
return false;
}
var taskHTML = '<li><span class="done"> ✅</span>';
taskHTML += '<span class="delete"> ✄</span>';
taskHTML += '<span class="task"></span></li>';
// convert HTML string to jQuery Object
var $newTask = $(taskHTML);
// add taskname, but make sure HTML is escaped
$newTask.find('.task').text(taskName);
//hide new task
$newTask.hide();
// append to To Do list
$('#todo-list').prepend($newTask);
// show with effect and highlight
$newTask.show('clip',250).effect('highlight',1000);
$(this).dialog('close');
},
"Cancel" : function() {
$(this).dialog('close');
}
},
close: function() {
$('#new-todo input').val(''); /*clear fields*/
}
}); // end dialog
// mark as complete
$('#todo-list').on('click','.done', function() {
var $taskItem = $(this).parent('li');
$taskItem.slideUp(250, function() {
var $this = $(this);
$this.detach();
$('#completed-list').prepend($this);
$this.slideDown();
});
}); // end on
//make both lists sortable
$('.sortlist').sortable({
connectWith : '.sortlist',
cursor : 'pointer',
placeholder : 'ui-state-highlight',
cancel : '.delete,.done'
}); // end sortable
// delete a list item
$('.sortlist').on('click','.delete',function() {
$(this).parent('li').effect('puff', function() {
$(this).remove();
}); // end effect
}); // end on
}); // end ready<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Monday</a></li>
<li><a href="#tabs-2">Tuesday</a></li>
<li><a href="#tabs-3">Wednesday</a></li>
</ul>
<div id="tabs-1">
<div class="container">
<div id="to-do">
<h1>Goals</h1>
<button id="add-todo">Click here to add a goal</button>
<!-- Datepicker -->
<h2 class="header">When do you want to do this?</h2>
<div id="datepicker"></div>
<form id="formscelta" action="Cal.html" method="post">
<input type="hidden" name="datascelta" id="datascelta">
</form>
</div>
<h2>These are the things I said I'd like to accomplish today:</h2>
<ul id="todo-list" class="sortlist">
<li><span class="done">✅</span>
<span class="delete">✄</span>
<span class="task"></span></li>
</ul>
</div>
<div id="completed">
<h2>These are the things I've already completed:</h2>
<ul id="completed-list" class="sortlist">
</ul>
</div>
<div id="new-todo" title="Add to-do item">
<p>
<label for="task">Goal:</label>
<input type="text" name="task" id="task">
</p>
</div>
</div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
Wiederverwendung Was genau Sie suchen? Wenn Sie Tabulatoren möchten, können Sie $ ("# Tabs"). Tabs() verwenden. Wenn auf einer Seite mehrere Registerkartengruppen vorhanden sind, ändern Sie die ID in eine Klasse und verwenden Sie $ (". Tabs"). Tabs(). – Nielsvh
@Nielsvh Ich möchte in der Lage sein, die gleiche jquery Funktionalität (Todo-Liste) auf jedem einzelnen Tab zu verwenden. – essentialgreen
Nur ein Teil der Funktionalität funktioniert durch Hinzufügen von $(). Tabs() – essentialgreen