jQuery EasyUI 布局之动态添加tabs标签页

前端技术 2023/09/04 JavaScript

在没看下文之前先给大家简单介绍easyui相关知识。

easyui是一种基于jQuery的用户界面插件集合。ddd

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 \'add\' 方法即可。

在本教程中，我们将使用 iframe 动态地添加显示在一个页面上的 Tabs。 当点击添加按钮，一个新的 tab 将被添加。如果 tab 已经存在，它将被激活。

步骤 1：创建 Tabs

 <div style=\"margin-bottom:10px\">
 <a href=\"#\" class=\"easyui-linkbutton\" onclick=\"addTab(\'google\',\'http://www.google.com\')\">google</a>
 <a href=\"#\" class=\"easyui-linkbutton\" onclick=\"addTab(\'jquery\',\'http://jquery.com/\')\">jquery</a>
 <a href=\"#\" class=\"easyui-linkbutton\" onclick=\"addTab(\'easyui\',\'http://jeasyui.com/\')\">easyui</a>
 </div>
 <div id=\"tt\" class=\"easyui-tabs\" style=\"width:400px;height:250px;\">
 <div title=\"Home\">
 </div>
 </div>

这个 html 代码非常简单,我们创建了带有一个名为 \'Home\' 的 tab 面板的 Tabs。请注意，我们不需要写任何的 js 代码。

步骤 2：实现 \'addTab\' 函数

 function addTab(title, url){
 if ($(\'#tt\').tabs(\'exists\', title)){
  $(\'#tt\').tabs(\'select\', title);
 } else {
  var content = \'<iframe scrolling=\"auto\" frameborder=\"0\" src=\"\'+url+\'\" style=\"width:100%;height:100%;\"></iframe>\';
  $(\'#tt\').tabs(\'add\',{
  title:title,
  content:content,
  closable:true
  });
 }
 }

我们使用 \'exists\' 方法来判断 tab 是否已经存在，如果已存在则激活 tab。如果不存在则调用 \'add\' 方法来添加一个新的 tab 面板。

好了，本教程到此就结束了，希望对大家学习有所帮助。

本文地址：https://www.stayed.cn/item/10675

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案