关于jquery.slideunlock.js

[weixin_37700885]

我写一个手机端的页面时用jquery.slideunlock.js写了一个滑块，当滑块拖动完时，滑块内的自发生变化，同时会出现一个遮罩层，遮罩层上有确认和取消的按钮，如果点击确认，则会调用一个函数，点取消则滑块回复到原来的位置，滑块内的字也回到原来，确定的功能已经实现，取消则遇见了问题：用了slider.reset();滑块回到了原来的位置，但是无法再次滑动，求问该如何解决
HTML部分代码：
<!--滑块>
<div id="demo">
<div id="slider">
<div id="slider_bg"></div>
<span id="label">>></span> <span id="labelTip">滑动停止</span>
</div>
</div>
<!--弹框>
<div class="back" id="back"></div>

<div class="myadress" id="myadress">
<div class="mytop"><span>是否确认停止</span></div>
<div class="bottombutton">
<div id="reset-btn">取消</div>
<div class="quren" id="queren">确认</div>
</div>
</div>
css代码如下
/*base*/
html{
font-size:20px;
}
/*滑块*/
#demo {

text-align: left;
}
#slider {
margin: 100px auto;
width: 242px;
height: 40px;
position: relative;
border-radius: 20px;
background-color: #646464;
border:1px solid #A3A2AA;
overflow: hidden;
text-align: center;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}

#slider_bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: -webkit-linear-gradient(left,rgba(29,73,96,0.7),rgba(41,44,51,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(29,73,96,0.7),rgba(41,44,51,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(29,73,96,0.7),rgba(41,44,51,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(29,73,96,0.7), rgba(41,44,51,1)); /* 标准的语法 */
z-index: 1;
}

#label {
width: 46px;
position: absolute;
left: 0;
top: 0;
height: 38px;
line-height: 38px;
border: 1px solid #cccccc;
background: #fff;
z-index: 3;
cursor: move;
color: #becac8;
font-size: 16px;
font-weight: 900;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

#labelTip {
position: absolute;
left: 0;
width: 100%;
height: 100%;
font-size: 18px;
font-family: 'Microsoft Yahei', serif;
color: #fff
text-align: center;
z-index: 2;
line-height: 35px;
}
/*遮罩层*/
.back {
width:100%;
height:100%;
background-color:#000;
position:absolute;
top:0;
left:0;
z-index:2;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display: none;

}
.myadress{
width: 100%;
height:7.4356rem;
border:1px solid #f0f0f0;
background-color:#ffffff;
/* margin:auto;*/
color:#454545;
z-index:3;
/*top:0;*/
bottom: 0;
left: 0;
right: 0;
display: none;
position: absolute;
}
.mytop{
height:3.71825rem;
line-height: 3.71825rem;
font-size:1rem;
border-bottom:1px solid #e1e1e1;
}
.mytop>span{
margin-left:4%;

}
.bottombutton{
width:80%;
margin:auto;
height:11%;
}
.bottombutton>div{
display: inline-block;
width:40%;
height:2rem;
line-height: 2rem;
margin-top:4%;
color:#333;
border-radius:0.4rem;
font-size:1rem;
text-align: center;
border:1px solid #e1e1e1;
border-radius: 0.4rem;

}
.bottombutton>.quren{
background:#0d81ee;
color:#fff;
margin-left:17%;
}
js代码及引用如下
<script src="js/jquery-1.12.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- <script type="text/javascript" src="js/state.js" ></script>-->
<script src="js/jquery.slideunlock.js"></script>

<script>
$(function () {
//滑动成功事件
var slider = new SliderUnlock("#slider",{
successLabelTip : "已停止"
},function(){
$("#myadress").css('display','block');
$("#back").css('display','block');
});
//确认按钮事件
$("#queren").click(function(){
//发送停止的请求
endCharge();
});

slider.init();
//取消按钮事件
$("#reset-btn").click(function(){
slider.reset();
$("#myadress").css('display','none');
$("#back").css('display','none');
});
})
</script>

[cn00439805]

请参见： http://bbs.csdn.net/topics/392142046#post-402205872