发表于： 2017-05-13 23:04:44
1 936
今天完成的事情：
因为自己的时间插件与侧边栏的jq插件有冲突，所以自己就用css3重写了一遍。
明天计划的事情：
1.完成时间设置。
2.学习angular搜索功能
遇到的困难:
自己在github上找到一款angular插件的日期控件https://github.com/g00fy-/angular-datepicker，但是用到自己的代码中又出现报错，和jquery,js发生冲突（因为报错内容全是jquery.js的），所以自己就准备重写侧边栏，不需要用到js文件就可以触发，于是我就想到使用css3来写一个侧边栏。
如果要用css3写侧边栏，首先要想利用css3,怎么样才能够实现点击功能。于是我就想到了:checked伪类，它表示的是当input type="checkbox"状态时的被选中状态。通过:checked伪类可以实现很多功能，比如淡入淡出，点击按钮的toggle效果等，所以这次的侧边栏就用到了css3，不需要js文件就能完成相关功能。
收获：
用css3完成侧边栏。
首先，定义页面结构，首先就想到了按钮，
<input type="checkbox" id="button"/>
<label for="button" id="labelBtn"><i class="icon iconfont icon-button"></i></label>
按钮需要实现当页面宽度小于768px时，出现按钮，页面宽度大于768时，按钮消失。当页面宽度小于768px时，然后点击按钮，弹出内容；再次点击按钮，内容消失。于是我就想到了点击按钮，内容触发display:none;属性可以做到使内容消失，再次点击内容触发属性display:block；内容又出现了；
然后就是最重要的内容了，如何实现点击效果呢？之前我说过需要用到checked伪类实现，可是checked伪类只是表示input type="checkbox"的被选中状态，那该怎么做呢？之前在css任务10中用到
<input type="checkbox" id="a">
<label for="a"></label>
就可以将label标签和input标签进行绑定，然后对<input type="checkbox">属性设置为display:none;这样的话点击label标签就能触发checkbox的选中状态，然后就可以通过checked伪类
:checked~#wrapper{
display: none;
}
就对id为#wrapper的display属性进行none和block(block为默认属性)的来回跳转。然后就能够实现jq中的toggle（隐藏显示）功能了。下面就是我的侧边栏代码
css代码
body{
background-color: #F5F5F5;
}
@media screen and (min-width:769px){
#sidebar-wrapper{
width: 250px;
}
h3{
color: #FFF;
}
.titleTwo{
float: right;
width: 100%;
margin-top: -50px;
background-color: #FFF;
line-height: 50px;
text-align: right;
}
#labelBtn{
display: none;
}
#wrapper{
display: block;
width: 250px;
}
main{
position: absolute;
top:50px;
left: 250px;
}
}
@media screen and (max-width: 768px){
header{
width: 100%;
}
#sidebar-wrapper{
width: 100%;
}
.titleTwo{
text-align: right;
padding: 15px;
}
#labelBtn{
position: absolute;
top:0;
right: 15px;
display: inline-block;
line-height: 50px;
z-index: 999;
}
#labelBtn .icon-button{
font-size:40px;
color: #FFF;
z-index: 999;
}
:checked~#wrapper{
display: none;
}
}
.toggle{
min-height: 100vh;
overflow: hidden;
}
.toggled #sidebar-wrapper{
position: relative;
line-height: 50px;
background-color: rgb(35,42,58);
border-bottom: solid rgb(74, 95, 108) 1px;
}
h3{
padding-left: 37px;
line-height: 50px;
font-size: 18px;
font-weight: bold;
color: #FFF;
}
input{
display: none;
}
a{
padding: 15px;
}
#wrapper{
display: block;
padding-top: 28px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: rgb(35,42,58);
}
#wrapper li a,#wrapper li{
color: #FFF;
font-size: 16px;
}
.icon-dianbozhibov1213{
font-size: 26px;
}
.icon-cebianlanshouqi{
float:right;
margin-right:40px;
margin-top: 10px;
}
.dropdown-toggle{
padding-left: 10px;
width: 100%;
font-weight: 500;
}
.dropdown-toggle:hover{
background-color: rgba(255,255,255,0.4);
}
.menuList{
display: none;
}
.menuList li{
padding-left: 60px;
line-height: 40px;
}
:checked~#dropDownOne,
:checked~#dropDownTwo,
:checked~#dropDownThree,
:checked~#dropDownFour,
:checked~#dropDownFive,
:checked~#dropDownSix,
:checked~#dropDownSeven{
display: block;
}
.menuList li:hover{
background-color: rgba(255,255,255,0.4);
}
.menuList li a:hover{
text-decoration: none;
}
main{
background-color: #f5f5f5;
}
html代码
<header>
<div class="toggle toggled">
<!-- Sidebar -->
<div id="sidebar-wrapper" >
<h3>萝卜多后台管理系统</h3>
</div>
<input type="checkbox" id="button"/>
<label for="button" id="labelBtn"><i class="icon iconfont icon-button"></i></label>
<div class="titleTwo">
<a>超级管理员</a><span>|</span><a>admin</a><span>|</span><a><i class="icon iconfont icon-tuichu"></i></a>
</div>
<ul id="wrapper">
<li class="dropdown">
<input type="checkbox" id="collapseOne"/>
<label class="dropdown-toggle" for="collapseOne">
<i class="icon iconfont icon-dianbozhibov1213"></i>
信息管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</label>
<ul class="menuList" id="dropDownOne">
<li><a>公司列表</a></li>
<li><a>职位列表</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" id="collapseTwo"/>
<label class="dropdown-toggle" for="collapseTwo">
<i class="icon iconfont icon-dianbozhibov1213"></i>
Article管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</label>
<ul class="menuList" id="dropDownTwo">
<li><a ui-sref="backstage.articleListPage">Article列表</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" id="collapseThree"/>
<label class="dropdown-toggle" for="collapseThree">
<i class="icon iconfont icon-dianbozhibov1213"></i>
人才管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</label>
<ul class="menuList" id="dropDownThree">
<li><a>候选人列表</a></li>
<li><a>人才列表</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" id="collapseFour"/>
<label class="dropdown-toggle" for="collapseFour">
<i class="icon iconfont icon-dianbozhibov1213"></i>
推荐管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</label>
<ul class="menuList" id="dropDownFour">
<li><a>推荐列表</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" id="collapseFive"/>
<label class="dropdown-toggle" for="collapseFive">
<i class="icon iconfont icon-dianbozhibov1213"></i>
后台管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</label>
<ul class="menuList" id="dropDownFive">
<li><a>模块管理</a></li>
<li><a>角色管理</a></li>
<li><a>密码修改</a></li>
<li><a>账户管理</a></li>
<li><a>1</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" id="collapseSix"/>
<label class="dropdown-toggle" for="collapseSix">
<i class="icon iconfont icon-dianbozhibov1213"></i>
用户管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</label>
<ul class="menuList" id="dropDownSix">
<li><a>用户列表</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" id="collapseSeven"/>
<label class="dropdown-toggle" for="collapseSeven">
<i class="icon iconfont icon-dianbozhibov1213"></i>
内容管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</label>
<ul class="menuList" id="dropDownSeven">
<li><a>文章管理</a></li>
<li><a>视频管理</a></li>
</ul>
</li>
</ul>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<main><h2>Welcome!</h2></main>
</div>
</header>
。这样的话css3的侧边栏功能就解决了。有什么不对的地方，欢迎大家进行指正
返回列表
评论