jQuery EasyUI使用教程之动态添加标签

最新推荐文章于 2019-09-26 15:43:25 发布

界面开发小八哥

最新推荐文章于 2019-09-26 15:43:25 发布

阅读量1.1k

点赞数

通过使用jQuery EasyUI可以非常容易的动态添加标签，你只需调用'add'方法即可。

在本教程中，我们将使用iframe动态添加标签来显示一个页面。当点击添加按钮时，一个新的标签将会被添加。如果标签已经存在了，那么它将会被激活。

Step 1：创建标签

 
 < 
 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'标签面板的标签。请注意，我们不需要编写任何JS代码。

 
 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'方法来确定标签是否存在，如果存在的话那么激活该标签，如果不存在则调用'add'方法来添加新的标签面板。

下载该EasyUI示例：easyui-tabs-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！

关注