wanjia9506
/
amWiki
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

左右分栏滚动与测试面板显示兼容性调整

This commit is contained in:
TevinLi 2016-12-28 15:30:29 +08:00
parent 911e9d9887
commit fcf2ff4950
4 changed files with 26 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
files/amWiki.css
View File

@ -135,70 +135,19 @@ footer{position:relative;width:100%;}
footer .signature{position:absolute;right:20px;bottom:-5px;color:#999;}
/* ---------- scroller ---------- */
.scroller {
height: 100%;
overflow: hidden;
}
.scroller .scroller-inner {
height: 100%;
-webkit-overflow-scrolling: touch;
}
.scroller .scroller-inner.on {
overflow-y: scroll;
}
.scroller .scrollbar {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
padding: 1px 0;
opacity: 0;
transition-duration: .5s;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
cursor: pointer;
}
.scroller:hover .scrollbar {
opacity: 1;
transition-duration: .3s;
}
.scroller .scrollbar.active {
opacity: 1;
}
.scroller .scrollbar.off {
opacity: 0;
}
.scroller .scrollbar div {
position: relative;
height: 100%;
transition-duration: .1s;
}
.scroller .scrollbar i {
position: absolute;
top: 0;
left: 4px;
width: 3px;
height: 100%;
background: rgba(50,50,50,.25);
border-radius: 2px;
transition-duration: .1s;
}
.scroller .scrollbar:active {
padding: 0;
}
.scroller .scrollbar:active div {
background: rgba(50,50,50,.07);
}
.scroller .scrollbar:active i {
left: 0;
width: 10px;
border-radius: 0;
}
body[onselectstart] {
cursor: pointer;
}
.scroller{height:100%;overflow:hidden;}
.scroller .scroller-inner{height:100%;-webkit-overflow-scrolling:touch;}
.scroller .scroller-inner.on{overflow-y:scroll;}
.scroller .scrollbar{position:absolute;top:0;right:0;width:10px;height:100%;padding:1px 0;opacity:0;transition-duration:.5s;-moz-user-select:none;-webkit-user-select:none;user-select:none;cursor:pointer;}
.scroller:hover .scrollbar{opacity:1;transition-duration:.3s;}
.scroller .scrollbar.active{opacity:1;}
.scroller .scrollbar.off{opacity:0;}
.scroller .scrollbar div{position:relative;height:100%;transition-duration:.1s;}
.scroller .scrollbar i{position:absolute;top:0;left:4px;width:3px;height:100%;background:rgba(50,50,50,.25);border-radius:2px;transition-duration:.1s;}
.scroller .scrollbar:active{padding:0;}
.scroller .scrollbar:active div{background:rgba(50,50,50,.07);}
.scroller .scrollbar:active i{left:0;width:10px;border-radius:0;}
body[onselectstart]{cursor:pointer;}
/* ---------- lowBrowser ---------- */
#lowBrowser{position:fixed;top:0;left:0;z-index:9999999;width:100%;height:100%;}

9
files/amWiki.scrollbar.js
View File

@ -44,23 +44,19 @@
$(window).on('resize', function () {
that._onWinResize();
that.checkHeight();
that._reScroll();
});
this.$e.container.on('scrollbar', function () {
that.checkHeight();
that._reScroll();
});
this.$e.inner.on({
'click': function () {
that.checkHeight();
that._reScroll();
},
'scroll': function () {
that._reScroll();
}
});
this.checkHeight();
this._reScroll();
this._bindAction();
};
@ -113,8 +109,8 @@
Scroller.prototype._resize = function () {
var that = this;
this.data.containerH = this.$e.inner.height();
//当内容高度小于容器时，不显示滚动条
if (this.data.contentH < this.data.containerH) {
//当内容高度小于等于容器时，不显示滚动条
if (this.data.contentH <= this.data.containerH) {
this.data.contentH = this.data.containerH;
this.$e.bar.addClass('off');
} else {
@ -153,6 +149,7 @@
this.data.contentHLast = this.data.contentH;
}
this._resize();
this._reScroll();
};
//方法绑定

2
files/amWiki.testing.css
View File

@ -6,7 +6,7 @@
.testing-show span{color:@colour-dark;}
/* ---------- testing ---------- */
.testing-box{display:none;position:absolute;top:0;right:0;width:100%;padding:45px;background-color:#fff;}
.testing-box{display:none;position:absolute;top:0;right:0;width:100%;padding:45px;min-height:100%;background-color:#fff;}
.testing-box h2{position:relative;min-width:320px;padding:2px 10px;margin:5px 0;color:#fff;background-color:@colour-light;}
.testing-box h2:after{position:absolute;top:0;right:-45px;width:45px;height:100%;content:" ";background-color:@colour-light;}
.testing-box h2 small{position:absolute;top:0;right:0;font-size:14px;line-height:38px;font-weight:normal;}

18
files/amWiki.testing.js
View File

@ -185,11 +185,11 @@
if (type == 'off') {
this.elm.$testingShow.removeClass('on').find('span').text('测试接口');
this.elm.$testingBox.css({
'position': 'absolute',
'padding': this.elm.$win.width() > 720 ? 45 : 25
'position': 'absolute'
});
this.elm.$view.show();
this.elm.$testingBox.animate({
this.elm.$view.show().addClass('scroller-content')
.next('#mainSibling').addClass('scroller-content').addClass('on');
this.elm.$testingBox.removeClass('scroller-content').stop().animate({
'width': '30%',
'opacity': 0
}, 200, 'swing', function () {
@ -201,17 +201,17 @@
.css({
'display': 'block',
'width': '0',
'min-height': this.elm.$view.height() + 90,
'opacity': 0
})
.stop()
.animate({
'width': '100%',
'opacity': 1
}, 300, 'swing', function () {
that.elm.$view.hide();
that.elm.$testingBox.css({
'position': 'relative',
'padding': 0
that.elm.$view.hide().removeClass('scroller-content')
.next('#mainSibling').removeClass('scroller-content').removeClass('on');
that.elm.$testingBox.addClass('scroller-content').css({
'position': 'relative'
});
});
}