windows semantic怎么用

Posted 2023-04-13

参考技术A 　　Semantic UI—完全语义化的前端界面开发框架，跟Bootstrap和Foundation比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semantic UI自身的功能特性和优缺点。 　　文章来自CoderWall，作者是Nicholas Jordon。在这篇文章当中作者讲述了Semantic UI具备哪些功能特性，以及和其它前端界面开发框架的不同之处。可能Semantic UI只是html/CSS框架领域上的一个新成员，但是它来势汹汹，势不可挡。引用Semantic UI团队的话说：“Semantic赋予设计师和开发者为UI创建一个共享词汇库的能力。”（以下是编译内容） 　　我通常情况下不喜欢更改开发框架，即使是HTML/CSS框架。但是有的时候为了最终的产品质量，还是值得一试去改变框架的。 　　有那么一段时间，我是Zurb's Foundation Framework的超级粉丝，它有许多其它框架没有的功能特性，同时它还有很多预制模板。所以使用Zurb's Foundation Framework来设计的话相对是比较舒适快捷的。但唯一的一点是有些功能得等到Foundation新版本发布出来才能使用。 　　进入到Semantic UI开发框架，就会看到数量庞大的功能特性，这些功能都很有特点。Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换，甚至是评级等多种功能。更不用说其它的运行程序，因为它们看上去都像是涂抹了黄油一样——运行起来特别流利顺畅。当然所列举的这些只是冰山一角，不过这能让你基本上了解大致情况。可能Semantic UI只是HTML/CSS框架领域上的一个新成员，但是它来势汹汹，势不可挡。 　　另外，这些功能使用的类别名称比一些随意的字符串更加的接近英语；所以使用Semantic UI设计会让你感觉更自然。因此，学习如何使用Semantic UI，并用Semantic UI进行设计也就方便的多了。 　　然而，现在的问题是Semantic UI忽略了一些基本功能，例如基本的图片滑块，或者是缩略图类等等。不过后来发现，这些所谓的功能缺失，实际上是和其它功能整合了，在其它方面是完全可以实现的。

Semantic的Dropdown（下拉框）要怎么用

在Semantic找到Dropdown（下拉框）的使用例子，仿照输入，但没有下拉效果，搜索查询一些资料后，得知"selection dropdown"还需要js配合，才能有效果。如果不想执行js，还可以使用别的class，如"ui simple dropdown item" （见本文最后）。

记录如下：

1、首先要连接所需的css和js（我是在django中调试的，需要根据实际位置进行连接）:

    <link rel="stylesheet" href="{% static ‘dist/semantic.css‘ %}">
    <script src="{% static ‘dist/jquery.min.js‘ %}"></script>
    <script src="{% static ‘dist/semantic.js‘ %}"></script>

2、输入dropdown的代码：

<div class="ui selection dropdown">
                  <input type="hidden" name="Area">         <!-- 这句不要好像也可以 -->
                  <i class="dropdown icon"></i>
                  <div class="default text">请选择地区</div>
                  <div class="menu">
                    <div class="item" id="CY">朝阳</div>
                    <div class="item" id="HD">海淀</div>
                    <div class="item" id="TZ">通州</div>
                  </div>
</div>

3、放入js代码：

<script>
    $(function(){
        $(‘.ui.selection.dropdown‘).dropdown();
    });
</script>

　　完事，大功告成，截图如下：

　

 

另外，用"ui simple dropdown item" 不用执行js也能实现类似效果，"ui simple dropdown item" 使用样例如下：

    <div class="ui simple dropdown item">
                  Area
                  <i class="dropdown icon"></i>
                  <div class="menu">
                    <div class="item" id="CY">朝阳</div>
                    <div class="item" id="HD">海淀</div>
                    <div class="item" id="TZ">通州</div>
                  </div>
    </div>