semantic ui使用问题

月牙儿-sky 发布于 2015/05/22 08:41
阅读 6K+
收藏 2

@二的基本算合格 你好,想跟你请教个问题:最近在学习semantic ui,它里面有一些自带动画效果,为什么我用到自己的网页上却没有起作用呢?引入了semantic.min.js和jquery.js   这两个js文件。是不是还差js没引入进去的呢?

加载中
0
二的基本算合格
二的基本算合格
把代码全部贴上来,Semantic ui的例子还是很全的,基本照着做就可以了。
月牙儿-sky
月牙儿-sky
应该不是引入顺序的问题,下拉效果还是没出来
0
月牙儿-sky
月牙儿-sky
<!DOCTYPE html> <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <link rel="stylesheet" href="css/semantic.css"/>  <link rel="stylesheet" href="css/semantic.min.css"/>  <link rel="stylesheet" href="css/style.css"/>  <script type="text/javascript" src="js/semantic.min.js"></script>  <script type="text/javascript" src="js/jquery.min.js"></script>  <title></title> </head> <body id="example" class="progress">  <div class="segment">  <div class="container">  <div class="introduction">  <h1 class="ui dividing header">  基础组件 &nbsp;<a class="ui label large red" target="_blank" href="http://bbs.icoolxue.com/forum.php?mod=forumdisplay&amp;fid=48">Semantic UI交流论坛</a>&nbsp;<a class="ui red label large">Semantic UI学习交流群:277950553</a>  </h1>  <p>基础组件是创建Web站点的基础控件,基本上所有的网站都会用到。</p>  </div>  </div>  </div>  <div class="ui dropdown">  <input name="gender" type="hidden">  <i class="dropdown icon"></i>  <div class="default text">Gender</div>  <div class="menu">  <div class="item" data-value="male">Male</div>  <div class="item" data-value="female">Female</div>  </div>  </div>  <div class="main container">  <h2>基础组建的包含:</h2>  <div class="ui two type stackable items">  <div class="item">  <div class="image">  <div class="ui teal icon labled button">  <i class="user icon"></i>  关注 </div>  <br/>  <br/>  <div class="ui purple icon buttons">  <div class="ui button"><i class="icon user"></i></div>  <div class="ui button"><i class="icon setting"></i></div>  <div class="ui button"><i class="icon trash"></i></div>  </div>  </div>  <div class="content">  <a class="name" href="">按钮</a>  <p>基础组件,看图知义,已经不知道怎么解释这类组件。</p>  </div>   </div>  <div class="item">  <div class="image">  <div class="ui horizontal divider"><i class="github icon"></i></div>  </div>  <div class="content">  <a class="name" href="">分隔条</a>  <p>用来分开展现两组界面。也是基础组件,看图知义。</p>  </div>  </div>  <div class="item">  <div class="image">  <h2 class="ui red block header">第二部分</h2>  </div>  <div class="content">  <a class="name" href="">标题头</a>  <p>用来简短的描述内容的主题。</p>  </div>  </div>  <div class="item">  <div class="image">  <div class="ui green red progress">  <div class="bar"></div>  </div>  </div>  <div class="content">  <a class="name" href="elements/progress.html">进度条</a>  <p>进来展现任务进度,所有的操作系统都有该控件。你可以用来显示文件上传进度等。</p>  </div>  </div>  <div class="item">  <div class="image">  <div class="ui inverted piled segment">  这是由爱酷学习网翻译并校对的Semantic UI中文网,非常感谢jack lukic为我们提供了如此强大如此易用的前端框架。爱酷学习网是用Bootstrap制作的,事实上,如果我早一点知道有Semantic UI这个框架,我想我应用会使用Semantic UI来完成爱酷学习网的前端页面。 </div>  </div>  </div>  </div>  </div>  <script>  $('.ui.dropdown')  .dropdown()  ;  </script> </body> </html>
不知道哪里出了问题?请帮我看看吧
0
LucEsape
LucEsape
引入顺序对了吗? 
0
二的基本算合格
二的基本算合格
使用script 加载是有次序要求的,semantic.min.js依赖jquery.js,所以jquery.min.js应该先加载,你javascript的引入次序错了,另外,Chrome、IE、FireFox都有自己的调试控制台,用法都差不多,打开调试工具观察有助于你解决问题。
0
二的基本算合格
二的基本算合格

HTML头中的写法给你一个参考,注意jquery和semantic的次序。

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/main.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
</head>





月牙儿-sky
月牙儿-sky
顺序换了,但是下拉效果还没出来-_- 是引用这个函数有问题吗? <script> $(".ui.dropdown").dropdown(); </script>
0
二的基本算合格
二的基本算合格

你指的是Gender的下拉框?我本地测试了一下,可以正常下拉!

下面完整的页面代码,你参考一下!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/main.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
</head>
<body id="example" class="progress">
<div class="segment">
    <div class="container">
        <div class="introduction"><h1 class="ui dividing header"> 基础组件 &nbsp;<a class="ui label large red" target="_blank" href="http://bbs.icoolxue.com/forum.php?mod=forumdisplay&amp;fid=48">Semantic UI交流论坛</a>&nbsp;<a class="ui red label large">Semantic UI学习交流群:277950553</a></h1>

            <p>基础组件是创建Web站点的基础控件,基本上所有的网站都会用到。</p></div>
    </div>
</div>
<div class="ui dropdown"><input name="gender" type="hidden"> <i class="dropdown icon"></i>

    <div class="default text">Gender</div>
    <div class="menu">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
    </div>
</div>
<div class="main container"><h2>基础组建的包含:</h2>

    <div class="ui two type stackable items">
        <div class="item">
            <div class="image">
                <div class="ui teal icon labled button"><i class="user icon"></i> 关注</div>
                <br/> <br/>

                <div class="ui purple icon buttons">
                    <div class="ui button"><i class="icon user"></i></div>
                    <div class="ui button"><i class="icon setting"></i></div>
                    <div class="ui button"><i class="icon trash"></i></div>
                </div>
            </div>
            <div class="content"><a class="name" href="">按钮</a>

                <p>基础组件,看图知义,已经不知道怎么解释这类组件。</p></div>
        </div>
        <div class="item">
            <div class="image">
                <div class="ui horizontal divider"><i class="github icon"></i></div>
            </div>
            <div class="content"><a class="name" href="">分隔条</a>

                <p>用来分开展现两组界面。也是基础组件,看图知义。</p></div>
        </div>
        <div class="item">
            <div class="image"><h2 class="ui red block header">第二部分</h2></div>
            <div class="content"><a class="name" href="">标题头</a>

                <p>用来简短的描述内容的主题。</p></div>
        </div>
        <div class="item">
            <div class="image">
                <div class="ui green red progress">
                    <div class="bar"></div>
                </div>
            </div>
            <div class="content"><a class="name" href="elements/progress.html">进度条</a>

                <p>进来展现任务进度,所有的操作系统都有该控件。你可以用来显示文件上传进度等。</p></div>
        </div>
        <div class="item">
            <div class="image">
                <div class="ui inverted piled segment"> 这是由爱酷学习网翻译并校对的Semantic UI中文网,非常感谢jack lukic为我们提供了如此强大如此易用的前端框架。爱酷学习网是用Bootstrap制作的,事实上,如果我早一点知道有Semantic UI这个框架,我想我应用会使用Semantic UI来完成爱酷学习网的前端页面。</div>
            </div>
        </div>
    </div>
</div>
<script>  $('.ui.dropdown').dropdown();  </script>
</body>
</html>




月牙儿-sky
月牙儿-sky
非常感谢,找到原因了,是我那个semantic.min.css的问题
0
中华田园犬
中华田园犬
这么说吧,有些动态效果是需要使用js初始化的......
返回顶部
顶部