将相同的 jqueryui 添加到多个选项卡
Posted
技术标签:
【中文标题】将相同的 jqueryui 添加到多个选项卡【英文标题】：Adding same jqueryui to multiple tabs 【发布时间】：2016-09-20 23:29:50 【问题描述】：我希望能够对每个选项卡使用相同的 jqueryui。现在，该代码仅适用于其中一个选项卡......但不适用于其余选项卡。关于我如何做到这一点的任何想法？
这是我要应用于 html 的 jquery：
$(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>【问题讨论】：
您到底在寻找什么？如果你想要标签，你可以使用 $("#tabs").tabs()。或者如果单个页面中有多个选项卡组，请将 ID 更改为一个类并使用 $(".tabs").tabs()。 @Nielsvh 我希望能够在每个选项卡上使用相同的 jquery 功能（待办事项列表）。 只有部分功能通过添加 $().tabs() 起作用 缺少什么功能？当您将 div 设置为选项卡区域时，所有列表项都变为选项卡，相应的 div 变为它们的内容。看看我的回答。具有“标签”类的两个 div 都成为标签。您是在谈论非核心小部件还是标准选项卡 (jqueryui.com/tabs)？ 等待...您是否希望在不复制 HTML 的情况下将 #tabs-1 的内容复制到其他选项卡中？ 【参考方案1】：到目前为止，重用模板的最简单、最常见和最可靠的方法是使用带有type="text/template" 的<script> 标记。
或者，如果浏览器支持不是问题，您可以使用template 标签或template literals。
也可以将模板作为 .html 文件并通过 AJAX 加载（jQuery load()、RequireJS text plugin、AngularJS $templateRequest 等支持这一点），这有点复杂。
$(document).ready(function(e)
$('.tab-content').append($('#tabsTemplate').html());
$('#tabs').tabs();
); // end ready<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/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/template" id="tabsTemplate">
<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>
</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" class="tab-content"></div>
<div id="tabs-2" class="tab-content"></div>
<div id="tabs-3" class="tab-content"></div>
</div>就像 Nielsvh 在他的回答中提到的那样，您应该确保在重用模板时不会生成 id 或唯一的 ids
【讨论】：
我真的不知道 type="text/template" 存在。你知道的越多。【参考方案2】：如果您想将内容复制到其他选项卡中，则必须考虑数据的结构以及需要复制的内容。我个人会在 javascript 中创建对象，然后将其附加到选项卡中。您需要特别注意任何 ID 并确保它们是唯一的（我在下面的 sn-p 中没有这样做）。 比如：
$(function()
var mydiv = $("<div class=\"container\">"+
"<div id=\"to-do\">"+
"<h1>Goals</h1>"+
"<button id=\"add-todo\">Click here to add a goal</button>"+
"<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>");
for(var i = 1;i <= 3;i++)
$("#tabs ul").append($("<li/>").append($("<a/>").attr("href","#tabs-"+i).html("tab"+i)));
$("#tabs").append(mydiv.clone().attr("id","tabs-" + i));
$("#tabs").tabs();
);<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></ul>
</div>【讨论】：
以上是关于将相同的 jqueryui 添加到多个选项卡的主要内容，如果未能解决你的问题，请参考以下文章