我想重新定位我的滑动接触窗体。我在网上看到过一个教程。但它位于右侧。单击时它向左滑动..
这是 DEMO教程的
所以我不想将它放在右侧.. 我想重新定位在屏幕的右下角。而不是向左滑动..单击按钮时它将向上滑动。我还不是很擅长 jQuery。帮助
代码如下:
HTML:::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Feedback Form Demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- Files For mRova Feedback Form [Dependency: jQuery] -->
<script src="mrova-feedback-form.js" type="text/javascript"></script>
<link rel="stylesheet" href="mrova-feedback-form.css" type="text/css"/>
<!-- END -->
<!-- Just For Demo -->
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #f2f2f2;
font-family: helvetica, arial, tahoma, verdana, sans-serif;
}
h1 {
text-align: center;
margin-top: 40px;
color: #333;
}
</style>
<!-- END -->
</head>
<body>
<h1>Free Feedback Form</h1>
<!--Feedback Form HTML START -->
<div id="mrova-feedback">
<div id="mrova-contact-thankyou" style="display: none;"> Thank you. We'hv received your feedback. </div>
<div id="mrova-form">
<form id="mrova-contactform" action="#" method="post">
<ul >
<li>
<label for="mrova-name">Your Name*</label>
<input type="text" name="mrova-name" class="required" id="mrova-name" value="">
</li>
<li>
<label for="mrova-email">Email*</label>
<input type="text" name="mrova-email" class="required" id="mrova-email" value="">
</li>
<li>
<label for="mrova-message">Message*</label>
<textarea class="required" id="mrova-message" name="mrova-message" rows="8" cols="30"></textarea>
</li>
</ul>
<input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
</form>
</div>
<div id="mrova-img-control"></div>
</div>
<!-- Feedback Form HTML END -->
</body>
</html>
CSS::
label {
display: block;
padding-bottom: 5px;
margin-top: 20px;
}
#mrova-feedback {
display: hidden;
width: 420px;
position: fixed;
right: -462px;
border: 1px solid #3cb58c;
padding: 8px 20px;
background-color: #fff;
}
#mrova-contactform ul {
margin: 0;
padding: 0;
}
#mrova-contactform input, #mrova-contactform textarea {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}
#mrova-contactform ul li {
list-style: none;
padding-bottom: 20px;
}
#mrova-img-control {
cursor: pointer;
position: absolute;
left: -52px;
width: 52px;
background: transparent url('feedback_buttons/feedback.jpg');
height: 168px;
}
#mrova-contactform #mrova-sendbutton {
width: 60px;
background: #db4f4a;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border: none;
}
JS:::
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
});
};
$.fn.toggleClick = function(){
var functions = arguments ;
return this.click(function(){
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length ;
$(this).data('iteration', iteration);
});
};
})(jQuery);
$(window).load(function() {
//cache
$img_control = $("#mrova-img-control");
$mrova_feedback = $('#mrova-feedback');
$mrova_contactform = $('#mrova-contactform');
//setback to block state and vertical align to center
$mrova_feedback.vAlign()
.css({'display':'block','height':$mrova_feedback.outerHeight()});
//Aligning feedback button to center with the parent div
$img_control.vAlign()
//animate the form
.toggleClick(function(){
$mrova_feedback.animate({'right':'-2px'},1000);
}, function(){
$mrova_feedback.animate({'right':'-'+$mrova_feedback.outerWidth()},1000);
});
//Form handling
$('#mrova-sendbutton').click( function() {
var url = 'send.php';
var error = 0;
$('.required', $mrova_contactform).each(function(i) {
if($(this).val() === '') {
error++;
}
});
// each
if(error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
$str = $mrova_contactform.serialize();
//submit the form
$.ajax({
type : "GET",
url : url,
data : $str,
success : function(data) {
if(data == 'success') {
// show thank you
$('#mrova-contact-thankyou').show();
$mrova_contactform.hide();
} else {
alert('Unable to send your message. Please try again.');
}
}
});
//$.ajax
}
return false;
});
});
最佳答案
这对我有用: 在你的 CSS 文件中:
#mrova-feedback {
display: hidden;
width: 420px;
position: fixed;
left: -462px;
border: 1px solid #3cb58c;
padding: 8px 20px;
background-color: #fff;
}
#mrova-img-control {
cursor: pointer;
position: absolute;
right: -52px;
width: 52px;
background: transparent url('feedback_buttons/feedback.jpg');
height: 168px;
}
基本上就是右换左，基本...
在你的js文件中:
$img_control.vAlign()
//animate the form
.toggleClick(function(){
$mrova_feedback.animate({'left':'-2px'},1000);
}, function(){
$mrova_feedback.animate({'left':'-'+$mrova_feedback.outerWidth()},1000);
});
关于javascript - 滑动接触形式重新定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18870737/