bootstrap3.x

bootstrap3.x

vue 验证码倒计时(jq vs vue)

VUElopo1983 发表了文章 • 0 个评论 • 773 次浏览 • 2017-06-26 12:45 • 来自相关话题

短信验证 现在是市面上比较流行的一种验证方式,最近公司的项目有涉及到故整体如下
?
JQ版本
?
jssendMsm: function(wait, objectb) {
var time = wait;
if(time == 0) {
$(objectb).removeAttr("disabled");
$(objectb).text("获取验证码");
$(objectb).removeClass('hidden');
$(objectb).next().addClass('hidden');
time = wait;
} else {
$(objectb).attr("disabled", true);
$(objectb).addClass('hidden');
$(objectb).next().removeClass('hidden').text(time + " s 后重发");
time--;
setTimeout(function() {
qdcms.sendMsm(time, objectb);
}, 1000)
}
}




html<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>
<span class="btn btn-black disabled hidden"></span>css
VBAdmin-UI
?
预览地址:https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template<template>
<button class="timerout" :disabled="disabled || time > 0" @click='run'>
{{ text }}
</button>
</template>script<script>
export default {
name: 'timerbtn',
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data: function() {
return {
time: 0
}
},
methods: {
run() {
this.time = this.second;
this.timer();
},
timer() {
if(this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}
}
},
computed: {
text() {
return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';
}
},
mounted: function() {

}

}
</script>
style
css ?VBAdmin-UI<style lang="less">
@import (reference) "../../../assets/lib/css.less";
.timerout:disabled {
&,
&:hover,
&:focus {
.bgc(@cbla);
color: @cwh;
}
}
</style>
?
下载地址如下: 查看全部

短信验证 现在是市面上比较流行的一种验证方式,最近公司的项目有涉及到故整体如下


?
JQ版本
?
js
sendMsm: function(wait, objectb) {
var time = wait;
if(time == 0) {
$(objectb).removeAttr("disabled");
$(objectb).text("获取验证码");
$(objectb).removeClass('hidden');
$(objectb).next().addClass('hidden');
time = wait;
} else {
$(objectb).attr("disabled", true);
$(objectb).addClass('hidden');
$(objectb).next().removeClass('hidden').text(time + " s 后重发");
time--;
setTimeout(function() {
qdcms.sendMsm(time, objectb);
}, 1000)
}
}




html
<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>
<span class="btn btn-black disabled hidden"></span>
css
VBAdmin-UI
?
预览地址:https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template
<template>
<button class="timerout" :disabled="disabled || time > 0" @click='run'>
{{ text }}
</button>
</template>
script
<script>
export default {
name: 'timerbtn',
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data: function() {
return {
time: 0
}
},
methods: {
run() {
this.time = this.second;
this.timer();
},
timer() {
if(this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}
}
},
computed: {
text() {
return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';
}
},
mounted: function() {

}

}
</script>

style
css ?VBAdmin-UI
<style lang="less">
@import (reference) "../../../assets/lib/css.less";
.timerout:disabled {
&,
&:hover,
&:focus {
.bgc(@cbla);
color: @cwh;
}
}
</style>

?
下载地址如下:

关于组件和ui收集的想法

vbadmin-uilopo1983 发表了文章 • 2 个评论 • 589 次浏览 • 2017-06-01 20:35 • 来自相关话题

项目地址:
coding:http://lopo.coding.me/VBAdmin-UI/
github:https://github.com/lopo1983/VBAdmin-UI?
预览地址:
http://lopo.coding.me/VBAdmin-UI/
http://lopo.coding.me/VBAdmin-UI/ui/login.html

?
由于个人习惯coding的代码比github的优先发布 欢迎大家star fork

?vbadmin-ui 从去年就开始逐步更新组件,目的取代替换旧版的bsfanslib 扩展(原扩展已经力不从心,整体设计理念与现有的设计理念有较大偏差)!
vbadmin 为一套基于bootstrap原来样式的基础上根据目前设计理念和流行趋势重新进行定制的一套css 框架扩展(vba 奉行能用css实现的尽量不用js)
现在基础的form table 等已完成构建
已开始进入UI 组件制作阶段
希望大家踊跃提供
1.自己觉得好看实用的组件(截图,psd,链接均可,)
2.觉得某个组件需要基于其他组件的样式库里移植到使用bootstrap的
?
重要提示:
1.由于Vue的逐步流行,本框架中基础组件搭建完后,将于稍后推出基于vue的组件库(也是vba设计的初衷)
2.本扩展基于bootstrap3.x(目前由于能力和时间有限 没做浏览器兼容) 查看全部

项目地址:
coding:http://lopo.coding.me/VBAdmin-UI/
github:https://github.com/lopo1983/VBAdmin-UI?
预览地址:
http://lopo.coding.me/VBAdmin-UI/
http://lopo.coding.me/VBAdmin-UI/ui/login.html

?
由于个人习惯coding的代码比github的优先发布 欢迎大家star fork



?vbadmin-ui 从去年就开始逐步更新组件,目的取代替换旧版的bsfanslib 扩展(原扩展已经力不从心,整体设计理念与现有的设计理念有较大偏差)!
vbadmin 为一套基于bootstrap原来样式的基础上根据目前设计理念和流行趋势重新进行定制的一套css 框架扩展(vba 奉行能用css实现的尽量不用js)
现在基础的form table 等已完成构建
已开始进入UI 组件制作阶段

希望大家踊跃提供
1.自己觉得好看实用的组件(截图,psd,链接均可,)
2.觉得某个组件需要基于其他组件的样式库里移植到使用bootstrap的


?

重要提示:
1.由于Vue的逐步流行,本框架中基础组件搭建完后,将于稍后推出基于vue的组件库(也是vba设计的初衷)
2.本扩展基于bootstrap3.x(目前由于能力和时间有限 没做浏览器兼容)


Bootstrap+Masonry+imagesLoaded 快速实现瀑布流

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 726 次浏览 • 2017-05-04 16:53 • 来自相关话题

html
<div id="masonry" class="container-fluid">

<div class="thumbnail">
<div class="imgs">
<img src="" />
</div>
<div class="caption">
<div class="title"></div>
<div class="content">

</div>
</div>
</div>

</div>css
<script>
$(function() {

var masonryNode = $('#masonry');
masonryNode.imagesLoaded(function(){
masonryNode.masonry({
itemSelector: '.thumbnail',
isFitWidth: true
});
});


});
</script>// 首先将新元素添加到页面容器中

masonryNode.append(newItems);
// 等待新元素中的图片加载完毕
newItems.imagesLoaded(function(){

// 调用瀑布流布局的appended方法
masonryNode.masonry('appended', newItems);
});$(window).scroll(function() {

if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

if(!imagesLoading) {
appendToMasonry();
}

}

});masonry官网 查看全部
html
<div id="masonry" class="container-fluid">

<div class="thumbnail">
<div class="imgs">
<img src="" />
</div>
<div class="caption">
<div class="title"></div>
<div class="content">

</div>
</div>
</div>

</div>
css
<script>
$(function() {

var masonryNode = $('#masonry');
masonryNode.imagesLoaded(function(){
masonryNode.masonry({
itemSelector: '.thumbnail',
isFitWidth: true
});
});


});
</script>
// 首先将新元素添加到页面容器中

masonryNode.append(newItems);
// 等待新元素中的图片加载完毕
newItems.imagesLoaded(function(){

// 调用瀑布流布局的appended方法
masonryNode.masonry('appended', newItems);
});
$(window).scroll(function() {

if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

if(!imagesLoading) {
appendToMasonry();
}

}

});
masonry官网

vue 路由keep-alive

javascript/jQuerylopo1983 发表了文章 • 0 个评论 • 862 次浏览 • 2017-01-14 22:17 • 来自相关话题

<!-- 这里是需要keepalive的 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>?
路由设置
?
routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
] 查看全部
<!-- 这里是需要keepalive的 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
?
路由设置
?
	routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
]

bsf-vue

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 665 次浏览 • 2017-01-09 01:35 • 来自相关话题

之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢
之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢

bootstrap step vue版

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 742 次浏览 • 2016-12-23 01:54 • 来自相关话题

<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>

<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>



<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>



.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/

在哪遥远的地方 有个预览地址 查看全部
<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>

<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>



<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>



.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/

在哪遥远的地方 有个预览地址

bootstrap step 插件更新

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 833 次浏览 • 2016-12-16 01:57 • 来自相关话题

$(function() {
bsStep();
//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)
})? ? ? ?描述:
? ? ? ?1. ?css.less 主色调 蓝色修改@ces /背景色 修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔 点击下面下载 查看全部
			$(function() {
bsStep();
//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)
})
? ? ? ?描述:
? ? ? ?1. ?css.less 主色调 蓝色修改@ces /背景色 修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔 点击下面下载

bootstrap 3.x +vue 2.x 饿了么pc端导航模拟

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 806 次浏览 • 2016-12-08 22:48 • 来自相关话题

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style>
.nav>li>a {
border-radius: 0;
cursor: pointer;
color: #101010;
}

#pmenu a {
cursor: pointer;
}

#pmenu .active a {
background-color: lightgrey;
color: #080808;
border-radius: 0;
}

#cmenu {
background-color: lightgrey;
}

#cmenu li {
padding: 10px 5px;
}

#cmenu .active a {}
</style>
</head>

<body>
<div id="app">
<topnav></topnav>
</div>
<!--template-->
<template id="topnav-comp">
<div>
<ul class="nav nav-pills nav-justified" id="pmenu">
<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">
<a @click="getChild(index)">{{nav.name}}</a>
</li>
</ul>
<ul class="nav nav-pills" id="cmenu">
<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">
<a>{{navc.name}}</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script>
Vue.component('topnav', {
template: '#topnav-comp',
data: function() {
return {
iscurP: 0,
iscurC: 0,
navlist: [],
navchild: []
}
},
methods: {
getNavlist: function() {
var self = this
$.ajax({
url: 'data/navlist.json',
type: 'get',
async: false,
dataType: "json",
success: function(data) {
self.navlist = data;
},
error: function() {
console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')
}
});
},
getChild: function(index) {
this.navchild = this.navlist[index].sub_categories;
this.iscurC = 0
}
},
mounted: function() {},
created: function() {
this.getNavlist();
}
});
vm = new Vue({
el: "#app"
})
</script>
</body>

</htm 查看全部
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style>
.nav>li>a {
border-radius: 0;
cursor: pointer;
color: #101010;
}

#pmenu a {
cursor: pointer;
}

#pmenu .active a {
background-color: lightgrey;
color: #080808;
border-radius: 0;
}

#cmenu {
background-color: lightgrey;
}

#cmenu li {
padding: 10px 5px;
}

#cmenu .active a {}
</style>
</head>

<body>
<div id="app">
<topnav></topnav>
</div>
<!--template-->
<template id="topnav-comp">
<div>
<ul class="nav nav-pills nav-justified" id="pmenu">
<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">
<a @click="getChild(index)">{{nav.name}}</a>
</li>
</ul>
<ul class="nav nav-pills" id="cmenu">
<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">
<a>{{navc.name}}</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script>
Vue.component('topnav', {
template: '#topnav-comp',
data: function() {
return {
iscurP: 0,
iscurC: 0,
navlist: [],
navchild: []
}
},
methods: {
getNavlist: function() {
var self = this
$.ajax({
url: 'data/navlist.json',
type: 'get',
async: false,
dataType: "json",
success: function(data) {
self.navlist = data;
},
error: function() {
console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')
}
});
},
getChild: function(index) {
this.navchild = this.navlist[index].sub_categories;
this.iscurC = 0
}
},
mounted: function() {},
created: function() {
this.getNavlist();
}
});
vm = new Vue({
el: "#app"
})
</script>
</body>

</htm

bootstrap 基础css 问题集锦

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 633 次浏览 • 2016-11-24 10:02 • 来自相关话题

1.Q:部分手机 在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性
line-height:normal
1.Q:部分手机 在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性
line-height:normal

可拖拽Modal

bootstrap3.xlopo1983 发表了文章 • 1 个评论 • 839 次浏览 • 2016-09-12 15:50 • 来自相关话题

<script src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>

$(document).on('show.bs.modal','.modal', function() {
?? ?$.fn.draggable && $('.modal-content',this).draggable({
?? ??? ?containment: 'document',
?? ??? ?scroll: false,
?? ??? ?handle: '.modal-header'
?? ?});
?? ?
?? ?$('.modal-dialog',this).css({
?? ??? ?position:'absolute',
?? ??? ?top:'50%',
?? ??? ?left:'50%',
?? ??? ?transform: 'translate(-50%, -50%)'
?? ?})
})戏子大爷提供?预览地址
? 查看全部
<script src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>

$(document).on('show.bs.modal','.modal', function() {
?? ?$.fn.draggable && $('.modal-content',this).draggable({
?? ??? ?containment: 'document',
?? ??? ?scroll: false,
?? ??? ?handle: '.modal-header'
?? ?});
?? ?
?? ?$('.modal-dialog',this).css({
?? ??? ?position:'absolute',
?? ??? ?top:'50%',
?? ??? ?left:'50%',
?? ??? ?transform: 'translate(-50%, -50%)'
?? ?})
})
戏子大爷提供?预览地址
?

bootstrap modal 相关问题集锦!

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 1256 次浏览 • 2016-01-13 11:35 • 来自相关话题

Q:Modal 点击后仅显示黑色半透背景 而modalbody 主题在其背面?
源文件库是否与API 一致插件加载过多 冲突JQ版本过低??(本人未作验证 真实性有待考究)
Q:modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明 只是是英文的 而且bootcss也未能详细的翻译该节点
实现方法
方法1$('#myModal').modal({
keyboard: false;//禁用键盘ESC 关闭
backdrop: false;//禁用非modal外半透背景点击关闭
})方法2data-backdrop="false"(html5 data 调用)


Q:在Modal中使用datepicker 错位?(该章节由 戏子 提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:container
String. Default: “body”
Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)示例如下:
html<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group" style="position:relative;">
<label for="exampleInputEmail1">Datetimepicker</label>
<input type="text" class="form-control" id="datetimepicker">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>js $(function() {
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container : '#myModal .form-group'
});
}); 查看全部
Q:Modal 点击后仅显示黑色半透背景 而modalbody 主题在其背面?
  1. 源文件库是否与API 一致
  2. 插件加载过多 冲突
  3. JQ版本过低??(本人未作验证 真实性有待考究)

Q:modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明 只是是英文的 而且bootcss也未能详细的翻译该节点
实现方法
方法1
$('#myModal').modal({
keyboard: false;//禁用键盘ESC 关闭
backdrop: false;//禁用非modal外半透背景点击关闭
})
方法2
data-backdrop="false"(html5 data 调用)


Q:在Modal中使用datepicker 错位?(该章节由 戏子 提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:
container
String. Default: “body”
Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)
示例如下:
html
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group" style="position:relative;">
<label for="exampleInputEmail1">Datetimepicker</label>
<input type="text" class="form-control" id="datetimepicker">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
js
    $(function() {
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container : '#myModal .form-group'
});
});

bs3.x dropdown 改写hover 触发

bootstrap3.xlopo1983 发表了文章 • 1 个评论 • 1074 次浏览 • 2016-01-06 17:09 • 来自相关话题

$('[data-toggle="dropdown"]').each(function() {
var $this = $(this),
$parent = $this.parent();
$this.off('click.dropdown.data-api');
$parent.hover(function() {
$this.dropdown('toggle');
});
}); 查看全部
				$('[data-toggle="dropdown"]').each(function() {
var $this = $(this),
$parent = $this.parent();
$this.off('click.dropdown.data-api');
$parent.hover(function() {
$this.dropdown('toggle');
});
});

vue 验证码倒计时(jq vs vue)

VUElopo1983 发表了文章 • 0 个评论 • 773 次浏览 • 2017-06-26 12:45 • 来自相关话题

短信验证 现在是市面上比较流行的一种验证方式,最近公司的项目有涉及到故整体如下
?
JQ版本
?
jssendMsm: function(wait, objectb) {
var time = wait;
if(time == 0) {
$(objectb).removeAttr("disabled");
$(objectb).text("获取验证码");
$(objectb).removeClass('hidden');
$(objectb).next().addClass('hidden');
time = wait;
} else {
$(objectb).attr("disabled", true);
$(objectb).addClass('hidden');
$(objectb).next().removeClass('hidden').text(time + " s 后重发");
time--;
setTimeout(function() {
qdcms.sendMsm(time, objectb);
}, 1000)
}
}




html<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>
<span class="btn btn-black disabled hidden"></span>css
VBAdmin-UI
?
预览地址:https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template<template>
<button class="timerout" :disabled="disabled || time > 0" @click='run'>
{{ text }}
</button>
</template>script<script>
export default {
name: 'timerbtn',
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data: function() {
return {
time: 0
}
},
methods: {
run() {
this.time = this.second;
this.timer();
},
timer() {
if(this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}
}
},
computed: {
text() {
return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';
}
},
mounted: function() {

}

}
</script>
style
css ?VBAdmin-UI<style lang="less">
@import (reference) "../../../assets/lib/css.less";
.timerout:disabled {
&,
&:hover,
&:focus {
.bgc(@cbla);
color: @cwh;
}
}
</style>
?
下载地址如下: 查看全部

短信验证 现在是市面上比较流行的一种验证方式,最近公司的项目有涉及到故整体如下


?
JQ版本
?
js
sendMsm: function(wait, objectb) {
var time = wait;
if(time == 0) {
$(objectb).removeAttr("disabled");
$(objectb).text("获取验证码");
$(objectb).removeClass('hidden');
$(objectb).next().addClass('hidden');
time = wait;
} else {
$(objectb).attr("disabled", true);
$(objectb).addClass('hidden');
$(objectb).next().removeClass('hidden').text(time + " s 后重发");
time--;
setTimeout(function() {
qdcms.sendMsm(time, objectb);
}, 1000)
}
}




html
<a class="btn btn-black" onclick="qdcms.getcode(60,this)">获取验证码</a>
<span class="btn btn-black disabled hidden"></span>
css
VBAdmin-UI
?
预览地址:https://www.tfstock.com.cn/?点击注册按钮
?
?
Vue 实现
?
template
<template>
<button class="timerout" :disabled="disabled || time > 0" @click='run'>
{{ text }}
</button>
</template>
script
<script>
export default {
name: 'timerbtn',
props: {
second: {
type: Number,
default: 60
},
disabled: {
type: Boolean,
default: false
}
},
data: function() {
return {
time: 0
}
},
methods: {
run() {
this.time = this.second;
this.timer();
},
timer() {
if(this.time > 0) {
this.time--;
setTimeout(this.timer, 1000);
}
}
},
computed: {
text() {
return this.time > 0 ? this.time + 's 后重新获取' : '点击获取验证码';
}
},
mounted: function() {

}

}
</script>

style
css ?VBAdmin-UI
<style lang="less">
@import (reference) "../../../assets/lib/css.less";
.timerout:disabled {
&,
&:hover,
&:focus {
.bgc(@cbla);
color: @cwh;
}
}
</style>

?
下载地址如下:

关于组件和ui收集的想法

vbadmin-uilopo1983 发表了文章 • 2 个评论 • 589 次浏览 • 2017-06-01 20:35 • 来自相关话题

项目地址:
coding:http://lopo.coding.me/VBAdmin-UI/
github:https://github.com/lopo1983/VBAdmin-UI?
预览地址:
http://lopo.coding.me/VBAdmin-UI/
http://lopo.coding.me/VBAdmin-UI/ui/login.html

?
由于个人习惯coding的代码比github的优先发布 欢迎大家star fork

?vbadmin-ui 从去年就开始逐步更新组件,目的取代替换旧版的bsfanslib 扩展(原扩展已经力不从心,整体设计理念与现有的设计理念有较大偏差)!
vbadmin 为一套基于bootstrap原来样式的基础上根据目前设计理念和流行趋势重新进行定制的一套css 框架扩展(vba 奉行能用css实现的尽量不用js)
现在基础的form table 等已完成构建
已开始进入UI 组件制作阶段
希望大家踊跃提供
1.自己觉得好看实用的组件(截图,psd,链接均可,)
2.觉得某个组件需要基于其他组件的样式库里移植到使用bootstrap的
?
重要提示:
1.由于Vue的逐步流行,本框架中基础组件搭建完后,将于稍后推出基于vue的组件库(也是vba设计的初衷)
2.本扩展基于bootstrap3.x(目前由于能力和时间有限 没做浏览器兼容) 查看全部

项目地址:
coding:http://lopo.coding.me/VBAdmin-UI/
github:https://github.com/lopo1983/VBAdmin-UI?
预览地址:
http://lopo.coding.me/VBAdmin-UI/
http://lopo.coding.me/VBAdmin-UI/ui/login.html

?
由于个人习惯coding的代码比github的优先发布 欢迎大家star fork



?vbadmin-ui 从去年就开始逐步更新组件,目的取代替换旧版的bsfanslib 扩展(原扩展已经力不从心,整体设计理念与现有的设计理念有较大偏差)!
vbadmin 为一套基于bootstrap原来样式的基础上根据目前设计理念和流行趋势重新进行定制的一套css 框架扩展(vba 奉行能用css实现的尽量不用js)
现在基础的form table 等已完成构建
已开始进入UI 组件制作阶段

希望大家踊跃提供
1.自己觉得好看实用的组件(截图,psd,链接均可,)
2.觉得某个组件需要基于其他组件的样式库里移植到使用bootstrap的


?

重要提示:
1.由于Vue的逐步流行,本框架中基础组件搭建完后,将于稍后推出基于vue的组件库(也是vba设计的初衷)
2.本扩展基于bootstrap3.x(目前由于能力和时间有限 没做浏览器兼容)


Bootstrap+Masonry+imagesLoaded 快速实现瀑布流

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 726 次浏览 • 2017-05-04 16:53 • 来自相关话题

html
<div id="masonry" class="container-fluid">

<div class="thumbnail">
<div class="imgs">
<img src="" />
</div>
<div class="caption">
<div class="title"></div>
<div class="content">

</div>
</div>
</div>

</div>css
<script>
$(function() {

var masonryNode = $('#masonry');
masonryNode.imagesLoaded(function(){
masonryNode.masonry({
itemSelector: '.thumbnail',
isFitWidth: true
});
});


});
</script>// 首先将新元素添加到页面容器中

masonryNode.append(newItems);
// 等待新元素中的图片加载完毕
newItems.imagesLoaded(function(){

// 调用瀑布流布局的appended方法
masonryNode.masonry('appended', newItems);
});$(window).scroll(function() {

if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

if(!imagesLoading) {
appendToMasonry();
}

}

});masonry官网 查看全部
html
<div id="masonry" class="container-fluid">

<div class="thumbnail">
<div class="imgs">
<img src="" />
</div>
<div class="caption">
<div class="title"></div>
<div class="content">

</div>
</div>
</div>

</div>
css
<script>
$(function() {

var masonryNode = $('#masonry');
masonryNode.imagesLoaded(function(){
masonryNode.masonry({
itemSelector: '.thumbnail',
isFitWidth: true
});
});


});
</script>
// 首先将新元素添加到页面容器中

masonryNode.append(newItems);
// 等待新元素中的图片加载完毕
newItems.imagesLoaded(function(){

// 调用瀑布流布局的appended方法
masonryNode.masonry('appended', newItems);
});
$(window).scroll(function() {

if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

if(!imagesLoading) {
appendToMasonry();
}

}

});
masonry官网

vue 路由keep-alive

javascript/jQuerylopo1983 发表了文章 • 0 个评论 • 862 次浏览 • 2017-01-14 22:17 • 来自相关话题

<!-- 这里是需要keepalive的 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>?
路由设置
?
routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
] 查看全部
<!-- 这里是需要keepalive的 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
?
路由设置
?
	routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
]

bsf-vue

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 665 次浏览 • 2017-01-09 01:35 • 来自相关话题

之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢
之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢

bootstrap step vue版

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 742 次浏览 • 2016-12-23 01:54 • 来自相关话题

<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>

<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>



<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>



.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/

在哪遥远的地方 有个预览地址 查看全部
<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>

<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>



<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>



.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/

在哪遥远的地方 有个预览地址

bootstrap step 插件更新

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 833 次浏览 • 2016-12-16 01:57 • 来自相关话题

$(function() {
bsStep();
//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)
})? ? ? ?描述:
? ? ? ?1. ?css.less 主色调 蓝色修改@ces /背景色 修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔 点击下面下载 查看全部
			$(function() {
bsStep();
//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)
})
? ? ? ?描述:
? ? ? ?1. ?css.less 主色调 蓝色修改@ces /背景色 修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔 点击下面下载

bootstrap 3.x +vue 2.x 饿了么pc端导航模拟

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 806 次浏览 • 2016-12-08 22:48 • 来自相关话题

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style>
.nav>li>a {
border-radius: 0;
cursor: pointer;
color: #101010;
}

#pmenu a {
cursor: pointer;
}

#pmenu .active a {
background-color: lightgrey;
color: #080808;
border-radius: 0;
}

#cmenu {
background-color: lightgrey;
}

#cmenu li {
padding: 10px 5px;
}

#cmenu .active a {}
</style>
</head>

<body>
<div id="app">
<topnav></topnav>
</div>
<!--template-->
<template id="topnav-comp">
<div>
<ul class="nav nav-pills nav-justified" id="pmenu">
<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">
<a @click="getChild(index)">{{nav.name}}</a>
</li>
</ul>
<ul class="nav nav-pills" id="cmenu">
<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">
<a>{{navc.name}}</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script>
Vue.component('topnav', {
template: '#topnav-comp',
data: function() {
return {
iscurP: 0,
iscurC: 0,
navlist: [],
navchild: []
}
},
methods: {
getNavlist: function() {
var self = this
$.ajax({
url: 'data/navlist.json',
type: 'get',
async: false,
dataType: "json",
success: function(data) {
self.navlist = data;
},
error: function() {
console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')
}
});
},
getChild: function(index) {
this.navchild = this.navlist[index].sub_categories;
this.iscurC = 0
}
},
mounted: function() {},
created: function() {
this.getNavlist();
}
});
vm = new Vue({
el: "#app"
})
</script>
</body>

</htm 查看全部
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style>
.nav>li>a {
border-radius: 0;
cursor: pointer;
color: #101010;
}

#pmenu a {
cursor: pointer;
}

#pmenu .active a {
background-color: lightgrey;
color: #080808;
border-radius: 0;
}

#cmenu {
background-color: lightgrey;
}

#cmenu li {
padding: 10px 5px;
}

#cmenu .active a {}
</style>
</head>

<body>
<div id="app">
<topnav></topnav>
</div>
<!--template-->
<template id="topnav-comp">
<div>
<ul class="nav nav-pills nav-justified" id="pmenu">
<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">
<a @click="getChild(index)">{{nav.name}}</a>
</li>
</ul>
<ul class="nav nav-pills" id="cmenu">
<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">
<a>{{navc.name}}</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script>
Vue.component('topnav', {
template: '#topnav-comp',
data: function() {
return {
iscurP: 0,
iscurC: 0,
navlist: [],
navchild: []
}
},
methods: {
getNavlist: function() {
var self = this
$.ajax({
url: 'data/navlist.json',
type: 'get',
async: false,
dataType: "json",
success: function(data) {
self.navlist = data;
},
error: function() {
console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')
}
});
},
getChild: function(index) {
this.navchild = this.navlist[index].sub_categories;
this.iscurC = 0
}
},
mounted: function() {},
created: function() {
this.getNavlist();
}
});
vm = new Vue({
el: "#app"
})
</script>
</body>

</htm

bootstrap 基础css 问题集锦

bootstrap3.xlopo1983 发表了文章 • 0 个评论 • 633 次浏览 • 2016-11-24 10:02 • 来自相关话题

1.Q:部分手机 在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性
line-height:normal
1.Q:部分手机 在bootstrap设置了input-lg 设置后会导致option 错位情况
A: 设置该元素css属性
line-height:normal

可拖拽Modal

bootstrap3.xlopo1983 发表了文章 • 1 个评论 • 839 次浏览 • 2016-09-12 15:50 • 来自相关话题

<script src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>

$(document).on('show.bs.modal','.modal', function() {
?? ?$.fn.draggable && $('.modal-content',this).draggable({
?? ??? ?containment: 'document',
?? ??? ?scroll: false,
?? ??? ?handle: '.modal-header'
?? ?});
?? ?
?? ?$('.modal-dialog',this).css({
?? ??? ?position:'absolute',
?? ??? ?top:'50%',
?? ??? ?left:'50%',
?? ??? ?transform: 'translate(-50%, -50%)'
?? ?})
})戏子大爷提供?预览地址
? 查看全部
<script src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>

$(document).on('show.bs.modal','.modal', function() {
?? ?$.fn.draggable && $('.modal-content',this).draggable({
?? ??? ?containment: 'document',
?? ??? ?scroll: false,
?? ??? ?handle: '.modal-header'
?? ?});
?? ?
?? ?$('.modal-dialog',this).css({
?? ??? ?position:'absolute',
?? ??? ?top:'50%',
?? ??? ?left:'50%',
?? ??? ?transform: 'translate(-50%, -50%)'
?? ?})
})
戏子大爷提供?预览地址
?