ppdxzz
6 years ago
parent
32e9c936d6
commit
cf809c9525
@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptLibraryMappings">
|
||||
<file url="file://$PROJECT_DIR$" libraries="{html5, respond}" />
|
||||
<file url="file://$PROJECT_DIR$" libraries="{animate, html5, respond}" />
|
||||
</component>
|
||||
</project>
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,150 @@
|
||||
.mobileSelect {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: opacity 0.4s, z-index 0.4s;
|
||||
transition: opacity 0.4s, z-index 0.4s;
|
||||
}
|
||||
.mobileSelect * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mobileSelect .grayLayer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 888;
|
||||
display: block;
|
||||
}
|
||||
.mobileSelect .content {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 889;
|
||||
color: black;
|
||||
-webkit-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
bottom: -350px;
|
||||
left: 0;
|
||||
background: white;
|
||||
}
|
||||
.mobileSelect .content .fixWidth {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
.mobileSelect .content .fixWidth:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.mobileSelect .content .btnBar {
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
font-size: 15px;
|
||||
height: 45px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
}
|
||||
.mobileSelect .content .btnBar .cancel,
|
||||
.mobileSelect .content .btnBar .ensure {
|
||||
height: 45px;
|
||||
width: 55px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.mobileSelect .content .btnBar .cancel {
|
||||
left: 0;
|
||||
color: #666;
|
||||
}
|
||||
.mobileSelect .content .btnBar .ensure {
|
||||
right: 0;
|
||||
color: #1e83d3;
|
||||
}
|
||||
.mobileSelect .content .btnBar .title {
|
||||
font-size: 15px;
|
||||
padding: 0 15%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mobileSelect .content .panel:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.mobileSelect .content .panel .wheels {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobileSelect .content .panel .wheel {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
-webkit-transition: width 0.3s ease;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.mobileSelect .content .panel .wheel .selectContainer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
-webkit-transition: -webkit-transform 0.18s ease-out;
|
||||
transition: -webkit-transform 0.18s ease-out;
|
||||
transition: transform 0.18s ease-out;
|
||||
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
|
||||
}
|
||||
.mobileSelect .content .panel .wheel .selectContainer li {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mobileSelect .content .panel .selectLine {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
pointer-events: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #DCDCDC;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
}
|
||||
.mobileSelect .content .panel .shadowMask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
|
||||
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
|
||||
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mobileSelect-show {
|
||||
opacity: 1;
|
||||
z-index: 10000;
|
||||
visibility: visible;
|
||||
}
|
||||
.mobileSelect-show .content {
|
||||
bottom: 0;
|
||||
}
|
||||
@ -0,0 +1,260 @@
|
||||
/*! nouislider - 10.0.0 - 2017-05-28 14:52:48 */
|
||||
/* Functional styling;
|
||||
* These styles are required for noUiSlider to function.
|
||||
* You don't need to change these rules to apply your design.
|
||||
*/
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
}
|
||||
.noUi-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* Fix 401 */
|
||||
}
|
||||
.noUi-connect {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.noUi-origin {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.noUi-state-tap .noUi-connect,
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
|
||||
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
/* Painting and performance;
|
||||
* Browsers can paint handles in their own layer.
|
||||
*/
|
||||
.noUi-base,
|
||||
.noUi-handle {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
/* Slider size and handle placement;
|
||||
*/
|
||||
.noUi-horizontal {
|
||||
height: 18px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
left: -17px;
|
||||
top: -6px;
|
||||
}
|
||||
.noUi-vertical {
|
||||
width: 18px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
left: -6px;
|
||||
top: -17px;
|
||||
}
|
||||
/* Styling;
|
||||
*/
|
||||
.noUi-target {
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #D3D3D3;
|
||||
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
|
||||
}
|
||||
.noUi-connect {
|
||||
background: #3FB8AF;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
|
||||
-webkit-transition: background 450ms;
|
||||
transition: background 450ms;
|
||||
}
|
||||
/* Handles and cursors;
|
||||
*/
|
||||
.noUi-draggable {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.noUi-vertical .noUi-draggable {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.noUi-handle {
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #FFF;
|
||||
cursor: default;
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
|
||||
}
|
||||
.noUi-active {
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
|
||||
}
|
||||
/* Handle stripes;
|
||||
*/
|
||||
.noUi-handle:before,
|
||||
.noUi-handle:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background: #E8E7E6;
|
||||
left: 14px;
|
||||
top: 6px;
|
||||
}
|
||||
.noUi-handle:after {
|
||||
left: 17px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:before,
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
top: 17px;
|
||||
}
|
||||
/* Disabled state;
|
||||
*/
|
||||
[disabled] .noUi-connect {
|
||||
background: #B8B8B8;
|
||||
}
|
||||
[disabled].noUi-target,
|
||||
[disabled].noUi-handle,
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* Base;
|
||||
*
|
||||
*/
|
||||
.noUi-pips,
|
||||
.noUi-pips * {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
}
|
||||
/* Values;
|
||||
*
|
||||
*/
|
||||
.noUi-value {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.noUi-value-sub {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
/* Markings;
|
||||
*
|
||||
*/
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background: #CCC;
|
||||
}
|
||||
.noUi-marker-sub {
|
||||
background: #AAA;
|
||||
}
|
||||
.noUi-marker-large {
|
||||
background: #AAA;
|
||||
}
|
||||
/* Horizontal layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-horizontal {
|
||||
padding: 10px 0;
|
||||
height: 80px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.noUi-value-horizontal {
|
||||
-webkit-transform: translate3d(-50%, 50%, 0);
|
||||
transform: translate3d(-50%, 50%, 0);
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-sub {
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 15px;
|
||||
}
|
||||
/* Vertical layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-vertical {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.noUi-value-vertical {
|
||||
-webkit-transform: translate3d(0, 50%, 0);
|
||||
transform: translate3d(0, 50%, 0);
|
||||
padding-left: 25px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-sub {
|
||||
width: 10px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-large {
|
||||
width: 15px;
|
||||
}
|
||||
.noUi-tooltip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.noUi-horizontal .noUi-tooltip {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
bottom: 120%;
|
||||
}
|
||||
.noUi-vertical .noUi-tooltip {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
top: 50%;
|
||||
right: 120%;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
/*
|
||||
*
|
||||
* Main stylesheet for Switchery.
|
||||
* http://abpetkov.github.io/switchery/
|
||||
*
|
||||
*/
|
||||
|
||||
/* Switchery defaults. */
|
||||
|
||||
.switchery {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: content-box;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.switchery > small {
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/* Switchery sizes. */
|
||||
|
||||
.switchery-small {
|
||||
border-radius: 20px;
|
||||
height: 20px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
.switchery-small > small {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.switchery-large {
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.switchery-large > small {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,690 @@
|
||||
/*!
|
||||
* mobileSelect.js
|
||||
* (c) 2017-present onlyhom
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
function getClass(dom,string) {
|
||||
return dom.getElementsByClassName(string);
|
||||
}
|
||||
//构造器
|
||||
function MobileSelect(config) {
|
||||
this.mobileSelect;
|
||||
this.wheelsData = config.wheels;
|
||||
this.jsonType = false;
|
||||
this.cascadeJsonData = [];
|
||||
this.displayJson = [];
|
||||
this.curValue = null;
|
||||
this.curIndexArr = [];
|
||||
this.cascade = false;
|
||||
this.startY;
|
||||
this.moveEndY;
|
||||
this.moveY;
|
||||
this.oldMoveY;
|
||||
this.offset = 0;
|
||||
this.offsetSum = 0;
|
||||
this.oversizeBorder;
|
||||
this.curDistance = [];
|
||||
this.clickStatus = false;
|
||||
this.isPC = true;
|
||||
this.init(config);
|
||||
}
|
||||
MobileSelect.prototype = {
|
||||
constructor: MobileSelect,
|
||||
init: function(config){
|
||||
var _this = this;
|
||||
_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
|
||||
_this.checkDataType();
|
||||
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
|
||||
_this.trigger = document.querySelector(config.trigger);
|
||||
if(!_this.trigger){
|
||||
console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
|
||||
return false;
|
||||
}
|
||||
_this.wheel = getClass(_this.mobileSelect,'wheel');
|
||||
_this.slider = getClass(_this.mobileSelect,'selectContainer');
|
||||
_this.wheels = _this.mobileSelect.querySelector('.wheels');
|
||||
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
|
||||
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
|
||||
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel');
|
||||
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');
|
||||
_this.popUp = _this.mobileSelect.querySelector('.content');
|
||||
_this.callback = config.callback ? config.callback : function(){};
|
||||
_this.cancel = config.cancel ? config.cancel : function(){};
|
||||
_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){};
|
||||
_this.initPosition = config.position ? config.position : [];
|
||||
_this.titleText = config.title ? config.title : '';
|
||||
_this.connector = config.connector ? config.connector : ' ';
|
||||
_this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true;
|
||||
_this.trigger.style.cursor='pointer';
|
||||
_this.setStyle(config);
|
||||
_this.setTitle(_this.titleText);
|
||||
_this.checkIsPC();
|
||||
_this.checkCascade();
|
||||
if (_this.cascade) {
|
||||
_this.initCascade();
|
||||
}
|
||||
//定位 初始位置
|
||||
if(_this.initPosition.length < _this.slider.length){
|
||||
var diff = _this.slider.length - _this.initPosition.length;
|
||||
for(var i=0; i<diff; i++){
|
||||
_this.initPosition.push(0);
|
||||
}
|
||||
}
|
||||
|
||||
_this.setCurDistance(_this.initPosition);
|
||||
_this.addListenerAll();
|
||||
|
||||
//按钮监听
|
||||
_this.cancelBtn.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.remove('mobileSelect-show');
|
||||
_this.cancel(_this.curIndexArr, _this.curValue);
|
||||
});
|
||||
|
||||
_this.ensureBtn.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.remove('mobileSelect-show');
|
||||
var tempValue ='';
|
||||
for(var i=0; i<_this.wheel.length; i++){
|
||||
i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
|
||||
}
|
||||
if(_this.triggerDisplayData){
|
||||
_this.trigger.innerHTML = tempValue;
|
||||
}
|
||||
_this.curIndexArr = _this.getIndexArr();
|
||||
_this.curValue = _this.getCurValue();
|
||||
_this.callback(_this.curIndexArr, _this.curValue);
|
||||
});
|
||||
|
||||
_this.trigger.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.add('mobileSelect-show');
|
||||
});
|
||||
_this.grayLayer.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.remove('mobileSelect-show');
|
||||
_this.cancel(_this.curIndexArr, _this.curValue);
|
||||
});
|
||||
_this.popUp.addEventListener('click',function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
_this.fixRowStyle(); //修正列数
|
||||
},
|
||||
|
||||
setTitle: function(string){
|
||||
var _this = this;
|
||||
_this.titleText = string;
|
||||
_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
|
||||
},
|
||||
|
||||
setStyle: function(config){
|
||||
var _this = this;
|
||||
if(config.ensureBtnColor){
|
||||
_this.ensureBtn.style.color = config.ensureBtnColor;
|
||||
}
|
||||
if(config.cancelBtnColor){
|
||||
_this.cancelBtn.style.color = config.cancelBtnColor;
|
||||
}
|
||||
if(config.titleColor){
|
||||
_this.title = _this.mobileSelect.querySelector('.title');
|
||||
_this.title.style.color = config.titleColor;
|
||||
}
|
||||
if(config.textColor){
|
||||
_this.panel = _this.mobileSelect.querySelector('.panel');
|
||||
_this.panel.style.color = config.textColor;
|
||||
}
|
||||
if(config.titleBgColor){
|
||||
_this.btnBar = _this.mobileSelect.querySelector('.btnBar');
|
||||
_this.btnBar.style.backgroundColor = config.titleBgColor;
|
||||
}
|
||||
if(config.bgColor){
|
||||
_this.panel = _this.mobileSelect.querySelector('.panel');
|
||||
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask');
|
||||
_this.panel.style.backgroundColor = config.bgColor;
|
||||
_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')';
|
||||
}
|
||||
},
|
||||
|
||||
checkIsPC: function(){
|
||||
var _this = this;
|
||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||||
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||||
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||
_this.isPC = false;
|
||||
}
|
||||
},
|
||||
|
||||
show: function(){
|
||||
this.mobileSelect.classList.add('mobileSelect-show');
|
||||
},
|
||||
|
||||
renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
|
||||
var _this = this;
|
||||
var cancelText = cancelBtnText ? cancelBtnText : '取消';
|
||||
var ensureText = ensureBtnText ? ensureBtnText : '确认';
|
||||
_this.mobileSelect = document.createElement("div");
|
||||
_this.mobileSelect.className = "mobileSelect";
|
||||
_this.mobileSelect.innerHTML =
|
||||
'<div class="grayLayer"></div>'+
|
||||
'<div class="content">'+
|
||||
'<div class="btnBar">'+
|
||||
'<div class="fixWidth">'+
|
||||
'<div class="cancel">'+ cancelText +'</div>'+
|
||||
'<div class="title"></div>'+
|
||||
'<div class="ensure">'+ ensureText +'</div>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div class="panel">'+
|
||||
'<div class="fixWidth">'+
|
||||
'<div class="wheels">'+
|
||||
'</div>'+
|
||||
'<div class="selectLine"></div>'+
|
||||
'<div class="shadowMask"></div>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>';
|
||||
document.body.appendChild(_this.mobileSelect);
|
||||
|
||||
//根据数据长度来渲染
|
||||
|
||||
var tempHTML='';
|
||||
for(var i=0; i<wheelsData.length; i++){
|
||||
//列
|
||||
tempHTML += '<div class="wheel"><ul class="selectContainer">';
|
||||
if(_this.jsonType){
|
||||
for(var j=0; j<wheelsData[i].data.length; j++){
|
||||
//行
|
||||
tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
}else{
|
||||
for(var j=0; j<wheelsData[i].data.length; j++){
|
||||
//行
|
||||
tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
|
||||
}
|
||||
}
|
||||
tempHTML += '</ul></div>';
|
||||
}
|
||||
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML;
|
||||
},
|
||||
|
||||
addListenerAll: function(){
|
||||
var _this = this;
|
||||
for(var i=0; i<_this.slider.length; i++){
|
||||
//手势监听
|
||||
(function (i) {
|
||||
_this.addListenerWheel(_this.wheel[i], i);
|
||||
_this.addListenerLi(i);
|
||||
})(i);
|
||||
}
|
||||
},
|
||||
|
||||
addListenerWheel: function(theWheel, index){
|
||||
var _this = this;
|
||||
theWheel.addEventListener('touchstart', function () {
|
||||
_this.touch(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('touchend', function () {
|
||||
_this.touch(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('touchmove', function () {
|
||||
_this.touch(event, this.firstChild, index);
|
||||
},false);
|
||||
|
||||
if(_this.isPC){
|
||||
//如果是PC端则再增加拖拽监听 方便调试
|
||||
theWheel.addEventListener('mousedown', function () {
|
||||
_this.dragClick(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('mousemove', function () {
|
||||
_this.dragClick(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('mouseup', function () {
|
||||
_this.dragClick(event, this.firstChild, index);
|
||||
},true);
|
||||
}
|
||||
},
|
||||
|
||||
addListenerLi:function(sliderIndex){
|
||||
var _this = this;
|
||||
var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li');
|
||||
for(var j=0; j<curWheelLi.length;j++){
|
||||
(function (j) {
|
||||
curWheelLi[j].addEventListener('click',function(){
|
||||
_this.singleClick(this, j, sliderIndex);
|
||||
},false);
|
||||
})(j);
|
||||
}
|
||||
},
|
||||
|
||||
checkDataType: function(){
|
||||
var _this = this;
|
||||
if(typeof(_this.wheelsData[0].data[0])=='object'){
|
||||
_this.jsonType = true;
|
||||
}
|
||||
},
|
||||
|
||||
checkCascade: function(){
|
||||
var _this = this;
|
||||
if(_this.jsonType){
|
||||
var node = _this.wheelsData[0].data;
|
||||
for(var i=0; i<node.length; i++){
|
||||
if(_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0){
|
||||
_this.cascade = true;
|
||||
_this.cascadeJsonData = _this.wheelsData[0].data;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
_this.cascade = false;
|
||||
}
|
||||
},
|
||||
|
||||
generateArrData: function (targetArr) {
|
||||
var tempArr = [];
|
||||
var keyMap_id = this.keyMap.id;
|
||||
var keyMap_value = this.keyMap.value;
|
||||
for(var i=0; i<targetArr.length; i++){
|
||||
var tempObj = {};
|
||||
tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
|
||||
tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
|
||||
tempArr.push(tempObj);
|
||||
}
|
||||
return tempArr;
|
||||
},
|
||||
|
||||
initCascade: function(){
|
||||
var _this = this;
|
||||
_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
|
||||
if(_this.initPosition.length>0){
|
||||
_this.initDeepCount = 0;
|
||||
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);
|
||||
}else{
|
||||
_this.checkArrDeep(_this.cascadeJsonData[0]);
|
||||
}
|
||||
_this.reRenderWheels();
|
||||
},
|
||||
|
||||
initCheckArrDeep: function (parent) {
|
||||
var _this = this;
|
||||
if(parent){
|
||||
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
||||
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
|
||||
_this.initDeepCount++;
|
||||
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
|
||||
if(nextNode){
|
||||
_this.initCheckArrDeep(nextNode);
|
||||
}else{
|
||||
_this.checkArrDeep(parent[_this.keyMap.childs][0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
checkArrDeep: function (parent) {
|
||||
//检测子节点深度 修改 displayJson
|
||||
var _this = this;
|
||||
if(parent){
|
||||
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
||||
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); //生成子节点数组
|
||||
_this.checkArrDeep(parent[_this.keyMap.childs][0]);//检测下一个子节点
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
checkRange: function(index, posIndexArr){
|
||||
var _this = this;
|
||||
var deleteNum = _this.displayJson.length-1-index;
|
||||
for(var i=0; i<deleteNum; i++){
|
||||
_this.displayJson.pop(); //修改 displayJson
|
||||
}
|
||||
var resultNode;
|
||||
for (var i = 0; i <= index; i++){
|
||||
if (i == 0)
|
||||
resultNode = _this.cascadeJsonData[posIndexArr[0]];
|
||||
else {
|
||||
resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
|
||||
}
|
||||
}
|
||||
_this.checkArrDeep(resultNode);
|
||||
//console.log(_this.displayJson);
|
||||
_this.reRenderWheels();
|
||||
_this.fixRowStyle();
|
||||
_this.setCurDistance(_this.resetPosition(index, posIndexArr));
|
||||
},
|
||||
|
||||
resetPosition: function(index, posIndexArr){
|
||||
var _this = this;
|
||||
var tempPosArr = posIndexArr;
|
||||
var tempCount;
|
||||
if(_this.slider.length > posIndexArr.length){
|
||||
tempCount = _this.slider.length - posIndexArr.length;
|
||||
for(var i=0; i<tempCount; i++){
|
||||
tempPosArr.push(0);
|
||||
}
|
||||
}else if(_this.slider.length < posIndexArr.length){
|
||||
tempCount = posIndexArr.length - _this.slider.length;
|
||||
for(var i=0; i<tempCount; i++){
|
||||
tempPosArr.pop();
|
||||
}
|
||||
}
|
||||
for(var i=index+1; i< tempPosArr.length; i++){
|
||||
tempPosArr[i] = 0;
|
||||
}
|
||||
return tempPosArr;
|
||||
},
|
||||
|
||||
reRenderWheels: function(){
|
||||
var _this = this;
|
||||
//删除多余的wheel
|
||||
if(_this.wheel.length > _this.displayJson.length){
|
||||
var count = _this.wheel.length - _this.displayJson.length;
|
||||
for(var i=0; i<count; i++){
|
||||
_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]);
|
||||
}
|
||||
}
|
||||
for(var i=0; i<_this.displayJson.length; i++){
|
||||
//列
|
||||
(function (i) {
|
||||
var tempHTML='';
|
||||
if(_this.wheel[i]){
|
||||
//console.log('插入Li');
|
||||
for(var j=0; j<_this.displayJson[i].length; j++){
|
||||
//行
|
||||
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
_this.slider[i].innerHTML = tempHTML;
|
||||
|
||||
}else{
|
||||
var tempWheel = document.createElement("div");
|
||||
tempWheel.className = "wheel";
|
||||
tempHTML = '<ul class="selectContainer">';
|
||||
for(var j=0; j<_this.displayJson[i].length; j++){
|
||||
//行
|
||||
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
tempHTML += '</ul>';
|
||||
tempWheel.innerHTML = tempHTML;
|
||||
|
||||
_this.addListenerWheel(tempWheel, i);
|
||||
_this.wheels.appendChild(tempWheel);
|
||||
}
|
||||
_this.addListenerLi(i);
|
||||
})(i);
|
||||
}
|
||||
},
|
||||
|
||||
updateWheels:function(data){
|
||||
var _this = this;
|
||||
if(_this.cascade){
|
||||
_this.cascadeJsonData = data;
|
||||
_this.displayJson = [];
|
||||
_this.initCascade();
|
||||
if(_this.initPosition.length < _this.slider.length){
|
||||
var diff = _this.slider.length - _this.initPosition.length;
|
||||
for(var i=0; i<diff; i++){
|
||||
_this.initPosition.push(0);
|
||||
}
|
||||
}
|
||||
_this.setCurDistance(_this.initPosition);
|
||||
_this.fixRowStyle();
|
||||
}
|
||||
},
|
||||
|
||||
updateWheel: function(sliderIndex, data){
|
||||
var _this = this;
|
||||
var tempHTML='';
|
||||
if(_this.cascade){
|
||||
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
|
||||
return false;
|
||||
}
|
||||
else if(_this.jsonType){
|
||||
for(var j=0; j<data.length; j++){
|
||||
tempHTML += '<li data-id="'+data[j][_this.keyMap.id]+'">'+data[j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
_this.wheelsData[sliderIndex] = {data: data};
|
||||
}else{
|
||||
for(var j=0; j<data.length; j++){
|
||||
tempHTML += '<li>'+data[j]+'</li>';
|
||||
}
|
||||
_this.wheelsData[sliderIndex] = data;
|
||||
}
|
||||
_this.slider[sliderIndex].innerHTML = tempHTML;
|
||||
_this.addListenerLi(sliderIndex);
|
||||
},
|
||||
|
||||
fixRowStyle: function(){
|
||||
var _this = this;
|
||||
var width = (100/_this.wheel.length).toFixed(2);
|
||||
for(var i=0; i<_this.wheel.length; i++){
|
||||
_this.wheel[i].style.width = width+'%';
|
||||
}
|
||||
},
|
||||
|
||||
getIndex: function(distance){
|
||||
return Math.round((2*this.liHeight-distance)/this.liHeight);
|
||||
},
|
||||
|
||||
getIndexArr: function(){
|
||||
var _this = this;
|
||||
var temp = [];
|
||||
for(var i=0; i<_this.curDistance.length; i++){
|
||||
temp.push(_this.getIndex(_this.curDistance[i]));
|
||||
}
|
||||
return temp;
|
||||
},
|
||||
|
||||
getCurValue: function(){
|
||||
var _this = this;
|
||||
var temp = [];
|
||||
var positionArr = _this.getIndexArr();
|
||||
if(_this.cascade){
|
||||
for(var i=0; i<_this.wheel.length; i++){
|
||||
temp.push(_this.displayJson[i][positionArr[i]]);
|
||||
}
|
||||
}
|
||||
else if(_this.jsonType){
|
||||
for(var i=0; i<_this.curDistance.length; i++){
|
||||
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
|
||||
}
|
||||
}else{
|
||||
for(var i=0; i<_this.curDistance.length; i++){
|
||||
temp.push(_this.getInnerHtml(i));
|
||||
}
|
||||
}
|
||||
return temp;
|
||||
},
|
||||
|
||||
getValue: function(){
|
||||
return this.curValue;
|
||||
},
|
||||
|
||||
calcDistance: function(index){
|
||||
return 2*this.liHeight-index*this.liHeight;
|
||||
},
|
||||
|
||||
setCurDistance: function(indexArr){
|
||||
var _this = this;
|
||||
var temp = [];
|
||||
for(var i=0; i<_this.slider.length; i++){
|
||||
temp.push(_this.calcDistance(indexArr[i]));
|
||||
_this.movePosition(_this.slider[i],temp[i]);
|
||||
}
|
||||
_this.curDistance = temp;
|
||||
},
|
||||
|
||||
fixPosition: function(distance){
|
||||
return -(this.getIndex(distance)-2)*this.liHeight;
|
||||
},
|
||||
|
||||
movePosition: function(theSlider, distance){
|
||||
theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
|
||||
theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
|
||||
},
|
||||
|
||||
locatePosition: function(index, posIndex){
|
||||
this.curDistance[index] = this.calcDistance(posIndex);
|
||||
this.movePosition(this.slider[index],this.curDistance[index]);
|
||||
if(_this.cascade){
|
||||
_this.checkRange(index, _this.getIndexArr());
|
||||
}
|
||||
},
|
||||
|
||||
updateCurDistance: function(theSlider, index){
|
||||
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
|
||||
},
|
||||
|
||||
getDistance:function(theSlider){
|
||||
return parseInt(theSlider.style.transform.split(',')[1]);
|
||||
},
|
||||
|
||||
getInnerHtml: function(sliderIndex){
|
||||
var _this = this;
|
||||
var index = _this.getIndex(_this.curDistance[sliderIndex]);
|
||||
return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
|
||||
},
|
||||
|
||||
touch: function(event, theSlider, index){
|
||||
var _this = this;
|
||||
event = event || window.event;
|
||||
switch(event.type){
|
||||
case "touchstart":
|
||||
_this.startY = event.touches[0].clientY;
|
||||
_this.oldMoveY = _this.startY;
|
||||
break;
|
||||
|
||||
case "touchend":
|
||||
|
||||
_this.moveEndY = event.changedTouches[0].clientY;
|
||||
_this.offsetSum = _this.moveEndY - _this.startY;
|
||||
|
||||
//修正位置
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
|
||||
|
||||
|
||||
//反弹
|
||||
if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
|
||||
_this.curDistance[index] = 2*_this.liHeight;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
|
||||
}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
|
||||
_this.curDistance[index] = _this.oversizeBorder;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
|
||||
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
||||
|
||||
if(_this.cascade){
|
||||
_this.checkRange(index, _this.getIndexArr());
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case "touchmove":
|
||||
event.preventDefault();
|
||||
_this.moveY = event.touches[0].clientY;
|
||||
_this.offset = _this.moveY - _this.oldMoveY;
|
||||
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oldMoveY = _this.moveY;
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
dragClick: function(event, theSlider, index){
|
||||
var _this = this;
|
||||
event = event || window.event;
|
||||
switch(event.type){
|
||||
case "mousedown":
|
||||
_this.startY = event.clientY;
|
||||
_this.oldMoveY = _this.startY;
|
||||
_this.clickStatus = true;
|
||||
break;
|
||||
|
||||
case "mouseup":
|
||||
|
||||
_this.moveEndY = event.clientY;
|
||||
_this.offsetSum = _this.moveEndY - _this.startY;
|
||||
|
||||
//修正位置
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
|
||||
|
||||
|
||||
//反弹
|
||||
if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
|
||||
_this.curDistance[index] = 2*_this.liHeight;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
|
||||
}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
|
||||
_this.curDistance[index] = _this.oversizeBorder;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
_this.clickStatus = false;
|
||||
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
||||
if(_this.cascade){
|
||||
_this.checkRange(index, _this.getIndexArr());
|
||||
}
|
||||
break;
|
||||
|
||||
case "mousemove":
|
||||
event.preventDefault();
|
||||
if(_this.clickStatus){
|
||||
_this.moveY = event.clientY;
|
||||
_this.offset = _this.moveY - _this.oldMoveY;
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oldMoveY = _this.moveY;
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
singleClick: function(theLi, index, sliderIndex){
|
||||
var _this = this;
|
||||
if(_this.cascade){
|
||||
var tempPosArr = _this.getIndexArr();
|
||||
tempPosArr[sliderIndex] = index;
|
||||
_this.checkRange(sliderIndex, tempPosArr);
|
||||
|
||||
}else{
|
||||
_this.curDistance[sliderIndex] = (2-index)*_this.liHeight;
|
||||
_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if (typeof exports == "object") {
|
||||
module.exports = MobileSelect;
|
||||
} else if (typeof define == "function" && define.amd) {
|
||||
define([], function () {
|
||||
return MobileSelect;
|
||||
})
|
||||
} else {
|
||||
window.MobileSelect = MobileSelect;
|
||||
}
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,117 @@
|
||||
<%--
|
||||
Created by IntelliJ IDEA.
|
||||
User: user
|
||||
Date: 2020/2/18
|
||||
Time: 15:49
|
||||
To change this template use File | Settings | File Templates.
|
||||
--%>
|
||||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<title>来访登记</title>
|
||||
<!-- miniMObile.css、js -->
|
||||
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/miniMobile.css"/>
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/js/zepto.min.js"></script>
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/js/miniMobile.js"></script>
|
||||
<!-- mobileSelect -->
|
||||
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mobileSelect.css">
|
||||
<script src="${pageContext.request.contextPath}/js/mobileSelect.js" type="text/javascript"></script>
|
||||
<!-- noUiSlider -->
|
||||
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/nouislider.css" />
|
||||
<!-- switchery -->
|
||||
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/switchery.css"/>
|
||||
<!-- iconfont -->
|
||||
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/iconfont.css" />
|
||||
<!-- animate.css -->
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
|
||||
</head>
|
||||
|
||||
<body class="pb12 fadeIn animated">
|
||||
<header class="formheader w75 h8 f30 color6 bg-color-info" style="text-align: center;">
|
||||
学生来访登记
|
||||
</header>
|
||||
<style>
|
||||
.formheader {
|
||||
line-height: 0.7rem;
|
||||
}
|
||||
|
||||
.formheader span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.formheader input {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
<div class="p3 f30 f30 w75">
|
||||
<form action="${pageContext.request.contextPath}/visitor/addLogin" method="post" name="myform">
|
||||
<div class="pt2 pb2">
|
||||
姓名：
|
||||
<input type="text" class="w59 form-control" name="name" id="name" placeholder="输入姓名" maxlength="10" />
|
||||
</div>
|
||||
<div>
|
||||
学号：
|
||||
<input type="text" class="w59 form-control" name="sno" id="sno" min="5" max="20" placeholder="输入学号" />
|
||||
</div>
|
||||
<div class="pt2 pb2">
|
||||
手机：
|
||||
<input type="text" class="w59 form-control" name="phone" id="phone" placeholder="输入联系方式" />
|
||||
</div>
|
||||
<div class="pt2 pb2">
|
||||
楼宇：
|
||||
<select class="w59 form-control" id="place" name="place">
|
||||
<option value="西六一楼">西六一楼</option>
|
||||
<option value="西六二楼">西六二楼</option>
|
||||
<option value="西六三楼">西六三楼</option>
|
||||
<option value="西七一楼">西七一楼</option>
|
||||
<option value="西七二楼" selected="selected">西七二楼</option>
|
||||
<option value="西七三楼">西七三楼</option>
|
||||
<option value="西十二一楼">西十二一楼</option>
|
||||
<option value="西十二二楼">西十二二楼</option>
|
||||
<option value="西十二三楼">西十二三楼</option>
|
||||
<option value="西十三一楼">西十三一楼</option>
|
||||
<option value="西十三二楼">西十三二楼</option>
|
||||
<option value="西十三三楼">西十三三楼</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt4 mb4">
|
||||
备注：
|
||||
<input class="w59 h20 form-control" value="公事" id="visit_result" name="visit_result" placeholder="访问原因" />
|
||||
</div>
|
||||
<div class="t-c mt5">
|
||||
<input type="button" onclick="toCheck()" id="sub-btn" class="btn f30 btn-primary radius10 p2 w50" value="提交登记" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
function toCheck() {
|
||||
var name = $("#name").val().trim();
|
||||
var sno = $("#sno").val().trim();
|
||||
var phone = $("#phone").val().trim();
|
||||
var place = $("#place").val().trim();
|
||||
var visit_result = $("#visit_result").val().trim();
|
||||
if (name == null || sno == null || phone == null || place == null || visit_result == null
|
||||
|| name.length == 0 || sno.length == 0 || phone.length == 0 || place.length == 0 || visit_result.length == 0) {
|
||||
layer.msg('不能为空，请输入信息...');
|
||||
return false;
|
||||
}
|
||||
document.myform.submit();
|
||||
}
|
||||
if (${logout_msg != null && !(logout_msg.trim().equals(""))}) {
|
||||
layer.msg(${logout_msg});
|
||||
}
|
||||
if (${error_msg != null && !("".trim().equals(error_msg))}) {
|
||||
layer.msg(${error_msg});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,220 @@
|
||||
<%--
|
||||
Created by IntelliJ IDEA.
|
||||
User: user
|
||||
Date: 2020/2/18
|
||||
Time: 15:56
|
||||
To change this template use File | Settings | File Templates.
|
||||
--%>
|
||||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
<html class="x-admin-sm">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
||||
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<script>
|
||||
function changePageSize() {
|
||||
//获取下拉框的值
|
||||
var pageSize = $("#changePageSize").val();
|
||||
//向服务器发送请求，改变每页显示条数
|
||||
location.href = "${pageContext.request.contextPath}/visitor/findAll?page=1&size="+ pageSize;
|
||||
}
|
||||
$("#serarch_btn").click(function () {
|
||||
var keyword = $("#keyword").val();
|
||||
location.href="${pageContext.request.contextPath}/visitor/findAll?page=1&size=4&keyword="+keyword;
|
||||
});
|
||||
$("#refresh").click(function () {
|
||||
$("#myform").reset();
|
||||
location.href="${pageContext.request.contextPath}/visitor/findAll?page=1&size=4";
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<%--<div class="x-nav">
|
||||
<span class="layui-breadcrumb">
|
||||
<a href="">首页</a>
|
||||
<a href="">演示</a>
|
||||
<a>
|
||||
<cite>导航元素</cite></a>
|
||||
</span>
|
||||
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
|
||||
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
|
||||
</div>--%>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body ">
|
||||
<form id="myform" class="layui-form layui-col-space5">
|
||||
<div class="layui-inline layui-show-xs-block">
|
||||
<input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}">
|
||||
</div>
|
||||
<div class="layui-inline layui-show-xs-block">
|
||||
<button class="layui-btn" id="serarch_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
|
||||
</div>
|
||||
<div class="layui-inline layui-show-xs-block x-right">
|
||||
<a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/visitor/findAll?page=1&size=4"><i class="layui-icon"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<xblock>
|
||||
<a onclick="exportInfo(${sessionScope.adminInfo.power})" class="layui-btn layui-btn-warm" href="javascript:;"><i class="layui-icon"></i>导出</a>
|
||||
<span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span>
|
||||
</xblock>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table layui-form">
|
||||
<thead>
|
||||
<tr style="text-align: center">
|
||||
<th style="text-align: center">ID</th>
|
||||
<th style="text-align: center">姓名</th>
|
||||
<th style="text-align: center">学号</th>
|
||||
<th style="text-align: center">联系方式</th>
|
||||
<th style="text-align: center">访问地址</th>
|
||||
<th style="text-align: center">来访时间</th>
|
||||
<th style="text-align: center">离开时间</th>
|
||||
<th style="text-align: center">到访原因</th>
|
||||
<c:if test="${sessionScope.adminInfo.power > 2}">
|
||||
<th style="text-align: center">操作</th>
|
||||
</c:if>
|
||||
</thead>
|
||||
<tbody>
|
||||
<%
|
||||
int j = 1;
|
||||
%>
|
||||
<c:forEach items="${pageInfo.list}" var="visitor">
|
||||
<tr id="light" style="text-align: center">
|
||||
<td><%=j++%></td>
|
||||
<td>${visitor.name}</td>
|
||||
<td>${visitor.sno}</td>
|
||||
<td>${visitor.phone}</td>
|
||||
<td>${visitor.place}</td>
|
||||
<td>${visitor.begin_date}</td>
|
||||
<c:if test="${visitor.end_date == null || visitor.end_date == ''}">
|
||||
<td>尚未离开</td>
|
||||
</c:if>
|
||||
<c:if test="${visitor.end_date != ''}">
|
||||
<td>${visitor.end_date}</td>
|
||||
</c:if>
|
||||
<td>${visitor.visit_result}</td>
|
||||
<c:if test="${sessionScope.adminInfo.power > 2}">
|
||||
<td class="td-manage">
|
||||
<a title="注销访客" onclick="update(${visitor.id})" href="javascript:;">
|
||||
<i class="layui-icon"></i>
|
||||
</a>
|
||||
</td>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pull-left">
|
||||
<div class="form-group form-inline">
|
||||
共 ${pageInfo.pages} 页 当前页：${pageInfo.pageNum} / ${pageInfo.pages}  每页
|
||||
<select class="form-control" id="changePageSize" onchange="changePageSize()">
|
||||
<option value="1">${pageInfo.size}</option>
|
||||
<option value="2">2</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="20">20</option>
|
||||
</select> 条
|
||||
</div>
|
||||
</div>
|
||||
<c:choose>
|
||||
<c:when test="${pageInfo.pages < 5}">
|
||||
<c:set var="begin" value="1">
|
||||
</c:set>
|
||||
<c:set var="end" value="${pageInfo.pages}">
|
||||
</c:set>
|
||||
</c:when>
|
||||
<c:when test="${pageInfo.pageNum <= 3}">
|
||||
<c:set var="begin" value="1">
|
||||
</c:set>
|
||||
<c:set var="end" value="5">
|
||||
</c:set>
|
||||
</c:when>
|
||||
<c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
|
||||
<c:set var="begin" value="${pageInfo.pageNum - 2}">
|
||||
</c:set>
|
||||
<c:set var="end" value="${pageInfo.pageNum + 2}">
|
||||
</c:set>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<c:set var="begin" value="${pageInfo.pages - 4}">
|
||||
</c:set>
|
||||
<c:set var="end" value="${pageInfo.pages}">
|
||||
</c:set>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
<div class="layui-card-body x-right" style="height: min-content">
|
||||
<div class="page">
|
||||
<div>
|
||||
<a class="next" href="${pageContext.request.contextPath}/visitor/findAll?page=1&size=${pageInfo.pageSize}&keyword=${param.keyword}">首页</a>
|
||||
<c:if test="${pageInfo.pageNum > 1}">
|
||||
<a class="prev" href="${pageContext.request.contextPath}/visitor/findAll?page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">上一页</a>
|
||||
</c:if>
|
||||
<c:forEach var="i" begin="${begin}" end="${end}" step="1">
|
||||
<c:if test="${pageInfo.pageNum == i}">
|
||||
<span class="current">${i}</span>
|
||||
</c:if>
|
||||
<c:if test="${pageInfo.pageNum != i}">
|
||||
<a class="num" href="${pageContext.request.contextPath}/visitor/findAll?page=${i}&size=${pageInfo.pageSize}&keyword=${param.keyword}">${i}</a>
|
||||
</c:if>
|
||||
</c:forEach>
|
||||
<c:if test="${pageInfo.pageNum < pageInfo.pages}">
|
||||
<a class="next" href="${pageContext.request.contextPath}/visitor/findAll?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
|
||||
</c:if>
|
||||
<a class="next" href="${pageContext.request.contextPath}/visitor/findAll?page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function update(id) {
|
||||
layer.confirm('确定要注销此访客记录吗',function (index) {
|
||||
layer.close(index);
|
||||
$.get("${pageContext.request.contextPath}/visitor/updateStatus",{"id":id},function (data) {
|
||||
if (data) {
|
||||
layer.msg('注销成功');
|
||||
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/visitor/findAll?page=1&size=4';},2000);
|
||||
}else {
|
||||
layer.msg('系统繁忙，请联系系统管理员');
|
||||
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/visitor/findAll?page=1&size=4';},2000);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
//导出Excel操作
|
||||
function exportInfo(power) {
|
||||
if (power < 3) {
|
||||
layer.msg('对不起，您没有权限导出访客记录');
|
||||
return false;
|
||||
}
|
||||
layer.confirm('确定导出所有访客数据吗？',function (index) {
|
||||
location.href="${pageContext.request.contextPath}/visitor/visitorInfo";
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<%--
|
||||
Created by IntelliJ IDEA.
|
||||
User: user
|
||||
Date: 2020/2/18
|
||||
Time: 20:07
|
||||
To change this template use File | Settings | File Templates.
|
||||
--%>
|
||||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||||
<html>
|
||||
<head>
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>恭喜您，来访登记成功！</h3>
|
||||
<br>
|
||||
<a href="${pageContext.request.contextPath}/visitor/login_out?id=${id}">注销登记</a>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,150 @@
|
||||
.mobileSelect {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: opacity 0.4s, z-index 0.4s;
|
||||
transition: opacity 0.4s, z-index 0.4s;
|
||||
}
|
||||
.mobileSelect * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mobileSelect .grayLayer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 888;
|
||||
display: block;
|
||||
}
|
||||
.mobileSelect .content {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 889;
|
||||
color: black;
|
||||
-webkit-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
bottom: -350px;
|
||||
left: 0;
|
||||
background: white;
|
||||
}
|
||||
.mobileSelect .content .fixWidth {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
.mobileSelect .content .fixWidth:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.mobileSelect .content .btnBar {
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
font-size: 15px;
|
||||
height: 45px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
}
|
||||
.mobileSelect .content .btnBar .cancel,
|
||||
.mobileSelect .content .btnBar .ensure {
|
||||
height: 45px;
|
||||
width: 55px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.mobileSelect .content .btnBar .cancel {
|
||||
left: 0;
|
||||
color: #666;
|
||||
}
|
||||
.mobileSelect .content .btnBar .ensure {
|
||||
right: 0;
|
||||
color: #1e83d3;
|
||||
}
|
||||
.mobileSelect .content .btnBar .title {
|
||||
font-size: 15px;
|
||||
padding: 0 15%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mobileSelect .content .panel:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.mobileSelect .content .panel .wheels {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobileSelect .content .panel .wheel {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
-webkit-transition: width 0.3s ease;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.mobileSelect .content .panel .wheel .selectContainer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
-webkit-transition: -webkit-transform 0.18s ease-out;
|
||||
transition: -webkit-transform 0.18s ease-out;
|
||||
transition: transform 0.18s ease-out;
|
||||
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
|
||||
}
|
||||
.mobileSelect .content .panel .wheel .selectContainer li {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mobileSelect .content .panel .selectLine {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
pointer-events: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #DCDCDC;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
}
|
||||
.mobileSelect .content .panel .shadowMask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
|
||||
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
|
||||
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mobileSelect-show {
|
||||
opacity: 1;
|
||||
z-index: 10000;
|
||||
visibility: visible;
|
||||
}
|
||||
.mobileSelect-show .content {
|
||||
bottom: 0;
|
||||
}
|
||||
@ -0,0 +1,260 @@
|
||||
/*! nouislider - 10.0.0 - 2017-05-28 14:52:48 */
|
||||
/* Functional styling;
|
||||
* These styles are required for noUiSlider to function.
|
||||
* You don't need to change these rules to apply your design.
|
||||
*/
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
}
|
||||
.noUi-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* Fix 401 */
|
||||
}
|
||||
.noUi-connect {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.noUi-origin {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.noUi-state-tap .noUi-connect,
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
|
||||
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
/* Painting and performance;
|
||||
* Browsers can paint handles in their own layer.
|
||||
*/
|
||||
.noUi-base,
|
||||
.noUi-handle {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
/* Slider size and handle placement;
|
||||
*/
|
||||
.noUi-horizontal {
|
||||
height: 18px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
left: -17px;
|
||||
top: -6px;
|
||||
}
|
||||
.noUi-vertical {
|
||||
width: 18px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
left: -6px;
|
||||
top: -17px;
|
||||
}
|
||||
/* Styling;
|
||||
*/
|
||||
.noUi-target {
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #D3D3D3;
|
||||
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
|
||||
}
|
||||
.noUi-connect {
|
||||
background: #3FB8AF;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
|
||||
-webkit-transition: background 450ms;
|
||||
transition: background 450ms;
|
||||
}
|
||||
/* Handles and cursors;
|
||||
*/
|
||||
.noUi-draggable {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.noUi-vertical .noUi-draggable {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.noUi-handle {
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #FFF;
|
||||
cursor: default;
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
|
||||
}
|
||||
.noUi-active {
|
||||
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
|
||||
}
|
||||
/* Handle stripes;
|
||||
*/
|
||||
.noUi-handle:before,
|
||||
.noUi-handle:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background: #E8E7E6;
|
||||
left: 14px;
|
||||
top: 6px;
|
||||
}
|
||||
.noUi-handle:after {
|
||||
left: 17px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:before,
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
top: 17px;
|
||||
}
|
||||
/* Disabled state;
|
||||
*/
|
||||
[disabled] .noUi-connect {
|
||||
background: #B8B8B8;
|
||||
}
|
||||
[disabled].noUi-target,
|
||||
[disabled].noUi-handle,
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* Base;
|
||||
*
|
||||
*/
|
||||
.noUi-pips,
|
||||
.noUi-pips * {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
}
|
||||
/* Values;
|
||||
*
|
||||
*/
|
||||
.noUi-value {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.noUi-value-sub {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
/* Markings;
|
||||
*
|
||||
*/
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background: #CCC;
|
||||
}
|
||||
.noUi-marker-sub {
|
||||
background: #AAA;
|
||||
}
|
||||
.noUi-marker-large {
|
||||
background: #AAA;
|
||||
}
|
||||
/* Horizontal layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-horizontal {
|
||||
padding: 10px 0;
|
||||
height: 80px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.noUi-value-horizontal {
|
||||
-webkit-transform: translate3d(-50%, 50%, 0);
|
||||
transform: translate3d(-50%, 50%, 0);
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-sub {
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 15px;
|
||||
}
|
||||
/* Vertical layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-vertical {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.noUi-value-vertical {
|
||||
-webkit-transform: translate3d(0, 50%, 0);
|
||||
transform: translate3d(0, 50%, 0);
|
||||
padding-left: 25px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-sub {
|
||||
width: 10px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-large {
|
||||
width: 15px;
|
||||
}
|
||||
.noUi-tooltip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.noUi-horizontal .noUi-tooltip {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
bottom: 120%;
|
||||
}
|
||||
.noUi-vertical .noUi-tooltip {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
top: 50%;
|
||||
right: 120%;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
/*
|
||||
*
|
||||
* Main stylesheet for Switchery.
|
||||
* http://abpetkov.github.io/switchery/
|
||||
*
|
||||
*/
|
||||
|
||||
/* Switchery defaults. */
|
||||
|
||||
.switchery {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: content-box;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.switchery > small {
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/* Switchery sizes. */
|
||||
|
||||
.switchery-small {
|
||||
border-radius: 20px;
|
||||
height: 20px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
.switchery-small > small {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.switchery-large {
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.switchery-large > small {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,690 @@
|
||||
/*!
|
||||
* mobileSelect.js
|
||||
* (c) 2017-present onlyhom
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
function getClass(dom,string) {
|
||||
return dom.getElementsByClassName(string);
|
||||
}
|
||||
//构造器
|
||||
function MobileSelect(config) {
|
||||
this.mobileSelect;
|
||||
this.wheelsData = config.wheels;
|
||||
this.jsonType = false;
|
||||
this.cascadeJsonData = [];
|
||||
this.displayJson = [];
|
||||
this.curValue = null;
|
||||
this.curIndexArr = [];
|
||||
this.cascade = false;
|
||||
this.startY;
|
||||
this.moveEndY;
|
||||
this.moveY;
|
||||
this.oldMoveY;
|
||||
this.offset = 0;
|
||||
this.offsetSum = 0;
|
||||
this.oversizeBorder;
|
||||
this.curDistance = [];
|
||||
this.clickStatus = false;
|
||||
this.isPC = true;
|
||||
this.init(config);
|
||||
}
|
||||
MobileSelect.prototype = {
|
||||
constructor: MobileSelect,
|
||||
init: function(config){
|
||||
var _this = this;
|
||||
_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
|
||||
_this.checkDataType();
|
||||
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
|
||||
_this.trigger = document.querySelector(config.trigger);
|
||||
if(!_this.trigger){
|
||||
console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
|
||||
return false;
|
||||
}
|
||||
_this.wheel = getClass(_this.mobileSelect,'wheel');
|
||||
_this.slider = getClass(_this.mobileSelect,'selectContainer');
|
||||
_this.wheels = _this.mobileSelect.querySelector('.wheels');
|
||||
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
|
||||
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
|
||||
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel');
|
||||
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');
|
||||
_this.popUp = _this.mobileSelect.querySelector('.content');
|
||||
_this.callback = config.callback ? config.callback : function(){};
|
||||
_this.cancel = config.cancel ? config.cancel : function(){};
|
||||
_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){};
|
||||
_this.initPosition = config.position ? config.position : [];
|
||||
_this.titleText = config.title ? config.title : '';
|
||||
_this.connector = config.connector ? config.connector : ' ';
|
||||
_this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true;
|
||||
_this.trigger.style.cursor='pointer';
|
||||
_this.setStyle(config);
|
||||
_this.setTitle(_this.titleText);
|
||||
_this.checkIsPC();
|
||||
_this.checkCascade();
|
||||
if (_this.cascade) {
|
||||
_this.initCascade();
|
||||
}
|
||||
//定位 初始位置
|
||||
if(_this.initPosition.length < _this.slider.length){
|
||||
var diff = _this.slider.length - _this.initPosition.length;
|
||||
for(var i=0; i<diff; i++){
|
||||
_this.initPosition.push(0);
|
||||
}
|
||||
}
|
||||
|
||||
_this.setCurDistance(_this.initPosition);
|
||||
_this.addListenerAll();
|
||||
|
||||
//按钮监听
|
||||
_this.cancelBtn.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.remove('mobileSelect-show');
|
||||
_this.cancel(_this.curIndexArr, _this.curValue);
|
||||
});
|
||||
|
||||
_this.ensureBtn.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.remove('mobileSelect-show');
|
||||
var tempValue ='';
|
||||
for(var i=0; i<_this.wheel.length; i++){
|
||||
i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
|
||||
}
|
||||
if(_this.triggerDisplayData){
|
||||
_this.trigger.innerHTML = tempValue;
|
||||
}
|
||||
_this.curIndexArr = _this.getIndexArr();
|
||||
_this.curValue = _this.getCurValue();
|
||||
_this.callback(_this.curIndexArr, _this.curValue);
|
||||
});
|
||||
|
||||
_this.trigger.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.add('mobileSelect-show');
|
||||
});
|
||||
_this.grayLayer.addEventListener('click',function(){
|
||||
_this.mobileSelect.classList.remove('mobileSelect-show');
|
||||
_this.cancel(_this.curIndexArr, _this.curValue);
|
||||
});
|
||||
_this.popUp.addEventListener('click',function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
_this.fixRowStyle(); //修正列数
|
||||
},
|
||||
|
||||
setTitle: function(string){
|
||||
var _this = this;
|
||||
_this.titleText = string;
|
||||
_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
|
||||
},
|
||||
|
||||
setStyle: function(config){
|
||||
var _this = this;
|
||||
if(config.ensureBtnColor){
|
||||
_this.ensureBtn.style.color = config.ensureBtnColor;
|
||||
}
|
||||
if(config.cancelBtnColor){
|
||||
_this.cancelBtn.style.color = config.cancelBtnColor;
|
||||
}
|
||||
if(config.titleColor){
|
||||
_this.title = _this.mobileSelect.querySelector('.title');
|
||||
_this.title.style.color = config.titleColor;
|
||||
}
|
||||
if(config.textColor){
|
||||
_this.panel = _this.mobileSelect.querySelector('.panel');
|
||||
_this.panel.style.color = config.textColor;
|
||||
}
|
||||
if(config.titleBgColor){
|
||||
_this.btnBar = _this.mobileSelect.querySelector('.btnBar');
|
||||
_this.btnBar.style.backgroundColor = config.titleBgColor;
|
||||
}
|
||||
if(config.bgColor){
|
||||
_this.panel = _this.mobileSelect.querySelector('.panel');
|
||||
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask');
|
||||
_this.panel.style.backgroundColor = config.bgColor;
|
||||
_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')';
|
||||
}
|
||||
},
|
||||
|
||||
checkIsPC: function(){
|
||||
var _this = this;
|
||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||||
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||||
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||
_this.isPC = false;
|
||||
}
|
||||
},
|
||||
|
||||
show: function(){
|
||||
this.mobileSelect.classList.add('mobileSelect-show');
|
||||
},
|
||||
|
||||
renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
|
||||
var _this = this;
|
||||
var cancelText = cancelBtnText ? cancelBtnText : '取消';
|
||||
var ensureText = ensureBtnText ? ensureBtnText : '确认';
|
||||
_this.mobileSelect = document.createElement("div");
|
||||
_this.mobileSelect.className = "mobileSelect";
|
||||
_this.mobileSelect.innerHTML =
|
||||
'<div class="grayLayer"></div>'+
|
||||
'<div class="content">'+
|
||||
'<div class="btnBar">'+
|
||||
'<div class="fixWidth">'+
|
||||
'<div class="cancel">'+ cancelText +'</div>'+
|
||||
'<div class="title"></div>'+
|
||||
'<div class="ensure">'+ ensureText +'</div>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div class="panel">'+
|
||||
'<div class="fixWidth">'+
|
||||
'<div class="wheels">'+
|
||||
'</div>'+
|
||||
'<div class="selectLine"></div>'+
|
||||
'<div class="shadowMask"></div>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>';
|
||||
document.body.appendChild(_this.mobileSelect);
|
||||
|
||||
//根据数据长度来渲染
|
||||
|
||||
var tempHTML='';
|
||||
for(var i=0; i<wheelsData.length; i++){
|
||||
//列
|
||||
tempHTML += '<div class="wheel"><ul class="selectContainer">';
|
||||
if(_this.jsonType){
|
||||
for(var j=0; j<wheelsData[i].data.length; j++){
|
||||
//行
|
||||
tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
}else{
|
||||
for(var j=0; j<wheelsData[i].data.length; j++){
|
||||
//行
|
||||
tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
|
||||
}
|
||||
}
|
||||
tempHTML += '</ul></div>';
|
||||
}
|
||||
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML;
|
||||
},
|
||||
|
||||
addListenerAll: function(){
|
||||
var _this = this;
|
||||
for(var i=0; i<_this.slider.length; i++){
|
||||
//手势监听
|
||||
(function (i) {
|
||||
_this.addListenerWheel(_this.wheel[i], i);
|
||||
_this.addListenerLi(i);
|
||||
})(i);
|
||||
}
|
||||
},
|
||||
|
||||
addListenerWheel: function(theWheel, index){
|
||||
var _this = this;
|
||||
theWheel.addEventListener('touchstart', function () {
|
||||
_this.touch(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('touchend', function () {
|
||||
_this.touch(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('touchmove', function () {
|
||||
_this.touch(event, this.firstChild, index);
|
||||
},false);
|
||||
|
||||
if(_this.isPC){
|
||||
//如果是PC端则再增加拖拽监听 方便调试
|
||||
theWheel.addEventListener('mousedown', function () {
|
||||
_this.dragClick(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('mousemove', function () {
|
||||
_this.dragClick(event, this.firstChild, index);
|
||||
},false);
|
||||
theWheel.addEventListener('mouseup', function () {
|
||||
_this.dragClick(event, this.firstChild, index);
|
||||
},true);
|
||||
}
|
||||
},
|
||||
|
||||
addListenerLi:function(sliderIndex){
|
||||
var _this = this;
|
||||
var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li');
|
||||
for(var j=0; j<curWheelLi.length;j++){
|
||||
(function (j) {
|
||||
curWheelLi[j].addEventListener('click',function(){
|
||||
_this.singleClick(this, j, sliderIndex);
|
||||
},false);
|
||||
})(j);
|
||||
}
|
||||
},
|
||||
|
||||
checkDataType: function(){
|
||||
var _this = this;
|
||||
if(typeof(_this.wheelsData[0].data[0])=='object'){
|
||||
_this.jsonType = true;
|
||||
}
|
||||
},
|
||||
|
||||
checkCascade: function(){
|
||||
var _this = this;
|
||||
if(_this.jsonType){
|
||||
var node = _this.wheelsData[0].data;
|
||||
for(var i=0; i<node.length; i++){
|
||||
if(_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0){
|
||||
_this.cascade = true;
|
||||
_this.cascadeJsonData = _this.wheelsData[0].data;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
_this.cascade = false;
|
||||
}
|
||||
},
|
||||
|
||||
generateArrData: function (targetArr) {
|
||||
var tempArr = [];
|
||||
var keyMap_id = this.keyMap.id;
|
||||
var keyMap_value = this.keyMap.value;
|
||||
for(var i=0; i<targetArr.length; i++){
|
||||
var tempObj = {};
|
||||
tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
|
||||
tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
|
||||
tempArr.push(tempObj);
|
||||
}
|
||||
return tempArr;
|
||||
},
|
||||
|
||||
initCascade: function(){
|
||||
var _this = this;
|
||||
_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
|
||||
if(_this.initPosition.length>0){
|
||||
_this.initDeepCount = 0;
|
||||
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);
|
||||
}else{
|
||||
_this.checkArrDeep(_this.cascadeJsonData[0]);
|
||||
}
|
||||
_this.reRenderWheels();
|
||||
},
|
||||
|
||||
initCheckArrDeep: function (parent) {
|
||||
var _this = this;
|
||||
if(parent){
|
||||
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
||||
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
|
||||
_this.initDeepCount++;
|
||||
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
|
||||
if(nextNode){
|
||||
_this.initCheckArrDeep(nextNode);
|
||||
}else{
|
||||
_this.checkArrDeep(parent[_this.keyMap.childs][0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
checkArrDeep: function (parent) {
|
||||
//检测子节点深度 修改 displayJson
|
||||
var _this = this;
|
||||
if(parent){
|
||||
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
|
||||
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); //生成子节点数组
|
||||
_this.checkArrDeep(parent[_this.keyMap.childs][0]);//检测下一个子节点
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
checkRange: function(index, posIndexArr){
|
||||
var _this = this;
|
||||
var deleteNum = _this.displayJson.length-1-index;
|
||||
for(var i=0; i<deleteNum; i++){
|
||||
_this.displayJson.pop(); //修改 displayJson
|
||||
}
|
||||
var resultNode;
|
||||
for (var i = 0; i <= index; i++){
|
||||
if (i == 0)
|
||||
resultNode = _this.cascadeJsonData[posIndexArr[0]];
|
||||
else {
|
||||
resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
|
||||
}
|
||||
}
|
||||
_this.checkArrDeep(resultNode);
|
||||
//console.log(_this.displayJson);
|
||||
_this.reRenderWheels();
|
||||
_this.fixRowStyle();
|
||||
_this.setCurDistance(_this.resetPosition(index, posIndexArr));
|
||||
},
|
||||
|
||||
resetPosition: function(index, posIndexArr){
|
||||
var _this = this;
|
||||
var tempPosArr = posIndexArr;
|
||||
var tempCount;
|
||||
if(_this.slider.length > posIndexArr.length){
|
||||
tempCount = _this.slider.length - posIndexArr.length;
|
||||
for(var i=0; i<tempCount; i++){
|
||||
tempPosArr.push(0);
|
||||
}
|
||||
}else if(_this.slider.length < posIndexArr.length){
|
||||
tempCount = posIndexArr.length - _this.slider.length;
|
||||
for(var i=0; i<tempCount; i++){
|
||||
tempPosArr.pop();
|
||||
}
|
||||
}
|
||||
for(var i=index+1; i< tempPosArr.length; i++){
|
||||
tempPosArr[i] = 0;
|
||||
}
|
||||
return tempPosArr;
|
||||
},
|
||||
|
||||
reRenderWheels: function(){
|
||||
var _this = this;
|
||||
//删除多余的wheel
|
||||
if(_this.wheel.length > _this.displayJson.length){
|
||||
var count = _this.wheel.length - _this.displayJson.length;
|
||||
for(var i=0; i<count; i++){
|
||||
_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]);
|
||||
}
|
||||
}
|
||||
for(var i=0; i<_this.displayJson.length; i++){
|
||||
//列
|
||||
(function (i) {
|
||||
var tempHTML='';
|
||||
if(_this.wheel[i]){
|
||||
//console.log('插入Li');
|
||||
for(var j=0; j<_this.displayJson[i].length; j++){
|
||||
//行
|
||||
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
_this.slider[i].innerHTML = tempHTML;
|
||||
|
||||
}else{
|
||||
var tempWheel = document.createElement("div");
|
||||
tempWheel.className = "wheel";
|
||||
tempHTML = '<ul class="selectContainer">';
|
||||
for(var j=0; j<_this.displayJson[i].length; j++){
|
||||
//行
|
||||
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
tempHTML += '</ul>';
|
||||
tempWheel.innerHTML = tempHTML;
|
||||
|
||||
_this.addListenerWheel(tempWheel, i);
|
||||
_this.wheels.appendChild(tempWheel);
|
||||
}
|
||||
_this.addListenerLi(i);
|
||||
})(i);
|
||||
}
|
||||
},
|
||||
|
||||
updateWheels:function(data){
|
||||
var _this = this;
|
||||
if(_this.cascade){
|
||||
_this.cascadeJsonData = data;
|
||||
_this.displayJson = [];
|
||||
_this.initCascade();
|
||||
if(_this.initPosition.length < _this.slider.length){
|
||||
var diff = _this.slider.length - _this.initPosition.length;
|
||||
for(var i=0; i<diff; i++){
|
||||
_this.initPosition.push(0);
|
||||
}
|
||||
}
|
||||
_this.setCurDistance(_this.initPosition);
|
||||
_this.fixRowStyle();
|
||||
}
|
||||
},
|
||||
|
||||
updateWheel: function(sliderIndex, data){
|
||||
var _this = this;
|
||||
var tempHTML='';
|
||||
if(_this.cascade){
|
||||
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
|
||||
return false;
|
||||
}
|
||||
else if(_this.jsonType){
|
||||
for(var j=0; j<data.length; j++){
|
||||
tempHTML += '<li data-id="'+data[j][_this.keyMap.id]+'">'+data[j][_this.keyMap.value]+'</li>';
|
||||
}
|
||||
_this.wheelsData[sliderIndex] = {data: data};
|
||||
}else{
|
||||
for(var j=0; j<data.length; j++){
|
||||
tempHTML += '<li>'+data[j]+'</li>';
|
||||
}
|
||||
_this.wheelsData[sliderIndex] = data;
|
||||
}
|
||||
_this.slider[sliderIndex].innerHTML = tempHTML;
|
||||
_this.addListenerLi(sliderIndex);
|
||||
},
|
||||
|
||||
fixRowStyle: function(){
|
||||
var _this = this;
|
||||
var width = (100/_this.wheel.length).toFixed(2);
|
||||
for(var i=0; i<_this.wheel.length; i++){
|
||||
_this.wheel[i].style.width = width+'%';
|
||||
}
|
||||
},
|
||||
|
||||
getIndex: function(distance){
|
||||
return Math.round((2*this.liHeight-distance)/this.liHeight);
|
||||
},
|
||||
|
||||
getIndexArr: function(){
|
||||
var _this = this;
|
||||
var temp = [];
|
||||
for(var i=0; i<_this.curDistance.length; i++){
|
||||
temp.push(_this.getIndex(_this.curDistance[i]));
|
||||
}
|
||||
return temp;
|
||||
},
|
||||
|
||||
getCurValue: function(){
|
||||
var _this = this;
|
||||
var temp = [];
|
||||
var positionArr = _this.getIndexArr();
|
||||
if(_this.cascade){
|
||||
for(var i=0; i<_this.wheel.length; i++){
|
||||
temp.push(_this.displayJson[i][positionArr[i]]);
|
||||
}
|
||||
}
|
||||
else if(_this.jsonType){
|
||||
for(var i=0; i<_this.curDistance.length; i++){
|
||||
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
|
||||
}
|
||||
}else{
|
||||
for(var i=0; i<_this.curDistance.length; i++){
|
||||
temp.push(_this.getInnerHtml(i));
|
||||
}
|
||||
}
|
||||
return temp;
|
||||
},
|
||||
|
||||
getValue: function(){
|
||||
return this.curValue;
|
||||
},
|
||||
|
||||
calcDistance: function(index){
|
||||
return 2*this.liHeight-index*this.liHeight;
|
||||
},
|
||||
|
||||
setCurDistance: function(indexArr){
|
||||
var _this = this;
|
||||
var temp = [];
|
||||
for(var i=0; i<_this.slider.length; i++){
|
||||
temp.push(_this.calcDistance(indexArr[i]));
|
||||
_this.movePosition(_this.slider[i],temp[i]);
|
||||
}
|
||||
_this.curDistance = temp;
|
||||
},
|
||||
|
||||
fixPosition: function(distance){
|
||||
return -(this.getIndex(distance)-2)*this.liHeight;
|
||||
},
|
||||
|
||||
movePosition: function(theSlider, distance){
|
||||
theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
|
||||
theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
|
||||
},
|
||||
|
||||
locatePosition: function(index, posIndex){
|
||||
this.curDistance[index] = this.calcDistance(posIndex);
|
||||
this.movePosition(this.slider[index],this.curDistance[index]);
|
||||
if(_this.cascade){
|
||||
_this.checkRange(index, _this.getIndexArr());
|
||||
}
|
||||
},
|
||||
|
||||
updateCurDistance: function(theSlider, index){
|
||||
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
|
||||
},
|
||||
|
||||
getDistance:function(theSlider){
|
||||
return parseInt(theSlider.style.transform.split(',')[1]);
|
||||
},
|
||||
|
||||
getInnerHtml: function(sliderIndex){
|
||||
var _this = this;
|
||||
var index = _this.getIndex(_this.curDistance[sliderIndex]);
|
||||
return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
|
||||
},
|
||||
|
||||
touch: function(event, theSlider, index){
|
||||
var _this = this;
|
||||
event = event || window.event;
|
||||
switch(event.type){
|
||||
case "touchstart":
|
||||
_this.startY = event.touches[0].clientY;
|
||||
_this.oldMoveY = _this.startY;
|
||||
break;
|
||||
|
||||
case "touchend":
|
||||
|
||||
_this.moveEndY = event.changedTouches[0].clientY;
|
||||
_this.offsetSum = _this.moveEndY - _this.startY;
|
||||
|
||||
//修正位置
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
|
||||
|
||||
|
||||
//反弹
|
||||
if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
|
||||
_this.curDistance[index] = 2*_this.liHeight;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
|
||||
}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
|
||||
_this.curDistance[index] = _this.oversizeBorder;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
|
||||
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
||||
|
||||
if(_this.cascade){
|
||||
_this.checkRange(index, _this.getIndexArr());
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case "touchmove":
|
||||
event.preventDefault();
|
||||
_this.moveY = event.touches[0].clientY;
|
||||
_this.offset = _this.moveY - _this.oldMoveY;
|
||||
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oldMoveY = _this.moveY;
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
dragClick: function(event, theSlider, index){
|
||||
var _this = this;
|
||||
event = event || window.event;
|
||||
switch(event.type){
|
||||
case "mousedown":
|
||||
_this.startY = event.clientY;
|
||||
_this.oldMoveY = _this.startY;
|
||||
_this.clickStatus = true;
|
||||
break;
|
||||
|
||||
case "mouseup":
|
||||
|
||||
_this.moveEndY = event.clientY;
|
||||
_this.offsetSum = _this.moveEndY - _this.startY;
|
||||
|
||||
//修正位置
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
|
||||
|
||||
|
||||
//反弹
|
||||
if(_this.curDistance[index] + _this.offsetSum > 2*_this.liHeight){
|
||||
_this.curDistance[index] = 2*_this.liHeight;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
|
||||
}else if(_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder){
|
||||
_this.curDistance[index] = _this.oversizeBorder;
|
||||
setTimeout(function(){
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
_this.clickStatus = false;
|
||||
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
|
||||
if(_this.cascade){
|
||||
_this.checkRange(index, _this.getIndexArr());
|
||||
}
|
||||
break;
|
||||
|
||||
case "mousemove":
|
||||
event.preventDefault();
|
||||
if(_this.clickStatus){
|
||||
_this.moveY = event.clientY;
|
||||
_this.offset = _this.moveY - _this.oldMoveY;
|
||||
_this.updateCurDistance(theSlider, index);
|
||||
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
|
||||
_this.movePosition(theSlider, _this.curDistance[index]);
|
||||
_this.oldMoveY = _this.moveY;
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
singleClick: function(theLi, index, sliderIndex){
|
||||
var _this = this;
|
||||
if(_this.cascade){
|
||||
var tempPosArr = _this.getIndexArr();
|
||||
tempPosArr[sliderIndex] = index;
|
||||
_this.checkRange(sliderIndex, tempPosArr);
|
||||
|
||||
}else{
|
||||
_this.curDistance[sliderIndex] = (2-index)*_this.liHeight;
|
||||
_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if (typeof exports == "object") {
|
||||
module.exports = MobileSelect;
|
||||
} else if (typeof define == "function" && define.amd) {
|
||||
define([], function () {
|
||||
return MobileSelect;
|
||||
})
|
||||
} else {
|
||||
window.MobileSelect = MobileSelect;
|
||||
}
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
|
||||
#Created by Apache Maven 3.6.3
|
||||
groupId=cn.ppdxzz
|
||||
artifactId=hellossm
|
||||
version=1.0-SNAPSHOT
|
||||
@ -0,0 +1,19 @@
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\controller\BasicController.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\service\AdminService.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\service\impl\AdminServiceImpl.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\controller\StudentController.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\domain\Admin.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\domain\Visitor.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\service\VisitorService.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\service\StudentService.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\controller\AdminController.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\controller\VisitorController.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\dao\StudentDao.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\poi\WriteExcel.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\controller\LoginInterceptor.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\dao\AdminDao.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\domain\Student.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\service\impl\VisitorServiceImpl.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\dao\VisitorDao.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\service\impl\StudentServiceImpl.java
|
||||
D:\Development tools\IDEA\IntelliJ IDEA 2019.2.4\hellossm\src\main\java\cn\ppdxzz\utils\MD5Util.java
|
||||
Loading…
Reference in new issue