test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

toggle code snipple

Browse Source
This commit is contained in:
afc163 2015-05-16 16:20:49 +08:00
parent 41f7a0e363
commit 937a76034a
4 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/code.jsx
View File

@ -19,7 +19,7 @@ var CodeBox = React.createClass({
if (!$(e.target).hasClass('collapse')) {
return;
}
$(e.target).parent().parent().find('.highlight').toggle();
$(e.target).parent().parent().find('.highlight').slideToggle(150);
},
render: function() {
var html = this.state.html;

4
static/script.js
View File

@ -1,5 +1,7 @@
$(function() {
// code here
$('.component-demos .icon-all').on('click', function() {
$('.code-box').find('.highlight').slideToggle(150);
});
});

24
static/style.css
View File

@ -36,8 +36,7 @@ li {
a {
color: #6EB4E0;
text-decoration: none;
transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: color .3s ease;
}
a:hover {
color: #6EB4E0;
@ -61,7 +60,6 @@ header {
height: 46px;
margin: 20px 30px;
transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), width .3s cubic-bezier(0.075, 0.82, 0.165, 1), height .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), width .3s cubic-bezier(0.075, 0.82, 0.165, 1), height .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.search {
float: left;
@ -78,7 +76,6 @@ header {
height: 22px;
padding: 0 0 0 20px;
color: #999;
-webkit-transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
font-size: 14px;
}
@ -107,7 +104,6 @@ header {
left: 30px;
cursor: pointer;
transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.search button:before,
.search button:after {
@ -158,8 +154,6 @@ header {
width: 100%;
height: 100%;
display: block;
-webkit-transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav ul li.current a {
color: #71B5DE;
@ -176,7 +170,6 @@ header {
left: 0;
background: #6EB4E0;
transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav-phone-icon {
display: none;
@ -203,7 +196,6 @@ header {
min-height: calc(100% - 217px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
}
.banner-box {
@ -971,6 +963,20 @@ footer ul li > a {
font-weight: normal;
}
.component-demos .icon-all {
cursor: pointer;
font-size: 16px;
color: #9199AC;
margin-left: 5px;
vertical-align: text-bottom;
opacity: 0.8;
transition: all 0.3s ease;
}
.component-demos .icon-all:hover {
opacity: 1;
}
.code-boxes {
-webkit-column-count: 2;
-moz-column-count: 2;

7
theme/templates/layout.html
View File

@ -9,7 +9,7 @@
<title>{% block title %}Ant Design{% endblock %}</title>
<link rel="stylesheet" href="/static/normalize.css">
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1431763241_3066776.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1431763644_2809389.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="/static/script.js"></script>
@ -91,7 +91,10 @@
</h1>
{{ post.html }}
{%- if post.meta.template === 'component' %}
<h2>组件演示</h2>
<h2 class="component-demos">
组件演示
<i class="iconfont icon-all" title="展开全部代码"></i>
</h2>
<div id="code-boxes">
代码加载中...
</div>