h5年月日輪換選擇器
阿新 • • 發佈:2019-01-07
h5觸發:
<tr>
<td>出生日期
<input id="my_birth" class="my_data_input" type="text" data-role="none" placeholder="請選擇生日" />
</td>
</tr>
js監聽:
//監聽生日輸入 var currYear = (new Date()).getFullYear(); var opt={}; opt.date = {preset : 'date'}; opt.datetime = {preset : 'datetime'}; opt.time = {preset : 'time'}; opt.default = { theme: 'android-ics light', //面板樣式 display: 'modal', //顯示方式 mode: 'scroller', //日期選擇模式 dateFormat: 'yyyy-mm-dd', lang: 'zh', showNow: true, nowText: "今天", startYear: currYear - 50, //開始年份 endYear: currYear + 10 //結束年份 }; $("#my_birth").mobiscroll($.extend(opt['date'], opt['default']));
引入的js與css
mobiscroll.css mobiscroll_data.css
.dw-trans .dw-persp { overflow: hidden; perspective: 1000; -webkit-perspective: 1000; -moz-perspective: 1000; } .dw-trans .dwwb { -webkit-backface-visibility: hidden; } .dw-in { animation-timing-function: ease-out; animation-duration: 350ms; -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 350ms; -moz-animation-timing-function: ease-out; -moz-animation-duration: 350ms; } .dw-out { animation-timing-function: ease-in; animation-duration: 350ms; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 350ms; -moz-animation-timing-function: ease-in; -moz-animation-duration: 350ms; } .dw-flip, .dw-swing, .dw-slidehorizontal, .dw-slidevertical, .dw-slidedown, .dw-slideup, .dw-fade { backface-visibility: hidden; transform: translateX(0); -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); -moz-backface-visibility: hidden; -moz-transform: translateX(0); } .dw-swing, .dw-slidehorizontal, .dw-slidevertical, .dw-slidedown, .dw-slideup, .dw-fade { transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; } .dw-flip, .dw-pop { transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; } .dw-pop.dw-in { opacity: 1; transform: scale(1); animation-name: dw-p-in; -webkit-animation-name: dw-p-in; -webkit-transform: scale(1); -moz-animation-name: dw-p-in; -moz-transform: scale(1); } .dw-pop.dw-out { opacity: 0; animation-name: dw-p-out; -webkit-animation-name: dw-p-out; -moz-animation-name: dw-p-out; } .dw-flip.dw-in { opacity: 1; transform: scale(1); animation-name: dw-fl-in; -webkit-animation-name: dw-fl-in; -webkit-transform: scale(1); -moz-animation-name: dw-fl-in; -moz-transform: scale(1); } .dw-flip.dw-out { opacity: 0; animation-name: dw-fl-out; -webkit-animation-name: dw-fl-out; -moz-animation-name: dw-fl-out; } .dw-swing.dw-in { opacity: 1; transform: scale(1); animation-name: dw-sw-in; -webkit-animation-name: dw-sw-in; -webkit-transform: scale(1); -moz-animation-name: dw-sw-in; -moz-transform: scale(1); } .dw-swing.dw-out { opacity: 0; animation-name: dw-sw-out; -webkit-animation-name: dw-sw-out; -moz-animation-name: dw-sw-out; } .dw-slidehorizontal.dw-in { opacity: 1; transform: scale(1); animation-name: dw-sh-in; -webkit-animation-name: dw-sh-in; -webkit-transform: scale(1); -moz-animation-name: dw-sh-in; -moz-transform: scale(1); } .dw-slidehorizontal.dw-out { opacity: 0; animation-name: dw-sh-out; -webkit-animation-name: dw-sh-out; -moz-animation-name: dw-sh-out; } .dw-slidevertical.dw-in { opacity: 1; animation-name: dw-dw-sv-in; transform: scale(1); -webkit-animation-name: dw-dw-sv-in; -webkit-transform: scale(1); -moz-animation-name: dw-dw-sv-in; -moz-transform: scale(1); } .dw-slidevertical.dw-out { opacity: 0; animation-name: dw-sv-out; -webkit-animation-name: dw-sv-out; -moz-animation-name: dw-sv-out; } .dw-slidedown.dw-in { animation-name: dw-sd-in; transform: scale(1); -webkit-animation-name: dw-sd-in; -webkit-transform: scale(1); -moz-animation-name: dw-sd-in; -moz-transform: scale(1); } .dw-slidedown.dw-out { animation-name: dw-sd-out; -webkit-animation-name: dw-sd-out; -moz-animation-name: dw-sd-out; } .dw-slideup.dw-in { transform: scale(1); animation-name: dw-su-in; -webkit-animation-name: dw-su-in; -webkit-transform: scale(1); -moz-animation-name: dw-su-in; -moz-transform: scale(1); } .dw-slideup.dw-out { animation-name: dw-su-out; -webkit-animation-name: dw-su-out; -moz-animation-name: dw-su-out; } .dw-fade.dw-in { opacity: 1; animation-name: dw-f-in; -webkit-animation-name: dw-f-in; -moz-animation-name: dw-f-in; } .dw-fade.dw-out { opacity: 0; animation-name: dw-f-out; -webkit-animation-name: dw-f-out; -moz-animation-name: dw-f-out; } /* Fade in */ @keyframes dw-f-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes dw-f-in { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes dw-f-in { from { opacity: 0; } to { opacity: 1; } } /* Fade out */ @keyframes dw-f-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes dw-f-out { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes dw-f-out { from { opacity: 1; } to { opacity: 0; } } /* Pop in */ @keyframes dw-p-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @-webkit-keyframes dw-p-in { from { opacity: 0; -webkit-transform: scale(0.8); } to { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes dw-p-in { from { opacity: 0; -moz-transform: scale(0.8); } to { opacity: 1; -moz-transform: scale(1); } } /* Pop out */ @keyframes dw-p-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.8); } } @-webkit-keyframes dw-p-out { from { opacity: 1; -webkit-transform: scale(1); } to { opacity: 0; -webkit-transform: scale(0.8); } } @-moz-keyframes dw-p-out { from { opacity: 1; -moz-transform: scale(1); } to { opacity: 0; -moz-transform: scale(0.8); } } /* Flip in */ @keyframes dw-fl-in { from { opacity: 0; transform: rotateY(90deg); } to { opacity: 1; transform: rotateY(0); } } @-webkit-keyframes dw-fl-in { from { opacity: 0; -webkit-transform: rotateY(90deg); } to { opacity: 1; -webkit-transform: rotateY(0); } } @-moz-keyframes dw-fl-in { from { opacity: 0; -moz-transform: rotateY(90deg); } to { opacity: 1; -moz-transform: rotateY(0); } } /* Flip out */ @keyframes dw-fl-out { from { opacity: 1; transform: rotateY(0deg); } to { opacity: 0; transform: rotateY(-90deg); } } @-webkit-keyframes dw-fl-out { from { opacity: 1; -webkit-transform: rotateY(0deg); } to { opacity: 0; -webkit-transform: rotateY(-90deg); } } @-moz-keyframes dw-fl-out { from { opacity: 1; -moz-transform: rotateY(0deg); } to { opacity: 0; -moz-transform: rotateY(-90deg); } } /* Swing in */ @keyframes dw-sw-in { from { opacity: 0; transform: rotateY(-90deg); } to { opacity: 1; transform: rotateY(0deg); } } @-webkit-keyframes dw-sw-in { from { opacity: 0; -webkit-transform: rotateY(-90deg); } to { opacity: 1; -webkit-transform: rotateY(0deg); } } @-moz-keyframes dw-sw-in { from { opacity: 0; -moz-transform: rotateY(-90deg); } to { opacity: 1; -moz-transform: rotateY(0deg); } } /* Swing out */ @keyframes dw-sw-out { from { opacity: 1; transform: rotateY(0deg); } to { opacity: 0; transform: rotateY(-90deg); } } @-webkit-keyframes dw-sw-out { from { opacity: 1; -webkit-transform: rotateY(0deg); } to { opacity: 0; -webkit-transform: rotateY(-90deg); } } @-moz-keyframes dw-sw-out { from { opacity: 1; -moz-transform: rotateY(0deg); } to { opacity: 0; -moz-transform: rotateY(-90deg); } } /* Slide horizontal in */ @keyframes dw-sh-in { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @-webkit-keyframes dw-sh-in { from { opacity: 0; -webkit-transform: translateX(-100%); } to { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes dw-sh-in { from { opacity: 0; -moz-transform: translateX(-100%); } to { opacity: 1; -moz-transform: translateX(0); } } /* Slide horizontal out */ @keyframes dw-sh-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } @-webkit-keyframes dw-sh-out { from { opacity: 1; -webkit-transform: translateX(0); } to { opacity: 0; -webkit-transform: translateX(100%); } } @-moz-keyframes dw-sh-out { from { opacity: 1; -moz-transform: translateX(0); } to { opacity: 0; -moz-transform: translateX(100%); } } /* Slide vertical in */ @keyframes dw-dw-sv-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes dw-dw-sv-in { from { opacity: 0; -webkit-transform: translateY(-100%); } to { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes dw-dw-sv-in { from { opacity: 0; -moz-transform: translateY(-100%); } to { opacity: 1; -moz-transform: translateY(0); } } /* Slide vertical out */ @keyframes dw-sv-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } } @-webkit-keyframes dw-sv-out { from { opacity: 1; -webkit-transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(100%); } } @-moz-keyframes dw-sv-out { from { opacity: 1; -moz-transform: translateY(0); } to { opacity: 0; -moz-transform: translateY(100%); } } /* Slide Down In */ @keyframes dw-sd-in { from { transform: translateY(-100%); } to { transform: translateY(0); } } @-webkit-keyframes dw-sd-in { from { opacity: 1; -webkit-transform: translateY(-100%); } to { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes dw-sd-in { from { -moz-transform: translateY(-100%); } to { -moz-transform: translateY(0); } } /* Slide down out */ @keyframes dw-sd-out { from { transform: translateY(0); } to { transform: translateY(-100%); } } @-webkit-keyframes dw-sd-out { from { opacity: 1; -webkit-transform: translateY(0); } to { opacity: 1; -webkit-transform: translateY(-100%); } } @-moz-keyframes dw-sd-out { from { -moz-transform: translateY(0); } to { -moz-transform: translateY(-100%); } } /* Slide Up In */ @keyframes dw-su-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @-webkit-keyframes dw-su-in { from { opacity: 1; -webkit-transform: translateY(100%); } to { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes dw-su-in { from { -moz-transform: translateY(100%); } to { -moz-transform: translateY(0); } } /* Slide up out */ @keyframes dw-su-out { from { transform: translateY(0); } to { transform: translateY(100%); } } @-webkit-keyframes dw-su-out { from { opacity: 1; -webkit-transform: translateY(0); } to { opacity: 1; -webkit-transform: translateY(100%); } } @-moz-keyframes dw-su-out { from { -moz-transform: translateY(0); } to { -moz-transform: translateY(100%); } }
/* Datewheel overlay */ .dw { position: absolute; top: 5%; left: 0; z-index: 1001; color: #000; font-family: arial, verdana, sans-serif; font-size: 12px; text-shadow: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .dwi { position: static; margin: 5px; display: inline-block; } .dwwr { min-width: 170px; zoom: 1; padding: 0 10px; text-align: center; } /* Datewheel overlay background */ .dw-persp, .dwo { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1001; } .dwo { background: #000; opacity: .7; filter: Alpha(Opacity=70); } /* Bubble positionings */ .dw-bubble .dw { margin: 20px 0; } .dw-bubble .dw-arrw { position: absolute; left: 0; width: 100%; } .dw-bubble-top .dw-arrw { bottom: -36px; } .dw-bubble-bottom .dw-arrw { top: -36px; } .dw-bubble .dw-arrw-i { margin: 0 30px; position: relative; height: 36px; } .dw-bubble .dw-arr { display: block; } .dw-arr { display: none; position: absolute; left: 0; width: 0; height: 0; border-width: 18px 18px; border-style: solid; margin-left: -18px; } .dw-bubble-bottom .dw-arr { top: 0; border-color: transparent transparent #fff transparent; } .dw-bubble-top .dw-arr { bottom: 0; border-color: #fff transparent transparent transparent; } /* Datewheel wheel container wrapper */ .dwc { float: none; margin: 0 2px 5px 2px; padding-top: 30px; display: inline-block; } .dwcc { clear: both; } /* Datewheel label */ .dwl { text-align: center; line-height: 30px; height: 30px; white-space: nowrap; position: absolute; top: -30px; width: 100%; } /* Datewheel value */ .dwv { padding: 10px 0; border-bottom: 1px solid #000; } /* Datewheel wheel container */ .dwrc { -webkit-border-radius: 3px; border-radius: 3px; } .dwwc { margin: 0; padding: 0 2px; position: relative; background: #000; zoom: 1; } /* Datewheel wheels */ .dwwl { margin: 4px 2px; position: relative; z-index: 5; } .dww { margin: 0 2px; overflow: hidden; position: relative; } .dwsc .dwwl { background: #888; background: linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%); background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),to(#000)); background: -moz-linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%); background: -o-linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%); } .dwsc .dww { color: #fff; background: #444; background: linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%); background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.45, #444),color-stop(0.55, #444),to(#000)); background: -moz-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%); background: -o-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%); } .dw-bf { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } .dw-ul { position: relative; z-index: 2; } .dw-li { padding: 0 5px; display: block; text-align: center; line-height: 40px; font-size: 26px; white-space: nowrap; text-shadow: 0 1px 1px #000; vertical-align: bottom; opacity: .3; filter: Alpha(Opacity=30); } /* Higlighted */ .dw-li.dw-hl { background: #fff; background: rgba(255,255,255,.3); } /* Valid entry */ .dw-li.dw-v { opacity: 1; filter: Alpha(Opacity=100); } /* Hidden entry */ .dw-li.dw-h { visibility: hidden; } .dw-i { position: relative; height: 100%; } /* Wheel +/- buttons */ .dwwb { position: absolute; z-index: 4; left: 0; cursor: pointer; width: 100%; height: 40px; text-align: center; opacity: 1; transition: opacity .2s linear; -webkit-transition: opacity .2s linear; } .dwa .dwwb { opacity: 0; } .dwwbp { top: 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; font-size: 40px; } .dwwbm { bottom: 0; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; font-size: 32px; font-weight: bold; } .dwpm .dwwc { background: transparent; } .dwpm .dww { margin: 0; } .dwpm .dw-li { text-shadow: none; } .dwpm .dwwol { display: none; } /* Datewheel wheel overlay */ .dwwo { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%); background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.52, rgba(44,44,44,0)),color-stop(0.48, rgba(44,44,44,0)),to(#000)); background: -moz-linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%); background: -o-linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%); } /* Background line */ .dwwol { position: absolute; z-index: 1; top: 50%; left: 0; width: 100%; height: 0; margin-top: -1px; border-top: 1px solid #333; border-bottom: 1px solid #555; } /* Datewheel button */ .dwbg .dwb { cursor: pointer; overflow: hidden; display: block; height: 40px; line-height: 40px; padding: 0 15px; margin: 0 2px; font-size: 14px; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px #000; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); color: #fff; background: #000; background: linear-gradient(#6e6e6e 50%,#000 50%); background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #000),color-stop(0.5, #6e6e6e)); background: -moz-linear-gradient(#6e6e6e 50%,#000 50%); background: -o-linear-gradient(#6e6e6e 50%,#000 50%); white-space: nowrap; text-overflow: ellipsis; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px; } /* Datewheel button container */ .dwbc { padding: 5px 0; text-align: center; clear: both; } .dwbc:after { content: ''; display: block; clear: both; } /* Datewheel button wrapper */ .dwbw { display: inline-block; float: left; width: 50%; position: relative; z-index: 5; } .dwbc-p .dwbw { width: 33.33%; } /* Hidden label */ .dwhl { padding-top: 10px; } .dwhl .dwl { display: none; } /* Multiple selection */ .dwms .dwwms .dw-li { padding: 0 40px; position: relative; } .dwms .dw-msel:after { width: 40px; text-align: center; position: absolute; top: 0; left: 0; content: '?'; } /* Backgrounds */ .dwbg { background: #fff; border-radius: 3px; -webkit-border-radius: 3px; } .dwbg .dwpm .dwwl { border: 1px solid #aaa; } .dwbg .dwpm .dww { color: #000; background: #fff; -webkit-border-radius: 3px; } .dwbg .dwwb { background: #ccc; color: #888; text-shadow: 0 -1px 1px #333; box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; } .dwbg .dwwbp { background: linear-gradient(#f7f7f7,#bdbdbd); background: -webkit-gradient(linear,left bottom,left top,from(#bdbdbd),to(#f7f7f7)); background: -moz-linear-gradient(#f7f7f7,#bdbdbd); background: -o-linear-gradient(#f7f7f7,#bdbdbd); } .dwbg .dwwbm { background: linear-gradient(#bdbdbd,#f7f7f7); background: -webkit-gradient(linear,left bottom,left top,from(#f7f7f7),to(#bdbdbd)); background: -moz-linear-gradient(#bdbdbd,#f7f7f7); background: -o-linear-gradient(#bdbdbd,#f7f7f7); } .dwbg .dwb-a { background: #3c7500; background: linear-gradient(#94c840 50%,#3c7500 50%); background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #3c7500),color-stop(0.5, #94c840)); background: -moz-linear-gradient(#94c840 50%,#3c7500 50%); background: -o-linear-gradient(#94c840 50%,#3c7500 50%); } .dwbg .dwwl .dwb-a { background: #3c7500; background: linear-gradient(#94c840,#3c7500); background: -webkit-gradient(linear,left bottom,left top,from(#3c7500),to(#94c840)); background: -moz-linear-gradient(#94c840,#3c7500); background: -o-linear-gradient(#94c840,#3c7500); } /* Android ICS skin */ .android-ics .dw { padding: 0; color: #31b6e7; background: #292829; } .android-ics .dw .dwwc, .android-ics .dw .dwwl, .android-ics .dw .dww, .android-ics .dw .dwb, .android-ics .dw .dwpm .dww { background: none; } .android-ics .dwwr { padding: 0; } .android-ics .dwc { margin: 0; padding: 30px 10px 1px 10px; } .android-ics .dwhl { padding: 1px 10px; } .android-ics .dwv { height: 36px; line-height: 36px; padding: 0; border-bottom: 2px solid #31b6e7; font-size: 18px; } .android-ics .dwwl { margin: 0 2px; } .android-ics .dww, .android-ics .dw .dwpm .dwwl, .android-ics .dw .dwpm .dww { border: 0; } .android-ics .dww .dw-li { color: #fff; font-size: 18px; text-shadow: none; } .android-ics .dww .dw-li.dw-hl { background: #31b6e7; background: rgba(49,182,231,.5); } .android-ics .dwwo { background: linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%); background: -webkit-gradient(linear,left bottom,left top,from(#282828),color-stop(0.52, rgba(40,40,40,0)),color-stop(0.48, rgba(40,40,40,0)),to(#282828)); background: -moz-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%); background: -o-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%); } .android-ics .dw .dwwb { background: #292829; box-shadow: none; -webkit-box-shadow: none; } .android-ics .dwwb span { display: none; } .android-ics .dwwb:after { position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; color: #7e7e7e; width: 0; height: 0; border-width: 8px; border-style: solid; content: ''; } .android-ics .dwwbm { top: 0; bottom: auto; } .android-ics .dwwbp { bottom: 0; top: auto; } .android-ics .dwwbm:after { border-color: transparent transparent #7e7e7e transparent; } .android-ics .dwwbp:after { border-color: #7e7e7e transparent transparent transparent; } .android-ics .dw .dwwl .dwb-a { background: #292829; } .android-ics .dwwbm.dwb-a:after { border-color: transparent transparent #319abd transparent; } .android-ics .dwwbp.dwb-a:after { border-color: #319abd transparent transparent transparent; } .android-ics .dw .dwwol { width: 60%; left: 20%; height: 36px; border-top: 2px solid #31b6e7; border-bottom: 2px solid #31b6e7; margin-top: -20px; display: block; } .android-ics .dwbc { border-top: 1px solid #424542; padding: 0; } .android-ics .dw .dwb { height: 36px; line-height: 36px; padding: 0; margin: 0; font-weight: normal; text-shadow: none; box-shadow: none; border-radius: 0; -webkit-border-radius: 0; -webkit-box-shadow: none; } .android-ics .dw .dwb-a { background: #29799c; } .android-ics .dwb-s .dwb, .android-ics .dwb-n .dwb { border-right: 1px solid #424542; } /* Docked */ .android-ics.dw-bottom .dw, .android-ics.dw-top .dw { border-radius: 0; -webkit-border-radius: 0; } /* Multiple select */ .android-ics .dwwms .dwwol { display: none; } .android-ics .dwwms .dw-li { padding-left: 5px; padding-right: 36px; } .android-ics .dwwms .dw-li:after { content: ''; position: absolute; top: 50%; left: auto; right: 10px; width: 14px; height: 14px; margin-top: -9px; color: #31b6e7; line-height: 14px; border: 1px solid #424542; text-shadow: 0 0 5px #29799c; } .android-ics .dwwms .dw-msel:after { content: '?'; } /* Light version */ .android-ics.light .dw { background: #f5f5f5; } .android-ics.light .dww .dw-li { color: #000; } .android-ics.light .dwwo { background: linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%); background: -webkit-gradient(linear,left bottom,left top,from(#f5f5f5),color-stop(0.52, rgba(245,245,245,0)),color-stop(0.48, rgba(245,245,245,0)),to(#f5f5f5)); background: -moz-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%); background: -o-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%); } .android-ics.light .dw .dwwb { background: #f5f5f5; color: #f5f5f5; } .android-ics.light .dwbc { border-top: 1px solid #dbdbdb; } .android-ics.light .dwb { color: #000; } .android-ics.light .dwb-a { color: #fff; } .android-ics.light .dwb-s .dwb, .android-ics.light .dwb-n .dwb { border-right: 1px solid #dbdbdb; } /* Bubble positioning */ .android-ics .dw-bubble-bottom .dw-arr { border-color: transparent transparent #292829 transparent; } .android-ics .dw-bubble-top .dw-arr { border-color: #292829 transparent transparent transparent; } /* Bubble positioning */ .android-ics.light .dw-bubble-bottom .dw-arr { border-color: transparent transparent #f5f5f5 transparent; } .android-ics.light .dw-bubble-top .dw-arr { border-color: #f5f5f5 transparent transparent transparent; } /* Multiple select */ .android-ics.light .dwwms .dw-li:after { text-shadow: 0 0 5px #31b6e7; }
引入js
/*jslint eqeq: true, plusplus: true, undef: true, sloppy: true, vars: true, forin: true */
(function ($) {
var ms = $.mobiscroll,
date = new Date(),
defaults = {
dateFormat: 'mm/dd/yy',
dateOrder: 'mmddy',
timeWheels: 'hhiiA',
timeFormat: 'hh:ii A',
startYear: date.getFullYear() - 100,
endYear: date.getFullYear() + 1,
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
shortYearCutoff: '+10',
monthText: 'Month',
dayText: 'Day',
yearText: 'Year',
hourText: 'Hours',
minuteText: 'Minutes',
secText: 'Seconds',
ampmText: ' ',
nowText: 'Now',
showNow: false,
stepHour: 1,
stepMinute: 1,
stepSecond: 1,
separator: ' '
},
preset = function (inst) {
var that = $(this),
html5def = {},
format;
// Force format for html5 date inputs (experimental)
if (that.is('input')) {
switch (that.attr('type')) {
case 'date':
format = 'yy-mm-dd';
break;
case 'datetime':
format = 'yy-mm-ddTHH:ii:ssZ';
break;
case 'datetime-local':
format = 'yy-mm-ddTHH:ii:ss';
break;
case 'month':
format = 'yy-mm';
html5def.dateOrder = 'mmyy';
break;
case 'time':
format = 'HH:ii:ss';
break;
}
// Check for min/max attributes
var min = that.attr('min'),
max = that.attr('max');
if (min) {
html5def.minDate = ms.parseDate(format, min);
}
if (max) {
html5def.maxDate = ms.parseDate(format, max);
}
}
// Set year-month-day order
var s = $.extend({}, defaults, html5def, inst.settings),
offset = 0,
wheels = [],
ord = [],
o = {},
i,
k,
f = { y: 'getFullYear', m: 'getMonth', d: 'getDate', h: getHour, i: getMinute, s: getSecond, a: getAmPm },
p = s.preset,
dord = s.dateOrder,
tord = s.timeWheels,
regen = dord.match(/D/),
ampm = tord.match(/a/i),
hampm = tord.match(/h/),
hformat = p == 'datetime' ? s.dateFormat + s.separator + s.timeFormat : p == 'time' ? s.timeFormat : s.dateFormat,
defd = new Date(),
stepH = s.stepHour,
stepM = s.stepMinute,
stepS = s.stepSecond,
mind = s.minDate || new Date(s.startYear, 0, 1),
maxd = s.maxDate || new Date(s.endYear, 11, 31, 23, 59, 59);
inst.settings = s;
format = format || hformat;
if (p.match(/date/i)) {
// Determine the order of year, month, day wheels
$.each(['y', 'm', 'd'], function (j, v) {
i = dord.search(new RegExp(v, 'i'));
if (i > -1) {
ord.push({ o: i, v: v });
}
});
ord.sort(function (a, b) { return a.o > b.o ? 1 : -1; });
$.each(ord, function (i, v) {
o[v.v] = i;
});
var w = {};
for (k = 0; k < 3; k++) {
if (k == o.y) {
offset++;
w[s.yearText] = {};
var start = mind.getFullYear(),
end = maxd.getFullYear();
for (i = start; i <= end; i++) {
w[s.yearText][i] = dord.match(/yy/i) ? i : (i + '').substr(2, 2);
}
} else if (k == o.m) {
offset++;
w[s.monthText] = {};
for (i = 0; i < 12; i++) {
var str = dord.replace(/[dy]/gi, '').replace(/mm/, i < 9 ? '0' + (i + 1) : i + 1).replace(/m/, (i + 1));
w[s.monthText][i] = str.match(/MM/) ? str.replace(/MM/, '<span class="dw-mon">' + s.monthNames[i] + '</span>') : str.replace(/M/, '<span class="dw-mon">' + s.monthNamesShort[i] + '</span>');
}
} else if (k == o.d) {
offset++;
w[s.dayText] = {};
for (i = 1; i < 32; i++) {
w[s.dayText][i] = dord.match(/dd/i) && i < 10 ? '0' + i : i;
}
}
}
wheels.push(w);
}
if (p.match(/time/i)) {
// Determine the order of hours, minutes, seconds wheels
ord = [];
$.each(['h', 'i', 's', 'a'], function (i, v) {
i = tord.search(new RegExp(v, 'i'));
if (i > -1) {
ord.push({ o: i, v: v });
}
});
ord.sort(function (a, b) {
return a.o > b.o ? 1 : -1;
});
$.each(ord, function (i, v) {
o[v.v] = offset + i;
});
w = {};
for (k = offset; k < offset + 4; k++) {
if (k == o.h) {
offset++;
w[s.hourText] = {};
for (i = 0; i < (hampm ? 12 : 24); i += stepH) {
w[s.hourText][i] = hampm && i == 0 ? 12 : tord.match(/hh/i) && i < 10 ? '0' + i : i;
}
} else if (k == o.i) {
offset++;
w[s.minuteText] = {};
for (i = 0; i < 60; i += stepM) {
w[s.minuteText][i] = tord.match(/ii/) && i < 10 ? '0' + i : i;
}
} else if (k == o.s) {
offset++;
w[s.secText] = {};
for (i = 0; i < 60; i += stepS) {
w[s.secText][i] = tord.match(/ss/) && i < 10 ? '0' + i : i;
}
} else if (k == o.a) {
offset++;
var upper = tord.match(/A/);
w[s.ampmText] = { 0: upper ? 'AM' : 'am', 1: upper ? 'PM' : 'pm' };
}
}
wheels.push(w);
}
function get(d, i, def) {
if (o[i] !== undefined) {
return +d[o[i]];
}
if (def !== undefined) {
return def;
}
return defd[f[i]] ? defd[f[i]]() : f[i](defd);
}
function step(v, st) {
return Math.floor(v / st) * st;
}
function getHour(d) {
var hour = d.getHours();
hour = hampm && hour >= 12 ? hour - 12 : hour;
return step(hour, stepH);
}
function getMinute(d) {
return step(d.getMinutes(), stepM);
}
function getSecond(d) {
return step(d.getSeconds(), stepS);
}
function getAmPm(d) {
return ampm && d.getHours() > 11 ? 1 : 0;
}
function getDate(d) {
var hour = get(d, 'h', 0);
return new Date(get(d, 'y'), get(d, 'm'), get(d, 'd', 1), get(d, 'a') ? hour + 12 : hour, get(d, 'i', 0), get(d, 's', 0));
}
inst.setDate = function (d, fill, time, temp) {
var i;
// Set wheels
for (i in o) {
this.temp[o[i]] = d[f[i]] ? d[f[i]]() : f[i](d);
}
this.setValue(true, fill, time, temp);
};
inst.getDate = function (d) {
return getDate(d);
};
return {
button3Text: s.showNow ? s.nowText : undefined,
button3: s.showNow ? function () { inst.setDate(new Date(), false, 0.3, true); } : undefined,
wheels: wheels,
headerText: function (v) {
return ms.formatDate(hformat, getDate(inst.temp), s);
},
/**
* Builds a date object from the wheel selections and formats it to the given date/time format
* @param {Array} d - An array containing the selected wheel values
* @return {String} - The formatted date string
*/
formatResult: function (d) {
return ms.formatDate(format, getDate(d), s);
},
/**
* Builds a date object from the input value and returns an array to set wheel values
* @return {Array} - An array containing the wheel values to set
*/
parseValue: function (val) {
var d = new Date(),
i,
result = [];
try {
d = ms.parseDate(format, val, s);
} catch (e) {
}
// Set wheels
for (i in o) {
result[o[i]] = d[f[i]] ? d[f[i]]() : f[i](d);
}
return result;
},
/**
* Validates the selected date to be in the minDate / maxDate range and sets unselectable values to disabled
* @param {Object} dw - jQuery object containing the generated html
* @param {Integer} [i] - Index of the changed wheel, not set for initial validation
*/
validate: function (dw, i) {
var temp = inst.temp, //.slice(0),
mins = { y: mind.getFullYear(), m: 0, d: 1, h: 0, i: 0, s: 0, a: 0 },
maxs = { y: maxd.getFullYear(), m: 11, d: 31, h: step(hampm ? 11 : 23, stepH), i: step(59, stepM), s: step(59, stepS), a: 1 },
minprop = true,
maxprop = true;
$.each(['y', 'm', 'd', 'a', 'h', 'i', 's'], function (x, i) {
if (o[i] !== undefined) {
var min = mins[i],
max = maxs[i],
maxdays = 31,
val = get(temp, i),
t = $('.dw-ul', dw).eq(o[i]),
y,
m;
if (i == 'd') {
y = get(temp, 'y');
m = get(temp, 'm');
maxdays = 32 - new Date(y, m, 32).getDate();
max = maxdays;
if (regen) {
$('.dw-li', t).each(function () {
var that = $(this),
d = that.data('val'),
w = new Date(y, m, d).getDay(),
str = dord.replace(/[my]/gi, '').replace(/dd/, d < 10 ? '0' + d : d).replace(/d/, d);
$('.dw-i', that).html(str.match(/DD/) ? str.replace(/DD/, '<span class="dw-day">' + s.dayNames[w] + '</span>') : str.replace(/D/, '<span class="dw-day">' + s.dayNamesShort[w] + '</span>'));
});
}
}
if (minprop && mind) {
min = mind[f[i]] ? mind[f[i]]() : f[i](mind);
}
if (maxprop && maxd) {
max = maxd[f[i]] ? maxd[f[i]]() : f[i](maxd);
}
if (i != 'y') {
var i1 = $('.dw-li', t).index($('.dw-li[data-val="' + min + '"]', t)),
i2 = $('.dw-li', t).index($('.dw-li[data-val="' + max + '"]', t));
$('.dw-li', t).removeClass('dw-v').slice(i1, i2 + 1).addClass('dw-v');
if (i == 'd') { // Hide days not in month
$('.dw-li', t).removeClass('dw-h').slice(maxdays).addClass('dw-h');
}
}
if (val < min) {
val = min;
}
if (val > max) {
val = max;
}
if (minprop) {
minprop = val == min;
}
if (maxprop) {
maxprop = val == max;
}
// Disable some days
if (s.invalid && i == 'd') {
var idx = [];
// Disable exact dates
if (s.invalid.dates) {
$.each(s.invalid.dates, function (i, v) {
if (v.getFullYear() == y && v.getMonth() == m) {
idx.push(v.getDate() - 1);
}
});
}
// Disable days of week
if (s.invalid.daysOfWeek) {
var first = new Date(y, m, 1).getDay(),
j;
$.each(s.invalid.daysOfWeek, function (i, v) {
for (j = v - first; j < maxdays; j += 7) {
if (j >= 0) {
idx.push(j);
}
}
});
}
// Disable days of month
if (s.invalid.daysOfMonth) {
$.each(s.invalid.daysOfMonth, function (i, v) {
v = (v + '').split('/');
if (v[1]) {
if (v[0] - 1 == m) {
idx.push(v[1] - 1);
}
} else {
idx.push(v[0] - 1);
}
});
}
$.each(idx, function (i, v) {
$('.dw-li', t).eq(v).removeClass('dw-v');
});
}
// Set modified value
temp[o[i]] = val;
}
});
},
methods: {
/**
* Returns the currently selected date.
* @param {Boolean} temp - If true, return the currently shown date on the picker, otherwise the last selected one
* @return {Date}
*/
getDate: function (temp) {
var inst = $(this).mobiscroll('getInst');
if (inst) {
return inst.getDate(temp ? inst.temp : inst.values);
}
},
/**
* Sets the selected date
* @param {Date} d - Date to select.
* @param {Boolean} [fill] - Also set the value of the associated input element. Default is true.
* @return {Object} - jQuery object to maintain chainability
*/
setDate: function (d, fill, time, temp) {
if (fill == undefined) {
fill = false;
}
return this.each(function () {
var inst = $(this).mobiscroll('getInst');
if (inst) {
inst.setDate(d, fill, time, temp);
}
});
}
}
};
};
$.each(['date', 'time', 'datetime'], function (i, v) {
ms.presets[v] = preset;
ms.presetShort(v);
});
/**
* Format a date into a string value with a specified format.
* @param {String} format - Output format.
* @param {Date} date - Date to format.
* @param {Object} settings - Settings.
* @return {String} - Returns the formatted date string.
*/
ms.formatDate = function (format, date, settings) {
if (!date) {
return null;
}
var s = $.extend({}, defaults, settings),
look = function (m) { // Check whether a format character is doubled
var n = 0;
while (i + 1 < format.length && format.charAt(i + 1) == m) {
n++;
i++;
}
return n;
},
f1 = function (m, val, len) { // Format a number, with leading zero if necessary
var n = '' + val;
if (look(m)) {
while (n.length < len) {
n = '0' + n;
}
}
return n;
},
f2 = function (m, val, s, l) { // Format a name, short or long as requested
return (look(m) ? l[val] : s[val]);
},
i,
output = '',
literal = false;
for (i = 0; i < format.length; i++) {
if (literal) {
if (format.charAt(i) == "'" && !look("'")) {
literal = false;
} else {
output += format.charAt(i);
}
} else {
switch (format.charAt(i)) {
case 'd':
output += f1('d', date.getDate(), 2);
break;
case 'D':
output += f2('D', date.getDay(), s.dayNamesShort, s.dayNames);
break;
case 'o':
output += f1('o', (date.getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000, 3);
break;
case 'm':
output += f1('m', date.getMonth() + 1, 2);
break;
case 'M':
output += f2('M', date.getMonth(), s.monthNamesShort, s.monthNames);
break;
case 'y':
output += (look('y') ? date.getFullYear() : (date.getYear() % 100 < 10 ? '0' : '') + date.getYear() % 100);
break;
case 'h':
var h = date.getHours();
output += f1('h', (h > 12 ? (h - 12) : (h == 0 ? 12 : h)), 2);
break;
case 'H':
output += f1('H', date.getHours(), 2);
break;
case 'i':
output += f1('i', date.getMinutes(), 2);
break;
case 's':
output += f1('s', date.getSeconds(), 2);
break;
case 'a':
output += date.getHours() > 11 ? 'pm' : 'am';
break;
case 'A':
output += date.getHours() > 11 ? 'PM' : 'AM';
break;
case "'":
if (look("'")) {
output += "'";
} else {
literal = true;
}
break;
default:
output += format.charAt(i);
}
}
}
return output;
};
/**
* Extract a date from a string value with a specified format.
* @param {String} format - Input format.
* @param {String} value - String to parse.
* @param {Object} settings - Settings.
* @return {Date} - Returns the extracted date.
*/
ms.parseDate = function (format, value, settings) {
var def = new Date();
if (!format || !value) {
return def;
}
value = (typeof value == 'object' ? value.toString() : value + '');
var s = $.extend({}, defaults, settings),
shortYearCutoff = s.shortYearCutoff,
year = def.getFullYear(),
month = def.getMonth() + 1,
day = def.getDate(),
doy = -1,
hours = def.getHours(),
minutes = def.getMinutes(),
seconds = 0, //def.getSeconds(),
ampm = -1,
literal = false, // Check whether a format character is doubled
lookAhead = function (match) {
var matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) == match);
if (matches) {
iFormat++;
}
return matches;
},
getNumber = function (match) { // Extract a number from the string value
lookAhead(match);
var size = (match == '@' ? 14 : (match == '!' ? 20 : (match == 'y' ? 4 : (match == 'o' ? 3 : 2)))),
digits = new RegExp('^\\d{1,' + size + '}'),
num = value.substr(iValue).match(digits);
if (!num) {
return 0;
}
//throw 'Missing number at position ' + iValue;
iValue += num[0].length;
return parseInt(num[0], 10);
},
getName = function (match, s, l) { // Extract a name from the string value and convert to an index
var names = (lookAhead(match) ? l : s),
i;
for (i = 0; i < names.length; i++) {
if (value.substr(iValue, names[i].length).toLowerCase() == names[i].toLowerCase()) {
iValue += names[i].length;
return i + 1;
}
}
return 0;
//throw 'Unknown name at position ' + iValue;
},
checkLiteral = function () {
//if (value.charAt(iValue) != format.charAt(iFormat))
//throw 'Unexpected literal at position ' + iValue;
iValue++;
},
iValue = 0,
iFormat;
for (iFormat = 0; iFormat < format.length; iFormat++) {
if (literal) {
if (format.charAt(iFormat) == "'" && !lookAhead("'")) {
literal = false;
} else {
checkLiteral();
}
} else {
switch (format.charAt(iFormat)) {
case 'd':
day = getNumber('d');
break;
case 'D':
getName('D', s.dayNamesShort, s.dayNames);
break;
case 'o':
doy = getNumber('o');
break;
case 'm':
month = getNumber('m');
break;
case 'M':
month = getName('M', s.monthNamesShort, s.monthNames);
break;
case 'y':
year = getNumber('y');
break;
case 'H':
hours = getNumber('H');
break;
case 'h':
hours = getNumber('h');
break;
case 'i':
minutes = getNumber('i');
break;
case 's':
seconds = getNumber('s');
break;
case 'a':
ampm = getName('a', ['am', 'pm'], ['am', 'pm']) - 1;
break;
case 'A':
ampm = getName('A', ['am', 'pm'], ['am', 'pm']) - 1;
break;
case "'":
if (lookAhead("'")) {
checkLiteral();
} else {
literal = true;
}
break;
default:
checkLiteral();
}
}
}
if (year < 100) {
year += new Date().getFullYear() - new Date().getFullYear() % 100 +
(year <= (typeof shortYearCutoff != 'string' ? shortYearCutoff : new Date().getFullYear() % 100 + parseInt(shortYearCutoff, 10)) ? 0 : -100);
}
if (doy > -1) {
month = 1;
day = doy;
do {
var dim = 32 - new Date(year, month - 1, 32).getDate();
if (day <= dim) {
break;
}
month++;
day -= dim;
} while (true);
}
hours = (ampm == -1) ? hours : ((ampm && hours < 12) ? (hours + 12) : (!ampm && hours == 12 ? 0 : hours));
var date = new Date(year, month - 1, day, hours, minutes, seconds);
if (date.getFullYear() != year || date.getMonth() + 1 != month || date.getDate() != day) {
throw 'Invalid date';
}
return date;
};
})(jQuery);
/*jslint eqeq: true, plusplus: true, undef: true, sloppy: true, vars: true, forin: true */
/*!
* jQuery MobiScroll v2.5.1
* http://mobiscroll.com
*
* Copyright 2010-2013, Acid Media
* Licensed under the MIT license.
*
*/
(function ($) {
function Scroller(elem, settings) {
var m,
hi,
v,
dw,
ww, // Window width
wh, // Window height
rwh,
mw, // Modal width
mh, // Modal height
anim,
debounce,
that = this,
ms = $.mobiscroll,
e = elem,
elm = $(e),
theme,
lang,
s = extend({}, defaults),
pres = {},
warr = [],
iv = {},
pixels = {},
input = elm.is('input'),
visible = false;
// Private functions
function isReadOnly(wh) {
if ($.isArray(s.readonly)) {
var i = $('.dwwl', dw).index(wh);
return s.readonly[i];
}
return s.readonly;
}
function generateWheelItems(i) {
var html = '<div class="dw-bf">',
l = 1,
j;
for (j in warr[i]) {
if (l % 20 == 0) {
html += '</div><div class="dw-bf">';
}
html += '<div class="dw-li dw-v" data-val="' + j + '" style="height:' + hi + 'px;line-height:' + hi + 'px;"><div class="dw-i">' + warr[i][j] + '</div></div>';
l++;
}
html += '</div>';
return html;
}
function setGlobals(t) {
min = $('.dw-li', t).index($('.dw-v', t).eq(0));
max = $('.dw-li', t).index($('.dw-v', t).eq(-1));
index = $('.dw-ul', dw).index(t);
h = hi;
inst = that;
}
function formatHeader(v) {
var t = s.headerText;
return t ? (typeof t === 'function' ? t.call(e, v) : t.replace(/\{value\}/i, v)) : '';
}
function read() {
that.temp = ((input && that.val !== null && that.val != elm.val()) || that.values === null) ? s.parseValue(elm.val() || '', that) : that.values.slice(0);
that.setValue(true);
}
function scrollToPos(time, index, manual, dir, orig) {
// Call validation event
if (event('validate', [dw, index, time]) !== false) {
// Set scrollers to position
$('.dw-ul', dw).each(function (i) {
var t = $(this),
cell = $('.dw-li[data-val="' + that.temp[i] + '"]', t),
cells = $('.dw-li', t),
v = cells.index(cell),
l = cells.length,
sc = i == index || index === undefined;
// Scroll to a valid cell
if (!cell.hasClass('dw-v')) {
var cell1 = cell,
cell2 = cell,
dist1 = 0,
dist2 = 0;
while (v - dist1 >= 0 && !cell1.hasClass('dw-v')) {
dist1++;
cell1 = cells.eq(v - dist1);
}
while (v + dist2 < l && !cell2.hasClass('dw-v')) {
dist2++;
cell2 = cells.eq(v + dist2);
}
// If we have direction (+/- or mouse wheel), the distance does not count
if (((dist2 < dist1 && dist2 && dir !== 2) || !dist1 || (v - dist1 < 0) || dir == 1) && cell2.hasClass('dw-v')) {
cell = cell2;
v = v + dist2;
} else {
cell = cell1;
v = v - dist1;
}
}
if (!(cell.hasClass('dw-sel')) || sc) {
// Set valid value
that.temp[i] = cell.attr('data-val');
// Add selected class to cell
$('.dw-sel', t).removeClass('dw-sel');
cell.addClass('dw-sel');
// Scroll to position
//that.scroll(t, i, v, time);
that.scroll(t, i, v, sc ? time : 0.1, sc ? orig : undefined);
}
});
// Reformat value if validation changed something
that.change(manual);
}
}
function position(check) {
if (s.display == 'inline' || (ww === $(window).width() && rwh === $(window).height() && check)) {
return;
}
var w,
l,
t,
aw, // anchor width
ah, // anchor height
ap, // anchor position
at, // anchor top
al, // anchor left
arr, // arrow
arrw, // arrow width
arrl, // arrow left
scroll,
totalw = 0,
minw = 0,
st = $(window).scrollTop(),
wr = $('.dwwr', dw),
d = $('.dw', dw),
css = {},
anchor = s.anchor === undefined ? elm : s.anchor;
ww = $(window).width();
rwh = $(window).height();
wh = window.innerHeight; // on iOS we need innerHeight
wh = wh || rwh;
if (/modal|bubble/.test(s.display)) {
$('.dwc', dw).each(function () {
w = $(this).outerWidth(true);
totalw += w;
minw = (w > minw) ? w : minw;
});
w = totalw > ww ? minw : totalw;
wr.width(w);
}
mw = d.outerWidth();
mh = d.outerHeight(true);
if (s.display == 'modal') {
l = (ww - mw) / 2;
t = st + (wh - mh) / 2;
} else if (s.display == 'bubble') {
scroll = true;
arr = $('.dw-arrw-i', dw);
ap = anchor.offset();
at = ap.top;
al = ap.left;
// horizontal positioning
aw = anchor.outerWidth();
ah = anchor.outerHeight();
l = al - (d.outerWidth(true) - aw) / 2;
l = l > (ww - mw) ? (ww - (mw + 20)) : l;
l = l >= 0 ? l : 20;
// vertical positioning
t = at - mh; //(mh + 3); // above the input
if ((t < st) || (at > st + wh)) { // if doesn't fit above or the input is out of the screen
d.removeClass('dw-bubble-top').addClass('dw-bubble-bottom');
t = at + ah;// + 3; // below the input
} else {
d.removeClass('dw-bubble-bottom').addClass('dw-bubble-top');
}
//t = t >= st ? t : st;
// Calculate Arrow position
arrw = arr.outerWidth();
arrl = al + aw / 2 - (l + (mw - arrw) / 2);
// Limit Arrow position to [0, pocw.width] intervall
$('.dw-arr', dw).css({ left: arrl > arrw ? arrw : arrl });
} else {
css.width = '100%';
if (s.display == 'top') {
t = st;
} else if (s.display == 'bottom') {
t = st + wh - mh;
}
}
css.top = t < 0 ? 0 : t;
css.left = l;
d.css(css);
// If top + modal height > doc height, increase doc height
$('.dw-persp', dw).height(0).height(t + mh > $(document).height() ? t + mh : $(document).height());
// Scroll needed
if (scroll && ((t + mh > st + wh) || (at > st + wh))) {
$(window).scrollTop(t + mh - wh);
}
}
function testTouch(e) {
if (e.type === 'touchstart') {
touch = true;
setTimeout(function () {
touch = false; // Reset if mouse event was not fired
}, 500);
} else if (touch) {
touch = false;
return false;
}
return true;
}
function event(name, args) {
var ret;
args.push(that);
$.each([theme.defaults, pres, settings], function (i, v) {
if (v[name]) { // Call preset event
ret = v[name].apply(e, args);
}
});
return ret;
}
function plus(t) {
var p = +t.data('pos'),
val = p + 1;
calc(t, val > max ? min : val, 1, true);
}
function minus(t) {
var p = +t.data('pos'),
val = p - 1;
calc(t, val < min ? max : val, 2, true);
}
// Public functions
/**
* Enables the scroller and the associated input.
*/
that.enable = function () {
s.disabled = false;
if (input) {
elm.prop('disabled', false);
}
};
/**
* Disables the scroller and the associated input.
*/
that.disable = function () {
s.disabled = true;
if (input) {
elm.prop('disabled', true);
}
};
/**
* Scrolls target to the specified position
* @param {Object} t - Target wheel jQuery object.
* @param {Number} index - Index of the changed wheel.
* @param {Number} val - Value.
* @param {Number} time - Duration of the animation, optional.
* @param {Number} orig - Original value.
*/
that.scroll = function (t, index, val, time, orig) {