学习Semantic UI之Tabs

最新推荐文章于 2024-10-10 20:10:01 发布

weixin_34194551

最新推荐文章于 2024-10-10 20:10:01 发布

阅读量450

点赞数

文章标签： ui javascript python ViewUI

原文链接：https://my.oschina.net/johntostring/blog/197311

版权

2019独角兽企业重金招聘Python工程师标准>>>

老实说，作为一个入行没多久的程序员，一直没有勇气写博文，其实成长的过程就是不断的学习，就当是记笔记，从这一篇开始吧。如果有幸被众多同行读到，大可尽情提议讨论，不过对于文笔不好这个问题，还请尽量不要吐槽拍砖。

在知晓前端技术一开始，也学过几招jQuery UI，也知道Bootstrap，可为什么选择Semantic UI，重点在于个人比较偏好它的语义化这一特点。无奈中文文档匮乏（此时Sematic UI中文网也没有翻译完毕，除此之外根本没找着别的），那只有靠自己这下三烂的英文水平配合词典摸索了。

网站十分简洁，一下就找到了Menu（真是太机智了）。

英文大多不认识，就按目录看呗，总算在Overview看到了代码，前几个是简单的Menu的示例，后面找到一个Tabs

<div class="ui pointing secondary demo menu"><!-- demo 是自定义的类选择器名称-->
  <a class="active red item" data-tab="first">First</a>
  <a class="blue item" data-tab="second">Second</a>
  <a class="green item" data-tab="third">Third</a>
</div>
<div class="ui active tab segment" data-tab="first">First</div>
<div class="ui tab segment" data-tab="second">Second</div>
<div class="ui tab segment" data-tab="third">Third</div>

非常语义化的代码，可自己写一遍，浏览器始终报这个错误！

Tab: The state library has not been initialized

纳闷了，最终Google了一下找到了答案。

You need to include another not mentioned js-file: jquery.address.js
(https://github.com/asual/jquery-address)

就是说，需要这样引入必要的css、js，这里的Tabs特效需要jquery.address

<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/semantic.js"></script>
<script src="js/jquery.address.js"></script>
<link rel="stylesheet" type="text/css" href="css/semantic.css">
<script type="text/javascript">
    //demo 是自定义的类选择器名称
    $(function (){
        //jQuery UI的Tab也是这样，可能也许大概说不准也依赖jquery.address
        $('.demo.menu .item').tab();
    })
</script>

这样看来，第一步总是不好迈出的，虽然大可跳过这个Tab学后面的，不过解决这个问题，后面的就显得更加容易了，赶紧尝试吧！

转载于:https://my.oschina.net/johntostring/blog/197311