JSFiddle - React, Tailwind, and code Playground

by li yatang

HTML

<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.2.1/css/amazeui.min.css">
<script src="http://cdn.amazeui.org/amazeui/2.2.1/js/amazeui.min.js"></script>
<h1>tab 的切换</h1>

<p>1 已经在页面的没有问题</p>
<div id="test">
    <div class="am-tabs" data-am-tabs>
      <ul class="am-tabs-nav am-nav am-nav-tabs">
        <li class="am-active"><a href="javascript: void(0)">流浪</a></li>
        <li><a href="javascript: void(0)">流浪</a></li>
        <li><a href="javascript: void(0)">再流浪</a></li>
      </ul>
    
      <div class="am-tabs-bd">
        <div class="am-tab-panel am-active">
          ...
        </div>
        <div class="am-tab-panel">
          ...
        </div>
        <div class="am-tab-panel">
          ...
        </div>
      </div>
    </div>

</div>

<p>2 异步插入的am-tabs,不能使用js的Tabs插件的功能</p>
<div id="test_settimeout">

</div>

<p>3 异步插入的am-tabs,不能使用js的Tabs插件的功能，于是我手动调用下$().tabs();</p>
<div id="test_settimeout2">

</div>
<br>
个人觉得异步渲染页面的场景还是很经常存在的。
而要手动去调用tabs()，感觉会有点累。
用过bootstrap的js组件，并没有手动调用的那个动作，它是在html上挂属性即可。

交流下，am这样设计的目的？ 可否借鉴bootstrap的做法？

JavaScript

setTimeout(function () {
    $('#test_settimeout').html($('#test').html());
    
    $('#test_settimeout2').html($('#test').html());
    $('#test_settimeout2>div').tabs();
}, 2000);