c1tabs追加个问题

登录

先上图

1.这个关闭的x能否放到右上角，怎么做？这太影响美观~~~~
2.如何判断当前tabs是否已经存在？（就如上图，有实时告警了，当我点击新增tabs的时候就给出提示，而不是在建一个相同的tbs）
3.如何定位到最新打开的tabs？

Alice · Alice

回复 1楼rijun的帖子

谢谢您的反馈。
对于您的问题，请参考如下回答：
1.默认就是右上角。而且close的标记可以通过css代码自定义样式。
css设置样式：

<style type="text/css">
#tabs
{
margin-top: 1em;
}
#tabs li .ui-icon-close
{
float: left;
margin: 0.4em 0.2em 0 0;
cursor: pointer;
}
</style>

复制代码

js代码中设置模板使用样式：

tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',

复制代码

您可以参考随机安装示例：
http://demo.gcpowertools.com.cn/ ... Tabs/AddRemove.aspx

2.您是不想添加标题一样的？那么在添加之前，遍历c1tabs的页面的title标题，如果没有相同的就执行添加。

3.通过Selected属性可以设置您需要打开的tab。
请参考产品文档：
http://helpcentral.componentone.com/nethelp/c1tabswijmo/
索引：C1Tabs Behavior > Selected Index

rijun · rijun

回复 2楼Alice的帖子

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
      #tabs
      {
         margin-top: 1em;
      }

      #tabs li.ui-icon-close
      {
         float: left;
         margin: 0 0 0.4em 0.2em;
         cursor: pointer;
         background-color:Red;
      }
</style>
</head>
<body>
<form id="form1" runat="server">
<wijmo:C1Tabs ID="C1Tab1" runat="server">

</wijmo:C1Tabs>
   <input type="button" value="添加标签" id="add_tab" onclick="addtabs()" />
<script id="scriptInit" type="text/javascript">
      function addtabs() {
         var $tabs = $('#<%=C1Tab1.ClientID%>').c1tabs({
            tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
            add: function (event, ui) {
                  var tab_content = $tab_content_input.val() || 'Tab ' + tab_counter + ' content.';
                  $(ui.panel).append('<p>' + tab_content + '</p>');
            }
         });

         $('#<%=C1Tab1.ClientID%>').on('click', 'span.ui-icon-close', function () {
            var index = $('li', $tabs).index($(this).parent());
            $tabs.c1tabs('remove', index);
         });
      $tabs.c1tabs('add', '#tabs-1', 'test');
}
</script>
</form>
</body>
</html>

我这样尝试了，没有效果，然后我添加了背景颜色（如上面红字），依旧是没效果，见下图~

rijun · rijun

回复 2楼Alice的帖子

麻烦看下3楼的代码谢谢~

Alice · Alice

回复 3楼rijun的帖子

根据您的代码。
您是在addtabs()方法里设置的tabTemplate和close按钮的样式，因此只有调用这个方法添加的tab才会有这个效果。
将 $tabs.c1tabs('add', '#tabs-1', 'test');这句代码写到addtabs方法里，然后点击添加标签按钮，才会显示效果。

rijun · rijun

回复 5楼Alice的帖子

？？？？这句话本来就在addtabs（）这个方法里呀？
那图上的两个标签都是我点击生成的，麻烦仔细看下我发的代码，谢谢了~

Alice · Alice

回复 6楼rijun的帖子

我写一段代码给您演示吧。
这需要时间，写完后给您反馈。

rijun · rijun

回复 7楼Alice的帖子

好吧谢谢了顺便把新增后选择新增tabs的功能一起加进去吧~~~

Alice · Alice

回复 8楼rijun的帖子

我是通过谷歌浏览器测试的。
demo如下所示：

rijun · rijun

回复 9楼Alice的帖子

好的谢谢我先看看

		自动登录	找回密码
密码			立即注册

[已处理] c1tabs追加个问题

本帖子中包含更多资源

13 个回复

本帖子中包含更多资源

本帖子中包含更多资源

活字格认证

微信认证勋章

元老葡萄