日历插件(beta)

仿iphone日历插件(beta)

前言

小伙伴们好，很久不见了。最近工作进入正常期了，所以慢慢的悠闲的时间久没有了，所以不能每天水一篇了。

最近也在听师傅（http://home.cnblogs.com/u/aaronjs/）的教导开始阅读jquery源码了，怎么说呢，阅读的效果其实不是太好。

一来是时间断断续续的没有接上，今天读完明天又忘了，到第三天再读的话，就很多都忘记了；

二来是jquery其实还是有一定难度，加之篇幅也很长，所以读起来还是有一点吃力（我甚至有时候有种想睡的感觉），过了2星期才陆陆续续把core读完，结果很多都无法理解，再加油吧。

反正今年的目标就是把jquery读懂，时间多，不着急了。

时间比较紧未做兼容处理，请使用手机/或者使用chrome开启touch功能查看，后期补上兼容方案，以及修复BUG

关于工作

最近工作上需要在我们的网页上加入一些动画：

① 页面的切入切出的转场动画

② 模仿一个iphone的日历控件

转场动画做的时候其实碰到了很多坑，而且最后做出的效果也一般，因为既有的框架与dom结构已经出来了好久了，改不得，而且就算改了效果也不能保证好，所以暂时放下

这里说的仿iphone日历控件，不如说模仿一个单选框来的实在，而且我这里说是插件，完全就算标题党了，各位可以忽视，所以今日正题吧。

iphone的感觉

第一步我们要找到iphone的感觉，那么iphone是个什么感觉呢：

大概是这么个感觉，但是我做出来却变成了这种感觉，将就着看吧：

总体思路

PS：现在其实正在写功能代码，所以，现在我们是边写边做的，思路乱了各位请包涵

测试代码

这个代码很烂，各位就不要看了，我都不知道怎么写出来的，后面点整理吧，里面的CSS不想写就直接拿别人的用了

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
body,button,input,select,textarea{font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft YaHei",hei;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe{display:block;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
address,cite,dfn,em,var,i{font-style:normal;font-weight:normal;font-family:arial;}
ul,ol{list-style:none}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline;-webkit-transition:color .2s linear;-moz-transition:color .2s linear;-ms-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear;}
fieldset,img,button,input{border:0}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
input[type="button"],input[type="submit"]{-webkit-appearance:none;}
body{min-width:320px; background:#f5f5f5;overflow-x:hidden;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:subpixel-antialiased;-moz-user-select:none;color:#000;}:focus{outline:none;}.clearfix:after{clear:both;content:'.';display:block;height:0;visibility:hidden;line-height:0;}.clearfix{*zoom:1;}.fl{float:left;}.fr{float:right;}.clear{clear:both;}.overflow{overflow:hidden;}.ellips{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.ellips_line2,.ellips_line3{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}.ellips_line2{-webkit-line-clamp:2;}.ellips_line3{-webkit-line-clamp:3;}.pos_rel{position:relative;}
html,body,.h100{ height:100%; }
dfn{color:#ff9913; font-size:12px; font-weight:normal;}
/*-----------------------------------------common--------------------*/
.i,.i_bef:before,.i_aft:after,.carlist li:before,.ok_crt:after{background:url(../img/style1/v2_bgs.png) no-repeat; background-size:175px 125px;}
.i_bef:before,.i_aft:after,.carlist li:before{position: absolute;content: "";}
.abs_size{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.opacity{opacity:0.7; filter:alpha(opacity=70);}

/*active*/
.list_st_border li:active,.p_hinttxt:active,.search_cancel:active,.citylist dd:active{ background:#f8f8f8;}
.btn_yellow:active{background:#eb840f;}

/*layout*/
.wrap{margin-top:48px;}
.wrap_pb{margin-top:48px; padding-bottom:45px;}
.p10{padding:10px;}
.hm{text-align:center;}
.break_all{word-break:break-all;}
.fix_b{position:fixed; bottom:0; left:0;z-index:9999;}

/*font bg color size*/
h1{font:normal 1.286em/1.5 "";}/*18px*/
h2{font:normal 1.143em/1.5 "";}/*16px*/
h3{font:600 1em/1.5 "";}/*14px*/
.price{margin-left:5px;}
.price i{margin-left:2px; font-size:1.286em;}
.greyfont{color:#686868;}
.greyfont1{color:#909090;}
.bggrey{height:100%; background:#f5f5f5;}

/*header*/
header{position:fixed; top:0; left:0; z-index:9999; width:100%; height:48px;background-color:#1491c5;}
.returnico{position:absolute; left:0; top:0; width:68px; height:48px; background-color:#15a4d5;}
.returnico:before{left:25px;top:16px;width:12px;height:20px; background-position:0 0;}
.icon_phone,.icon_home{width:42px;height:100%;top:0;position:relative;float:right;}
.icon_phone:before{width:11px;height:20px;top:16px;right:12px;background-position:-115px -65px;}
.icon_home:before{width:20px;height:19px;top:16px;right:10px;background-position:-83px -66px;}
header i:active{opacity:0.7; filter:alpha(opacity=70);}
header h1{position:absolute; width:100%;line-height:48px; text-align:center; letter-spacing:2px; color: #fff;}
.header_r,.header_rs{position:absolute;z-index:9; top:0; right:0; line-height:48px; padding:0 15px; font-size:18px; background:#15a4d5; color:#fff;}
.header_rs{padding:0 5px; font-size:12px; }

/*background-position*/
.select_n:before{width:20px;height:20px;background-position:-18px 0;}
.select_n.current:before{background-position:-44px 0;}

/*searchbox*/
.search_wrap{overflow:hidden; padding:10px; background:#dfeaf1;}
.search_box{position:relative; float:left; width:100%;}
.search_input{width:100%; padding:0 10px 0 28px; line-height:30px; background-color:#fff; border-radius:4px; color:#ccc;}
.fdj:before,.fdj:after,.search_box:before,.search_box:after{position:absolute; content:""; z-index:9;}
.fdj:before,.search_box:before{left:5px; top:7px; width:12px; height:12px; border:1px solid #bcbcbc; border-radius:12px;}
.fdj:after,.search_box:after{left:19px; top:17px; width:1px; height:8px; background:#bcbcbc;}
.search_cancel{ display:none;float:left; width:20%; line-height:30px; text-align:center; font-size:16px;color:#1491c5; background:none; border:none;}
.close_icon{display:none; position:absolute; z-index:10; top:8px; right:4px; width:16px; height:16px; border-radius:30px; background:#b1b1b1;}
.close_icon:before,.close_icon:after{position:absolute; content:""; top:4px; left:7px; width:2px; height:8px; background:#fff; }
.close_icon:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.fdj:after,.search_box:after,.close_icon:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
.search_focus .search_box{width:80%;}
.search_focus .close_icon, .search_focus .search_cancel{display:block;}
.search_input:focus{color:#000;}

/*tab*/
.tab{ background-color:#f8f8f8; border-bottom:1px solid #dfdfdf;}
.tab li{float:left; width:50%; height:39px; line-height:39px; text-align:center; border-right:1px solid #dfdfdf;}
.tab li:last-child{border-right:none;}
.tab li.tabcrt{ background-color:#dfdfdf;}

.tab_b{ background-color:#f5f5f5; border-bottom:1px solid #c1c1c1;}
.tab_b li{float:left; width:50%; height:39px; line-height:39px; text-align:center;}
.tab_b li:last-child{border-right:none;}
.tab_b li.tabcrt{color:#1491c5; border-bottom:4px solid #1491c5;}

/*list*/
.list_st_border{ background:#fff; border-bottom:none; border:1px solid #cfcfcf; }
.list_st_border li{position:relative;padding:0 10px; line-height:42px; border-bottom:1px solid #cfcfcf;}
.list_st_border li:last-child{border-bottom:none;}

.list_sli{padding:10px; overflow:hidden; border-bottom:1px solid #cfcfcf; background:#fff;}
.list_sli .list_sunit{float:left;}

.citylist{color:#000;}
.citylist dt,.citylist dd{padding-left:10px;border-bottom:1px solid #e2e2e2;}
.citylist dt{line-height:25px; background-color:#eaeaea;}
.citylist dd{position:relative; font-size:16px; line-height:43px; background-color:#fff;}
.citylist .ok_crt{color:#1491c5;}
.citylist .ok_crt:after{position:absolute;content:""; right:10px; top:50%; margin-top:-6px; width:12px; height:13px; background-position:-110px 0;}

/*arr*/
.li_arr_r{position:relative;}
.arr_r{position:absolute;right:0px; top:50%; width:30px; height:30px; margin-top:-15px; }
.arr_r:before,.arr_r:after,.li_arr_r:before,.li_arr_r:after{position: absolute; left:15px; content: "";width:2px; height:7px; background-color:#909090;}
.arr_r:before,.li_arr_r:before{top:10px;-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
.arr_r:after,.li_arr_r:after{top:15px;-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.li_arr_r:before,.li_arr_r:after{left:auto; right:10px; top:50%; margin-top:-5px;}
.li_arr_r:after{margin-top:0;}

/*p*/
.p_grey{margin:10px 5px; font-size:13px; color:#989898;}
.p_grey_center{ text-align:center; margin:20px 5px; font-size:13px; color:#989898;}
.p_hinttxt{padding:20px 10px; text-align:center; font-size:16px; color:#1491c5;}

/*btn*/
.btn_yellow,.btn_del{width:100%; height:44px; line-height:42px; padding:0 10px; color:#fff;}
.btn_yellow{background:#ff9913;}
.btn_del{background:#ca4345;text-align:center;font-size:1.2em;}

.btn_pay{padding:0 20px;height:44px;float:right;background:#ff7d13;color:#fff;}
.btn_pay:active{background:#ff7300;}
.room_num {position:absolute; right:10px; width:100px; height:30px; line-height:30px;color:#000;background-color: #fff; text-align:center;border:#bfbfbf 1px solid;}
.room_num i{position:absolute; width:30px; height:30px; text-align:center; font:normal 2em/28px "Arial";}
.room_num i:first-child{left:0;background:#f4f4f4;color:#d9d9d9;font:normal 2.8em/25px "Arial";}
.room_num i:last-child{right:0;background:#06a2d0;color:#fff;}

/*日历*/
.cui_cldwrap{color:#000;}
.cui_cldweek{height:25px; overflow:hidden;font:normal 12px/24px "verdana";border-bottom:1px solid #c8c8c8;}
.cui_cldweek li{float:left; width:14%; text-align:center; }
.cui_cldweek li:first-child,.cui_cldweek li:last-child{width:15%; color:#acacac;}
.cui_cldmonth{height:35px;text-align:center;font:normal 16px/35px "verdana"; background:#fff;}
.cui_cldunit{margin-bottom:20px;}
.cui_cld_daybox{overflow:hidden; background:#fff;}
.cui_cld_daybox li{float:left; width:14%; height:45px; padding:4px 0; font:normal 12px/45px "verdana"; overflow:hidden; text-align:center;}
.cui_cld_daybox li:nth-child(7n),.cui_cld_daybox li:nth-child(7n+1){width:15%;}
.cui_cld_daypass{ background:#f7f7f7;}
.cui_cld_daycrt{background:#06a2d0; color:#fff;}
.cui_cld_dayfuture{background:#fff;}
.cui_cld_day_nocrtmonth{ visibility:hidden;}
.cui_cld_day_havetxt em{display:block; line-height:25px;}
.cui_cld_day_havetxt i{display:block;line-height:15px;}
.cui_cld_day_hint{color:#06a2d0;}
/*全局XXXX*/

/*弹出蓝色框*/
.cui-pop-box{background:#fff;}
.cui-text-center{text-align:center;}
.cui-pop-box .cui-hd{height:40px;line-height:40px;font-size:1.2em;color:#fff;background:#1491c5;padding:0 10px;position:relative;}
.cui-pop-box .cui-hd .cui-close{position:absolute;top:10px; right:10px; width:18px; height:18px;line-height:18px;border-radius:50%; background:#fff;color:#1491c5;text-align:center;font-weight:bold;}
.cui-error{width:150px;margin:auto;border-radius:5px;background:rgba(73,73,73,1);padding:10px;color:#fff;font-weight:700;text-align:center;word-break:break-all;}
.cui-select-view li{border-bottom:#dfdfdf 1px solid;padding:.8em 2em .8em .8em;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;position:relative;}
.cui-select-view li.current{color:#1084bc;}
.cui-select-view li:active{background:rgba(0,0,0,.05);}
.cui-select-view li.current:before,.cui-select-view li.current:after{position:absolute;content:"";background:#1084bc;height:3px;top:50%;border-radius:3px;}
.cui-select-view li.current:before{width:18px;right:10px;margin-top:-2px;-webkit-transform:rotate(-50deg);-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg);}
.cui-select-view li.current:after{width:9px;right:22px;margin-top:2px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}

.cui-roller{width:100%;height:90px;overflow:hidden;position:relative;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.cui-roller .ul-list{height:100%;text-align:center;font-size:1.1em;line-height:30px;-webkit-box-flex: 1;-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
.cui-mask{position:absolute;z-index:3;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
background: linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
background: -webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(0.52,rgba(245,245,245,0)),color-stop(0.48,rgba(245,245,245,0)),to(#fff));
background: -webkit-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
background: -moz-linear-gradient(#fff 0,rgba(245,245,245,0) 52%,rgba(245,245,245,0) 48%,#fff 100%);
}
.cui-lines{width:100%;height:34px;position:absolute;top:50%;margin-top:-17px;border-top:#dfdfdf 1px solid;border-bottom:#dfdfdf 1px solid;}
.cui-roller-tips{color:#8d8d8d;padding:5px;text-align:center;}
.cui-roller-btns{background:#f6f5f5;padding:10px;text-align:center;}
.cui-roller-btns span{width:45%;display:inline-block;padding:10px 0;color:#fff;}
.cui-roller-btns span:active{opacity:.75;}
.cui-roller-btns .cui-btns-cancel{background:#a9a9a9;margin-right:5%;}
.cui-roller-btns .cui-btns-sure{background:#ff9913;}

</style>
<script src="../zepto.js" type="text/javascript"></script>
</head>

<div class="cui-pop-box">
<div class="cui-hd"><div class="cui-text-center">滚轮滚轮滚轮</div></div>
<div class="cui-bd">
<div class="cui-roller">
<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " >
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
<li>选项7</li>
<li>选项8</li>
<li>选项9</li>
<li>选项10</li>
<li>选项11</li>
<li>选项12</li>
<li>选项13</li>
<li>选项14</li>
<li>选项15</li>
<li>选项16</li>
<li>选项17</li>
<li>选项18</li>
<li>选项19</li>
<li>选项20</li> <li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
<li>选项7</li>
<li>选项8</li>
<li>选项9</li>
<li>选项10</li>
<li>选项11</li>
<li>选项12</li>
<li>选项13</li>
<li>选项14</li>
<li>选项15</li>
<li>选项16</li>
<li>选项17</li>
<li>选项18</li>
<li>选项19</li>
<li>选项20</li>
</ul>

<div class="cui-mask" style=""></div>
<div class="cui-lines"> </div>
</div>
<p class="cui-roller-tips">提示信息</p>
<div class="cui-roller-btns">
<span class="cui-btns-cancel">取消</span><span class="cui-btns-sure">确定</span>
</div>
</div>
</div>

// var myScroll = new iScroll('wl1');

var y1 = 0, y2 = 0;
var moveAble = false;
var dragEl = null;
var parent = $('.cui-roller');
var offset;
var el_top = 0;
var o_top = 0;
var t1 = 0, t2 = 0;
var timer = null;

document.addEventListener("touchstart", touchStart, false);
document.addEventListener("touchend", touchEnd, false);
document.addEventListener("touchmove", touchMove, false);

function touchStart(e) {
t1 = e.timeStamp;
var srcElement = $(e.srcElement), pos;
dragEl = $(e.srcElement).parent();
if (dragEl.hasClass('ul-list')) {
var pos = getMousePos(e.changedTouches[0]);

offset = dragEl.offset();
y1 = pos.top - offset.top;
var top = parseFloat(dragEl.css('top')) || 0;
o_top = top;
y1 = y1 - parseFloat(top);
moveAble = true;
}
}

function touchMove(e) {
if (!dragEl || !moveAble) return false;
var pos = getMousePos(e.changedTouches[0]);
y2 = pos.top - y1 - offset.top;

if (timer) clearTimeout(timer);

el_top = y2;
dragEl.css('top', y2 + 'px');
e.preventDefault();
}

function touchEnd(e) {
t2 = e.timeStamp - t1;
var flag = o_top <= el_top ? 1 : -1;
var flag2 = el_top > 0 ? 1 : -1;

el_top = Math.abs(el_top);
var mod = el_top % 30;
el_top = (parseInt(el_top / 30) * 30 + (mod > 15 ? 30 : 0)) * flag2;
if (t2 >= 200) {
dragEl.animate({
top: el_top + 'px'
}, 100, 'ease-in-out', function () {
if (el_top > 30) {
dragEl.animate({
top: '30px'
}, 10, 'ease-in-out');
}
if (el_top < 0 && (el_top + dragEl[0].scrollHeight < 60)) {
dragEl.animate({
top: '-' + (dragEl[0].scrollHeight - 60) + 'px'
}, 10, 'ease-in-out');
}
});
} else {
var step = parseInt(t2 / 50);
console.log(t2, step);

}
moveAble = false;
}

function getMousePos(event) {
var top, left;
top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
return {
top: top + event.clientY,
left: left + event.clientX
};
};

var s = '';

</script>

</body>
</html>

demo请按照图示观看

http://sandbox.runjs.cn/show/dkf9dkwq

关于iscroll

最开始我们总是喜欢找一些已经存在了的解决方案来试试，这样就比较简单了，但是iscroll有一定问题就是他太大了。

最简单的压缩了都快10k了，所以直接给毙了，这里暂时就用不到他了。

zepto的touch事件

我是一个喜欢偷懒的人，我看着zepto有touch事件，本来想拿来直接用用谁知道。。。

View Code

// Zepto.js
// (c) 2010-2012 Thomas Fuchs
// Zepto.js may be freely distributed under the MIT license.

;(function($){
var touch = {},
touchTimeout, tapTimeout, swipeTimeout,
longTapDelay = 750, longTapTimeout

function parentIfText(node) {
return 'tagName' in node ? node : node.parentNode
}

function swipeDirection(x1, x2, y1, y2) {
var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2)
return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}

function longTap() {
longTapTimeout = null
if (touch.last) {
touch.el.trigger('longTap')
touch = {}
}
}

function cancelLongTap() {
if (longTapTimeout) clearTimeout(longTapTimeout)
longTapTimeout = null
}

function cancelAll() {
if (touchTimeout) clearTimeout(touchTimeout)
if (tapTimeout) clearTimeout(tapTimeout)
if (swipeTimeout) clearTimeout(swipeTimeout)
if (longTapTimeout) clearTimeout(longTapTimeout)
touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
touch = {}
}

$(document).ready(function(){
var now, delta

$(document.body)
.bind('touchstart', function(e){
now = Date.now()
delta = now - (touch.last || now)
touch.el = $(parentIfText(e.touches[0].target))
touchTimeout && clearTimeout(touchTimeout)
touch.x1 = e.touches[0].pageX
touch.y1 = e.touches[0].pageY
if (delta > 0 && delta <= 250) touch.isDoubleTap = true
touch.last = now
longTapTimeout = setTimeout(longTap, longTapDelay)
})
.bind('touchmove', function(e){
cancelLongTap()
touch.x2 = e.touches[0].pageX
touch.y2 = e.touches[0].pageY
if (Math.abs(touch.x1 - touch.x2) > 10)
e.preventDefault()
})
.bind('touchend', function(e){
cancelLongTap()

// swipe
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
(touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

swipeTimeout = setTimeout(function() {
touch.el.trigger('swipe')
touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
touch = {}
}, 0)

// normal tap
else if ('last' in touch)

// delay by one tick so we can cancel the 'tap' event if 'scroll' fires
// ('tap' fires before 'scroll')
tapTimeout = setTimeout(function() {

// trigger universal 'tap' with the option to cancelTouch()
// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
var event = $.Event('tap')
event.cancelTouch = cancelAll
touch.el.trigger(event)

// trigger double tap immediately
if (touch.isDoubleTap) {
touch.el.trigger('doubleTap')
touch = {}
}

// trigger single tap after 250ms of inactivity
else {
touchTimeout = setTimeout(function(){
touchTimeout = null
touch.el.trigger('singleTap')
touch = {}
}, 250)
}

}, 0)

})
.bind('touchcancel', cancelAll)

$(window).bind('scroll', cancelAll)
})

;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){
$.fn[m] = function(callback){ return this.bind(m, callback) }
})
})(Zepto)

这个就是zepto的touch事件，可以看到他只是对touchend有所监控，会触发一点点事件，所以和我们没有一毛钱关系

在此我便认命的自己敲下了以下代码：

1 document.addEventListener("touchstart", touchStart, false);
2 document.addEventListener("touchend", touchEnd, false);
3 document.addEventListener("touchmove", touchMove, false);

鼠标拖动

该功能的第一个技术点，便是元素跟着鼠标移动，拖到哪里就是哪里，这个大家都比较熟悉了，就不多说

touchend

当拖动结束时，我们要做很多后续的工作：

① 让选项进入既定的轨道

② 是否具有动画效果

③ 动画效果的步长等

PS：开始觉得有几个点可以说说，结果真的写出来却无话可说了，哎。。。。。。

经过以上版本，我们的粗制滥造版便出现了，就是以上的代码。

封装

于是我们就可以在这个基础上整理代码，封装起来了，请看下一步。

整理封装

首先，我们虽然写的不是插件，但是还是应该让他有插件的样子，来点简单的修饰吧。

经过一阶段的休整，我们的代码成了这个样子了：

View Code

(function () {
var ScrollRadio = function (opts) {
opts = opts || {};
//容器元素
this.wrapper = opts.wrapper || $(document);
this.body = [
'<div class="cui-roller">',
'<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " >',
'</ul>',
'<div class="cui-mask"></div>',
'<div class="cui-lines"> </div>',
'</div>'
].join('');
this.body = $(this.body);

//真正拖动的元素（现在是ul）
this.dragEl = this.body.find('.ul-list');
//数据源
this.data = opts.data || [];
this._changed = opts.changed || null;
//当前选项索引
this.selectedIndex = 0;
//当前选项值
this.key = '';
//当前选项显示的值
this.value = '';

/*
定位实际需要用到的信息
暂时不考虑水平移动吧
*/
this.itemHeight = 0; //单个item高度
this.dragHeight = 0; //拖动元素高度
this.dragTop = 0; //拖动元素top
this.animateParam = [10, 8, 7, 6, 6, 6, 5, 5, 4, 2, 0]; //动画参数
this.timeGap = 0; //时间间隔
this.touchTime = 0; //开始时间
this.moveAble = false; //是否正在移动
this.moveState = 'up'; //移动状态，up right down left
this.oTop = 0; //拖动前的top值
this.curTop = 0; //当前容器top
this.mouseY = 0; //鼠标第一次点下时相对父容器的位置

this.init();
};
ScrollRadio.prototype = {
constructor: ScrollRadio,
init: function () {
this.initItem();
this.wrapper.append(this.body);
this.initEventParam();
this.bindEvent();

return this;
},
//增加数据
initItem: function () {
var _tmp, _data, i, k;
for (var i in this.data) {
_data = this.data[i]
_tmp = $('<li>' + (_data.val == undefined ? i : _data.val) + '</li>');
_tmp.attr('data-index', i);
for (k in _data) {
_tmp.attr('data-' + k, _data[k]);
}
this.dragEl.append(_tmp);
}
},
//初始化事件需要用到的参数信息
initEventParam: function () {
var offset = this.dragEl.offset();
var itemOffset = this.dragEl.find('li').eq(0).offset();
this.itemHeight = itemOffset.height
this.dragTop = offset.top;
this.dragHeight = this.dragEl[0].scrollHeight;
var s = '';
},
bindEvent: function () {
var scope = this;
document.addEventListener("touchstart", function (e) {
scope.touchStart.call(scope, e);
}, false);
document.addEventListener("touchend", function (e) {
scope.touchEnd.call(scope, e);
}, false);
document.addEventListener("touchmove", function (e) {
scope.touchMove.call(scope, e);
}, false);
},
touchStart: function (e) {
//需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
//！！！！！！！！此处不严谨
var el = $(e.srcElement).parent(), pos;
if (el.hasClass('ul-list')) {
this.touchTime = e.timeStamp;
//获取鼠标信息
pos = this.getMousePos(e.changedTouches[0]);
//注意，此处是相对位置
this.mouseY = pos.top - this.curTop;
this.moveAble = true;
}
},
touchMove: function (e) {
if (!this.moveAble) return false;
var pos = this.getMousePos(e.changedTouches[0]);
//先获取相对容器的位置，在将两个鼠标位置相减
this.curTop = pos.top - this.mouseY;

this.dragEl.css('top', this.curTop + 'px');

e.preventDefault();
},
touchEnd: function (e) {
//时间间隔
var scope = this;
this.timeGap = e.timeStamp - this.touchTime;
var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
this.moveState = flag > 0 ? 'up' : 'down';
var ih = parseFloat(this.itemHeight);
var ih1 = ih / 2;

var top = Math.abs(this.curTop);
var mod = top % ih;
top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;

console.log(this.timeGap, top, increment);

this.oTop = top;
this.curTop = top;
this.moveAble = false;

},
setKey: function (k) {

},
setVal: function (v) { },
setIndex: function (i) {

},
getSelected: function () {

},
getByKey: function (k) { },
getByVal: function (v) { },
getByIndex: function (i) { },

//选项改变时候触发
changed: function () {

},
//获取鼠标信息
getMousePos: function (event) {
var top, left;
top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
return {
top: top + event.clientY,
left: left + event.clientX
};
}

};

window.ScrollRadio = ScrollRadio;

})();

var data = [];
for (var i = 0; i < 100; i++) {
var temp = { val: '选项-' + i };
data.push(temp);
}

var myScroll = new ScrollRadio({
wrapper: $('#ctripPage'),
data: data
});

var s = '';

http://sandbox.runjs.cn/show/biousc1u

其中动画步长可以自己调节，选一个自己认为合适的，下面接着更新。

设置/获取

View Code

/*active*/
.list_st_border li:active,.p_hinttxt:active,.search_cancel:active,.citylist dd:active{ background:#f8f8f8;}
.btn_yellow:active{background:#eb840f;}

/*background-position*/
.select_n:before{width:20px;height:20px;background-position:-18px 0;}
.select_n.current:before{background-position:-44px 0;}

.list_sli{padding:10px; overflow:hidden; border-bottom:1px solid #cfcfcf; background:#fff;}
.list_sli .list_sunit{float:left;}

/*btn*/
.btn_yellow,.btn_del{width:100%; height:44px; line-height:42px; padding:0 10px; color:#fff;}
.btn_yellow{background:#ff9913;}
.btn_del{background:#ca4345;text-align:center;font-size:1.2em;}

</style>

<script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
</head>
<body onselectstart="return false">
<div class="cui-pop-box">
<div class="cui-hd">
<div class="cui-text-center">
滚轮滚轮滚轮</div>
</div>
<div class="cui-bd">
<div id="ctripPage">
</div>
<p class="cui-roller-tips">
提示信息</p>
<div class="cui-roller-btns">
<span class="cui-btns-sure" id="set">设置值</span> <span class="cui-btns-sure" id="get">
获取值</span>
</div>
</div>
</div>
<script type="text/javascript">

// var myScroll = new iScroll('wl1');

(function () {
//！！！由于动画原因，获取值可能会出现不准确的情况，比如正在动画却已经取值了
//所以设置了一个冷却时间，在冷却时间的情况下设置值等操作不能进行
//为了保证唯一性，全部使用index作为索引算了
var ScrollRadio = function (opts) {
opts = opts || {};
//容器元素
this.wrapper = opts.wrapper || $(document);
this.body = [
'<div class="cui-roller">',
'<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " >',
'</ul>',
'<div class="cui-mask"></div>',
'<div class="cui-lines"> </div>',
'</div>'
].join('');
this.body = $(this.body);

//真正拖动的元素（现在是ul）
this.dragEl = this.body.find('.ul-list');
//数据源
this.data = opts.data || [];
this._changed = opts.changed || null;
//当前选项索引默认选择2项
this.selectedIndex = 1;

//当前选项值
// this.key = '';
//当前选项显示的值
// this.value = '';

/*
定位实际需要用到的信息
暂时不考虑水平移动吧
*/
this.itemHeight = 0; //单个item高度
this.dragHeight = 0; //拖动元素高度
this.dragTop = 0; //拖动元素top
this.animateParam = [10, 6, 2, 1, 0, 0, 0, 0, 0, 0, 0]; //动画参数
this.timeGap = 0; //时间间隔
this.touchTime = 0; //开始时间
this.moveAble = false; //是否正在移动
this.moveState = 'up'; //移动状态，up right down left
this.oTop = 0; //拖动前的top值
this.curTop = 0; //当前容器top
this.mouseY = 0; //鼠标第一次点下时相对父容器的位置
this.cooling = false; //是否处于冷却时间

this.init();
};
ScrollRadio.prototype = {
constructor: ScrollRadio,
init: function () {
this.initItem();
this.wrapper.append(this.body);
this.initEventParam();
this.bindEvent();

//需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
//！！！！！！！！此处不严谨
var el = $(e.srcElement).parent(), pos;
if (el.hasClass('ul-list')) {
this.moveAble = true;

this.touchTime = e.timeStamp;
//获取鼠标信息
pos = this.getMousePos(e.changedTouches[0]);
//注意，此处是相对位置，注意该处还与动画有关，所以高度必须动态计算
//可以设置一个冷却时间参数，但想想还是算了
//最后还是使用了冷却时间
// var top = parseFloat(this.dragEl.css('top')) || 0;
// this.mouseY = pos.top - top;
this.mouseY = pos.top - this.curTop;
this.moveAble = true;
}
},
touchMove: function (e) {
if (!this.moveAble) return false;
var pos = this.getMousePos(e.changedTouches[0]);
//先获取相对容器的位置，在将两个鼠标位置相减
this.curTop = pos.top - this.mouseY;
this.dragEl.css('top', this.curTop + 'px');
e.preventDefault();
},
touchEnd: function (e) {
if (!this.moveAble) return false;
this.cooling = true; //开启冷却时间

//时间间隔
var scope = this;
this.timeGap = e.timeStamp - this.touchTime;
var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
this.moveState = flag > 0 ? 'up' : 'down';
var ih = parseFloat(this.itemHeight);
var ih1 = ih / 2;

var top = Math.abs(this.curTop);
var mod = top % ih;
top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;

this.selectedIndex = i;
this.curTop = (i * this.itemHeight * (-1) + this.itemHeight);
this.dragEl.css('top', this.curTop + 'px');
},
getSelected: function () {
return this.data[this.selectedIndex];
},
getByKey: function (k) { },
getByVal: function (v) { },
getByIndex: function (i) { },
//获取鼠标信息
getMousePos: function (event) {
var top, left;
top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
return {
top: top + event.clientY,
left: left + event.clientX
};
}
};
window.ScrollRadio = ScrollRadio;

})();

var data = [];
for (var i = 0; i < 20; i++) {
var temp = { val: '选项-' + i };
data.push(temp);
}

var myScroll = new ScrollRadio({
wrapper: $('#ctripPage'),
data: data
});

$('#set').click(function () {
var i = prompt("请输入索引值")
if (i != null && i != "") {
myScroll.setIndex(i);
}
});

$('#get').click(function () {
var d = myScroll.getSelected();
var str = '';
for (var k in d) {
str += k + ': ' + d[k] + ',';
}
alert(str);
});

var s = '';

</script>
</body>
</html>

我们这里简单看看代码：

  1 (function () {
  2     //！！！由于动画原因，获取值可能会出现不准确的情况，比如正在动画却已经取值了
  3     //所以设置了一个冷却时间，在冷却时间的情况下设置值等操作不能进行
  4     //为了保证唯一性，全部使用index作为索引算了
  5     var ScrollRadio = function (opts) {
  6         opts = opts || {};
  7         //容器元素
  8         this.wrapper = opts.wrapper || $(document);
  9         this.body = [
 10     '<div class="cui-roller">',
 11         '<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2;  " >',
 12         '</ul>',
 13         '<div class="cui-mask"></div>',
 14         '<div class="cui-lines">&nbsp;</div>',
 15     '</div>'
 16 ].join('');
 17         this.body = $(this.body);
 18 
 19         //真正拖动的元素（现在是ul）
 20         this.dragEl = this.body.find('.ul-list');
 21         //数据源
 22         this.data = opts.data || [];
 23         this._changed = opts.changed || null;
 24         //当前选项索引默认选择2项
 25         this.selectedIndex = 1;
 26 
 27         //当前选项值
 28         //                this.key = '';
 29         //当前选项显示的值
 30         //                this.value = '';
 31 
 32         /*
 33         定位实际需要用到的信息
 34         暂时不考虑水平移动吧
 35         */
 36         this.itemHeight = 0; //单个item高度
 37         this.dragHeight = 0; //拖动元素高度
 38         this.dragTop = 0; //拖动元素top
 39         this.animateParam = [10, 6, 2, 1, 0, 0, 0, 0, 0, 0, 0]; //动画参数
 40         this.timeGap = 0; //时间间隔
 41         this.touchTime = 0; //开始时间
 42         this.moveAble = false; //是否正在移动
 43         this.moveState = 'up'; //移动状态，up right down left
 44         this.oTop = 0; //拖动前的top值
 45         this.curTop = 0; //当前容器top
 46         this.mouseY = 0; //鼠标第一次点下时相对父容器的位置
 47         this.cooling = false; //是否处于冷却时间
 48 
 49         this.init();
 50     };
 51     ScrollRadio.prototype = {
 52         constructor: ScrollRadio,
 53         init: function () {
 54             this.initItem();
 55             this.wrapper.append(this.body);
 56             this.initEventParam();
 57             this.bindEvent();
 58 
 59             return this;
 60         },
 61         //增加数据
 62         initItem: function () {
 63             var _tmp, _data, i, k;
 64             for (var i in this.data) {
 65                 _data = this.data[i]
 66                 _tmp = $('<li>' + (_data.val == undefined ? i : _data.val) + '</li>');
 67                 _tmp.attr('data-index', i);
 68                 for (k in _data) {
 69                     _tmp.attr('data-' + k, _data[k]);
 70                 }
 71                 this.dragEl.append(_tmp);
 72             }
 73         },
 74         //初始化事件需要用到的参数信息
 75         initEventParam: function () {
 76             var offset = this.dragEl.offset();
 77             var itemOffset = this.dragEl.find('li').eq(0).offset();
 78             this.itemHeight = itemOffset.height
 79             this.dragTop = offset.top;
 80             this.dragHeight = this.dragEl[0].scrollHeight;
 81             var s = '';
 82         },
 83         bindEvent: function () {
 84             var scope = this;
 85             document.addEventListener("touchstart", function (e) {
 86                 scope.touchStart.call(scope, e);
 87             }, false);
 88             document.addEventListener("touchend", function (e) {
 89                 scope.touchEnd.call(scope, e);
 90             }, false);
 91             document.addEventListener("touchmove", function (e) {
 92                 scope.touchMove.call(scope, e);
 93             }, false);
 94         },
 95         touchStart: function (e) {
 96             if (this.cooling) return false; //冷却时间不能开始
 97 
 98             //需要判断是否是拉取元素，此处需要递归验证，这里暂时不管
 99             //！！！！！！！！此处不严谨
100             var el = $(e.srcElement).parent(), pos;
101             if (el.hasClass('ul-list')) {
102                 this.moveAble = true;
103 
104                 this.touchTime = e.timeStamp;
105                 //获取鼠标信息
106                 pos = this.getMousePos(e.changedTouches[0]);
107                 //注意，此处是相对位置，注意该处还与动画有关，所以高度必须动态计算
108                 //可以设置一个冷却时间参数，但想想还是算了
109                 //最后还是使用了冷却时间
110                 //                        var top = parseFloat(this.dragEl.css('top')) || 0;
111                 //                        this.mouseY = pos.top - top;
112                 this.mouseY = pos.top - this.curTop;
113                 this.moveAble = true;
114             }
115         },
116         touchMove: function (e) {
117             if (!this.moveAble) return false;
118             var pos = this.getMousePos(e.changedTouches[0]);
119             //先获取相对容器的位置，在将两个鼠标位置相减
120             this.curTop = pos.top - this.mouseY;
121             this.dragEl.css('top', this.curTop + 'px');
122             e.preventDefault();
123         },
124         touchEnd: function (e) {
125             if (!this.moveAble) return false;
126             this.cooling = true; //开启冷却时间
127 
128             //时间间隔
129             var scope = this;
130             this.timeGap = e.timeStamp - this.touchTime;
131             var flag = this.oTop <= this.curTop ? 1 : -1; //判断是向上还是向下滚动
132             var flag2 = this.curTop > 0 ? 1 : -1; //这个会影响后面的计算结果
133             this.moveState = flag > 0 ? 'up' : 'down';
134             var ih = parseFloat(this.itemHeight);
135             var ih1 = ih / 2;
136 
137             var top = Math.abs(this.curTop);
138             var mod = top % ih;
139             top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;
140 
141             var step = parseInt(this.timeGap / 50);
142             step = step > 0 ? step : 0;
143             var speed = this.animateParam[step] || 0;
144             var increment = speed * ih * flag
145             top += increment;
146             //！！！此处动画可能导致数据不同步，后期改造需要加入冷却时间
147             if (this.oTop != this.curTop) {
148                 this.dragEl.animate({
149                     top: top + 'px'
150                 }, 100 + (speed * 20), 'ease-out', function () {
151                     var _top = top, t = false; ;
152                     if (top > ih) {
153                         _top = ih;
154                         t = true;
155                     }
156                     if (top < 0 && (top + scope.dragHeight < ih * 2)) {
157                         t = true;
158                         _top = (scope.dragHeight - ih * 2) * (-1);
159                     }
160                     if (t) {
161                         scope.dragEl.animate({
162                             top: _top + 'px'
163                         }, 10, 'ease-in-out', function () {
164                             scope.oTop = _top;
165                             scope.curTop = _top;
166                             scope.cooling = false; //关闭冷却时间
167                             scope.onTouchEnd();
168                         });
169                     } else {
170                         scope.cooling = false; //关闭冷却时间
171                         scope.oTop = top;
172                         scope.curTop = top;
173                         scope.onTouchEnd();
174                     }
175                 });
176             } else {
177                 this.cooling = false; //关闭冷却时间
178                 this.onTouchEnd();
179             }
180             this.moveAble = false;
181         },
182         onTouchEnd: function () {
183             var i = parseInt((this.curTop - this.itemHeight) / parseFloat(this.itemHeight));
184             this.selectedIndex = Math.abs(i);
185             var secItem = this.data[this.selectedIndex];
186             //触发变化事件
187             var changed = this._changed;
188             if (changed && typeof changed == 'function') {
189                 changed.call(this, secItem);
190             }
191             console.log(this.selectedIndex, secItem);
192         },
193         setKey: function (k) { },
194         setVal: function (v) { },
195         setIndex: function (i) {
196             var i = parseInt(i);
197             if (i >= this.data.length || i < 0) return false;
198 
199             this.selectedIndex = i;
200             this.curTop = (i * this.itemHeight * (-1) + this.itemHeight);
201             this.dragEl.css('top', this.curTop + 'px');
202         },
203         getSelected: function () {
204             return this.data[this.selectedIndex];
205         },
206         getByKey: function (k) { },
207         getByVal: function (v) { },
208         getByIndex: function (i) { },
209         //获取鼠标信息
210         getMousePos: function (event) {
211             var top, left;
212             top = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
213             left = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
214             return {
215                 top: top + event.clientY,
216                 left: left + event.clientX
217             };
218         }
219     };
220     window.ScrollRadio = ScrollRadio;
221 
222 })();

以上代码基本框架都出来了，也有注释，有兴趣的朋友自己看看，我们现在进行最后一步了，将日历搞上去，老夫来不起了。。。

日历插件:)

http://sandbox.runjs.cn/show/prii13pm

View Code

/*active*/
.list_st_border li:active,.p_hinttxt:active,.search_cancel:active,.citylist dd:active{ background:#f8f8f8;}
.btn_yellow:active{background:#eb840f;}

/*background-position*/
.select_n:before{width:20px;height:20px;background-position:-18px 0;}
.select_n.current:before{background-position:-44px 0;}

.list_sli{padding:10px; overflow:hidden; border-bottom:1px solid #cfcfcf; background:#fff;}
.list_sli .list_sunit{float:left;}

/*btn*/
.btn_yellow,.btn_del{width:100%; height:44px; line-height:42px; padding:0 10px; color:#fff;}
.btn_yellow{background:#ff9913;}
.btn_del{background:#ca4345;text-align:center;font-size:1.2em;}

</style>
<style type="text/css">
.c { position: absolute; top: 0; }
#y { left: 0; width: 30%; }
#m { left: 30%; right: 40%; }
#d { right: 0; width: 40%; }
</style>
<script src="../zepto.js" type="text/javascript"></script>
</head>
<body onselectstart="return false">
<div class="cui-pop-box">
<div class="cui-hd">
<div class="cui-text-center">
我是日历控件</div>
</div>
<div class="cui-bd">
<div style="height: 90px; position: relative;">
<div id="y" class="c">
</div>
<div id="m" class="c">
</div>
<div id="d" class="c">
</div>
</div>
<p class="cui-roller-tips">
点击获取日期吧！</p>
<div class="cui-roller-btns">
<span class="cui-btns-cancel" id="set">取消</span> <span class="cui-btns-sure" id="get">
获取日期</span>
</div>
</div>
</div>

<script type="text/javascript">

// var myScroll = new iScroll('wl1');

(function () {
//！！！由于动画原因，获取值可能会出现不准确的情况，比如正在动画却已经取值了
//所以设置了一个冷却时间，在冷却时间的情况下设置值等操作不能进行
//为了保证唯一性，全部使用index作为索引算了
var ScrollRadio = function (opts) {
opts = opts || {};
//容器元素
this.wrapper = opts.wrapper || $(document);
var id = new Date().getTime() + Math.random() + 'id';
this.body = [
'<div class="cui-roller">',
'<ul class="ul-list" style=" position: absolute; width: 100%; z-index: 2; " id="' + id + '" >',
'</ul>',
'<div class="cui-mask"></div>',
'<div class="cui-lines"> </div>',
'</div>'
].join('');
this.body = $(this.body);

//当前选项值
// this.key = '';
//当前选项显示的值
// this.value = '';

this.init();
};
ScrollRadio.prototype = {
constructor: ScrollRadio,
init: function () {
this.initItem();
this.wrapper.append(this.body);
this.initEventParam();
this.bindEvent();
},
//增加数据
initItem: function () {
var _tmp, _data, i, k;
for (var i in this.data) {
_data = this.data[i]
_tmp = $('<li>' + (_data.val == undefined ? i : _data.val) + '</li>');
_tmp.attr('data-index', i);
for (k in _data) {
_tmp.attr('data-' + k, _data[k]);
}
this.dragEl.append(_tmp);
}
},
//初始化事件需要用到的参数信息
initEventParam: function () {
var offset = this.dragEl.offset();
var itemOffset = this.dragEl.find('li').eq(0).offset();
this.itemHeight = itemOffset.height
this.dragTop = offset.top;
this.dragHeight = this.dragEl[0].scrollHeight;
var s = '';
},
bindEvent: function () {
var scope = this;
this.dragEl[0].addEventListener("touchstart", function (e) {
scope.touchStart.call(scope, e);
}, false);
this.dragEl[0].addEventListener("touchend", function (e) {
scope.touchEnd.call(scope, e);
}, false);
this.dragEl[0].addEventListener("touchmove", function (e) {
scope.touchMove.call(scope, e);
}, false);
},
touchStart: function (e) {
if (this.cooling) return false; //冷却时间不能开始

var top = Math.abs(this.curTop);
var mod = top % ih;
top = (parseInt(top / ih) * ih + (mod > ih1 ? ih : 0)) * flag2;

})();

var yy = [];
for (var i = 0; i < 150; i++) {
var temp = { val: 1900 + i };
yy.push(temp);
}

var mm = [];
for (var i = 0; i < 12; i++) {
var temp = { val: i > 10 ? i : (0 + '' + i) };
mm.push(temp);
}

var dd = [];
for (var i = 0; i < 31; i++) {
var temp = { val: i > 10 ? i : (0 + '' + i) };
dd.push(temp);
}

var y = new ScrollRadio({
wrapper: $('#y'),
data: yy
});
var m = new ScrollRadio({
wrapper: $('#m'),
data: mm
});
var d = new ScrollRadio({
wrapper: $('#d'),
data: dd
});

$('#get').click(function () {
alert(y.getSelected().val + '-' + m.getSelected().val + '-' + d.getSelected().val);
});

var s = '';

</script>
</body>
</html>

今天时间用多了，老夫有点来不起了，我们下次再完善吧。。。。。。

结语

若是各位觉得有用的话不妨用一用，发现什么BUG请留言，我下次一并更新，BUG应该很多的。

分类: 移动开发

你可能感兴趣的:(插件)

Python爬虫解析工具之xpath使用详解 eqa11 python 爬虫开发语言
文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
ExpRe[25] bash外的其它shell：zsh和fish tritone ExpRe bash linux ubuntu shell
文章目录zsh基础配置实用特性插件`autojump`语法高亮自动补全fish优点缺点时效性本篇撰写时间为2021.12.15，由于计算机技术日新月异，博客中所有内容都有时效和版本限制，具体做法不一定总行得通，链接可能改动失效，各种软件的用法可能有修改。但是其中透露的思想往往是值得学习的。本篇前置：ExpRe[10]Ubuntu[2]准备神秘软件、备份恢复软件https://www.cnblogs
解决Obsidian写笔记中的＜img＞标签无法显示图片的问题全能全知者笔记
Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件仓库
【算法练习】IDEA集成leetcode插件实现快速刷 2401_84102892 2024年程序员学习算法 intellij-idea leetcode
============点击右侧边leetcode->设置->配置地址、用户名、密码、存放目录、文件模板用户名要登录后在账号信息里看模板代码1.codefilename!velocityTool.camelC
使用datepicker和uploadify的冲突解决（IE双击才能打开附件上传对话框） zhanglb12
在开发的过程当中，IE的兼容无疑是我们的一块绊脚石，在我们使用的如期的datepicker插件和使用上传附件的uploadify插件的时候，两者就产生冲突，只要点击过时间的插件，uploadify上传框要双才能打开ie浏览器提示错误Missinginstancedataforthisdatepicker解决方案//if(.browser.msie&&'9.0'===.browser.version
uniapp使用内置地图选择插件，实现地址选择并在地图上标点神夜大侠 Uniapp vue.js uniapp
uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
sublime个人设置 bawangtianzun sublime text 编辑器
如何拥有jiangly蒋老师同款编译器(sublimec++配置竞赛向）_哔哩哔哩_bilibiliSublimeText4的安装教程（新手竞赛向）-知乎(zhihu.com)创建文件自动保存为c++打开SublimeText软件。转到"Tools"（工具）>"Developer"（开发者）>"NewPlugin"（新建插件）。在打开的新文件中，粘贴以下代码：importsublimeimport
vue2实现复制,粘贴功能周bro vue.js javascript 前端
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
idea使用自定义checkstyle.xml配置文件 Gemkey
1.下载插件image.png2.插件安装完后,找到设置中的checkstyle,点击"+",新增自定义规则image.png3.输入描述信息,点击Browse找到对应的文件image.pngimage.png4.可以把active勾上,则使用默认校验规则,点击OK,则可以开始使用自定义规则检测单个文件了image.png
maven-assembly-plugin 打包实例带着二娃去遛弯
1.先在pom.xml文件中添加assembly打包插件org.apache.maven.pluginsmaven-assembly-plugin2.6assembly/assembly.xmlmake-assemblypackagesingle说明:1.需要修改的可能就是descriptors标签下面的打包配置文件目录,指定assembly.xml的路径.2.可以添加多个打包配置文件,进行多种形
访问网站被限制怎么办 Bearjumpingcandy 服务器运维
访问网站被限制的情况下，可以通过以下几种方法来解决：检查是否安装了第三方查询软件或插件：有些第三方软件或插件可能会引起非人为的、高频次的访问系统而被限制访问。可以尝试卸载或禁用这些软件或插件，然后重新尝试访问网站。检查共用公网IP地址内的其他电脑：如果用户电脑所处的共用公网IP地址内的其他电脑存在机器访问行为，多次触发禁止访问规则，就会造成该公网IP地址被禁止访问。可以尝试与网络管理员联系，请求解
UI 自动化的页面对象管理神器 PO-Manager TesterHome
原文由alex发表于TesterHome社区网站，点击原文链接可于作者直接交流。做UI自动化的同学都知道，UI自动化一个难点就是页面元素的变化，让自动化维护成为一个痛点。在此，为了减轻这个痛点，我在基于Page-Object模式的基础上开发了页面对象维护的工具。该工具为vscode的一个插件，可以通过vscode插件市场搜索PO-Manager来下载安装本文中的页面对象库文件基于json.一个元素
Sentinel实时监控不展示问题朱杰jjj sentinel sentinel
问题官方插件Endpoint支持，可以实时统计出SpringBoot的健康状况和请求的调用信息在使用Endpoint特性之前需要在Maven中添加spring-boot-starter-actuator依赖，并在配置中允许Endpoints的访问。SpringBoot1.x中添加配置management.security.enabled=false。暴露的endpoint路径为/sentinelS
服务器状态监控php源码,服务器状态监控_监控Linux服务器网站状态的SHELL脚本温糯米服务器状态监控php源码
摘要腾兴网为您分享:监控Linux服务器网站状态的SHELL脚本，蜗牛集市，同花顺，探客宝，手柄助手等软件知识，以及日期倒计时插件，云南省教育资源公共，rui手机桌面，小屁孩桌面便签，合金装备崛起复仇，朝夕日历，photoshop图像处理软件,一年级学生每日计划表，悟空找房，饿了吗外卖商家版，逃生，中国民宿网，realpolitiks，交通安全知识竞赛，雅思流利说等软件it资讯，欢迎关注腾兴网。1
以太坊DApp开发指南 Kirn
DApp架构设计DApp架构.png如上图，DApp的架构我们可以简单分为以上三种类型：轻钱包模式、重钱包模式和兼容模式。轻钱包模式轻钱包模式下我们需要有一个开放HttpRPC协议的节点与钱包通信，这个节点可以是任意链上的节点。轻钱包通常会作为一个浏览器插件存在，插件在运行时会自动注入Web3框架，DApp可以通过Web3与区块链节点通信。当DApp只是单纯的获取数据时是不需要钱包介入的，但是当D
Hexo框架Ayer主题搭建我的博客 @HZY gitee hexo ayer blog 个人网站
关于Hexoayer主题搭建Blog我的博客链接，欢迎来访:[RainのBlog](https://hzyqaqgitee.gitee.io/raining).https://hzyqaqgitee.gitee.io/raining使用的框架、插件Hexo常用命令页面展示我的博客链接，欢迎来访:RainのBlog.https://hzyqaqgitee.gitee.io/raining使用Hexo
Zotero引文计数插件使用教程齐飞锴Timothea
Zotero引文计数插件使用教程zotero-citationcountsZoteropluginforauto-fetchingcitationcountsfromvarioussources项目地址:https://gitcode.com/gh_mirrors/zo/zotero-citationcounts项目介绍Zotero引文计数插件是由非盈利组织DigitalScholarshipCo
PyCharm配置及使用Git教程_pycharm配置git(2) 2401_84182146 程序员 pycharm git elasticsearch
文章目录1.安装PyCharm2.安装Git3.在PyCharm中配置Git插件4.连接远程仓库5.Clone项目代码6.将本地文件提交到远程仓库6.1gitadd6.2gitcommit6.3gitpush6.4gitpull7.代码回滚8.分支操作8.1新建分支8.2切换分支8.3合并分支
K8S学习笔记02——K8S组件沉淅尘 #Docker #K8S kubernetes
Kubernetes组件一、控制平面组件（ControlPlaneComponents）(1)kube-apiserver(2)etcd(3)kube-scheduler(4)kube-controller-manager(5)cloud-controller-manager二、Node组件1.kubelet2.kube-proxy3.容器运行时（ContainerRuntime）三、插件（Add
elementUI table排序 sortable Artsman 前端开发技术 elementui 前端 javascript 前端框架
使用elementUI做后台程序时非常便利，但有时，插件的用法也会让人头疼。在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过Table的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在Table上监
webpack插件开发必会Tapable web老猴子 webpack 前端 javascript
认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
webpack的插件机制(Tapable) 若梦plus 前端工程化 webpack 前端
webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
vue 生成PDF(A4标准PDF分页) qq_39016177 HTML2Canvas jsPDF 导出 PDF转换 DOM操作
1.先安装两个插件//页面转图片npminstall--savehtml2canvas//图片转PDFnpminstalljspdf--save 2.在需要导出的dom节点增加ref='pdf'例如这是待转换的页面，点击导出点击导出PDF3.定义导出方法handleExport(){ downloadPDF(this.$refs.pdf);},4.在页面导入 import{download
四、webpack4.0 - tapable Razas WEBPACK4 webpack4.0
一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
PostgreSQL进阶教程爱分享的码瑞哥 postgresql
PostgreSQL进阶教程目录事务和并发控制事务事务隔离级别锁高级查询联合查询窗口函数子查询CTE（公用表表达式）数据类型自定义数据类型数组JSON高级索引部分索引表达式索引GIN和GiST索引性能调优查询优化配置优化备份与恢复物理备份逻辑备份扩展与插件PostGISpg_cron集群与高可用StreamingReplicationPatroni事务和并发控制事务事务是一个或多个SQL语句的组合
tapable详解风火一回 webpack tapable webpack 插件制作
tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
前端同学必备：教你如何安装、使用Chrome的vue-devtools插件界忆前端编程 Vue-devtools插件 chrome devtools
I.介绍vue-devtools插件Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。Vue-devtools插件的作用和优势如下：1.调试Vue.js应用程序：Vue-devtools是一个强大的调试工具，可以帮助开发人员正确地调试应用程序
Tapable 信海利世 webpack webpack 前端
一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
Webpack插件核心原理 gogo2027 webpack
引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
深入学习-Gradle-自动化构建技术（五）Gradle-插件架构实现原理剖析- 2401_84002294 2024年程序员学习学习自动化架构
6、AndroidGradlePluginV3.0.0（2017年10月）7、AndroidGradlePluginV2.3.0（2017年2月）三、Gradle构建核心流程解析1、LoadSettings2、Configure3、TaskGraph4、RunTasks5、Finished四、关于Gradle中依赖实现的原理1、通过MethodMissing机制，间接地调用DefaultDepen
web前段跨域nginx代理配置刘正强 nginx cms Web
nginx代理配置可参考server部分 server { listen 80; server_name localhost;
spring学习笔记 caoyong spring
一、概述 a>、核心技术 : IOC与AOP b>、开发为什么需要面向接口而不是实现接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c>、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式)
Eclipse打开workspace提示工作空间不可用 0624chenhong eclipse
做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。解决办法，删掉.fileTableLock文件，重
Javascript 面向对面写法的必要性？一炮送你回车库 JavaScript
现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu
js array对象的迭代方法换个号韩国红果果 array
1.forEach 该方法接受一个函数作为参数，对数组中的每个元素使用该函数 return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型
对Hibernate缓存机制的理解归来朝歌 session 一级缓存对象持久化
在hibernate中session一级缓存机制中，有这么一种情况：问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？通过调试后解决方案如下：对于问题一，如你在数据库里设置了
WebService调用错误合集 darkranger webservice
Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错，一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可
JSP和Servlet的中文乱码处理 aijuans Java Web
JSP和Servlet的中文乱码处理前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。一、表单提交时出现乱码：在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以
面试经典六问 atongyeye 工作面试
题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。我的回答：(针对技术面试回答，如果是人事面试，可以就掌
contentResolver.query()参数详解百合不是茶 android query()详解
收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java] view plain copy public void fetchAllContacts() {
ora-00054:resource busy and acquire with nowait specified解决方法 bijian1013 oracle 数据库 kill nowait
当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句
web 开发乱码征客丶 spring Web
以下前端都是 utf-8 字符集编码一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中；乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding="UTF-8"； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，
【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式 bit1129 spark
Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源准备源数据 {"name":"Jack", "age": 12, "addr":{"city":"beijing&
JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss BlueSkator -Xss -Xmn -Xms -Xmx
堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx355
jqGrid 各种参数详解(转帖) BreakingBad jqGrid
jqGrid 各种参数详解分类：源代码分享个人随笔请勿参考解决开发问题 2012-05-09 20:29 84282人阅读评论(22) 收藏举报 jquery 服务器 parameters function ajax string
读《研磨设计模式》-代码笔记-代理模式-Proxy bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面
应用升级iOS8中遇到的一些问题 chenhbc ios8 升级iOS8
1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated 中写的，最终的解决办法是把判断写在 -(void
工作流与自组织的关系？ comsci 设计模式工作
目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？这里有篇论文，摘要是：“针对网格中的服务
Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX daizj oracle
insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一
二叉树:堆 dieslrae 二叉树
这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单: 一个节点的父节点下标为: (当前下标 - 1)/2 一个节点的左节点下标为: 当前下标 * 2 + 1 &
C语言学习八结构体 dcj3sjt126com c
为什么需要结构体，看代码 # include <stdio.h> struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,
centos安装golang dcj3sjt126com centos
#在国内镜像下载二进制包 wget -c http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz #把golang的bin目录加入全局环境变量 cat >>/etc/profile<
10.性能优化-监控-MySQL慢查询 frank1234 性能优化 MySQL慢查询
1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn
Java父类取得子类类名 happyqing java this 父类子类类名
在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！ package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao<T> { public void
Spring3.2新注解@ControllerAdvice jinnianshilongnian @Controller
@ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现： @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co
Java spring mvc多数据源配置 liuxihope spring
转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 <bean id="dataSourceA" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close&quo
第12章 Ajax（下） onestopweb Ajax
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
BW / Universe Mappings blueoxygen BO
BW Element OLAP Universe Element Cube Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi
Java开发熟手该当心的11个错误 tomcat_oracle java 多线程工作单元测试
#1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目可以在属性文件中配置，那么使它成为
推行国产操作系统的优劣 yananay windows linux 国产操作系统
最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交