javascript - 滑动接触形式重新定位-6ren

javascript - 滑动接触形式重新定位

转载作者：行者123 更新时间：2023-11-28 12:20:52

25

4

我想重新定位我的滑动接触窗体。我在网上看到过一个教程。但它位于右侧。单击时它向左滑动..

这是 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/

25

4

0

文章推荐： php - 如何将 CSS 更改为同一个类但另一个输入名称

文章推荐： css - 使 div 向左延伸到无穷大

文章推荐： swift - UIRefreshControl 不清除 TableView

android - 即使应用程序关闭(滑动/滑动)也会收到 GCM 通知
这是在我的 MainActivity 中用作 BroadcastReceiver 的代码 mRegistrationBroadcastReceiver = new BroadcastRecei
JQuery - 滑动
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
iphone - 滑动 UISearchBar
我想在大部分时间隐藏 UISearchBar，只在用户需要时调用它来显示。我在 Interface Builder 中放置了一个 UISearchBar 并将其隐藏在 View 后面，当用户单击按钮
cocoa - 滑动 CCMenu
我有一个包含 CCMenuItemImage 的菜单(“myMenu”)。我希望此菜单能够检测手指滑动并相应地滑动。我的问题是 CCMenuItemImage 似乎吸收了触摸事件。当用户触摸 CCM
javascript - 滑动/跟随导航菜单
我正在寻找一个简单的 jQuery 或 Javascript 解决方案，以使导航侧边栏在用户向下滚动页面时顺利跟随用户。像这里一样:http://ucon-acrobatics.com/shop/ 任
ListView 滑动/滑动动画
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
java Tokenizer 滑动
我想将 String 行标记化为标记(存储到 String 表中)，并且我只能使用 java.io.*它是为了实现一个计算器。例如:第一行:1+2+3第二行:1+ 2*3(标记之间有空格) 进入表{
ListView 滑动/滑动动画
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
jquery - 在两个导航栏中切换/滑动
我有一个导航栏，当单击菜单图标时，它将滑入“#secondary-nav”并隐藏“#primary-nav”。然而 jquery 似乎没有显示“#secondary-menu”。下面提供的是 HTMl
iOS 滑动 UITableView
这个问题已经有答案了: how to make a sliding up panel like the Google Maps app? (2 个回答) 已关闭 7 年前。我正在寻找类似的实现，如下
android - ViewPager 滑动
我有 ViewPager(Slide) 和 3 张图片。共有三个图像是通过 Internet 下载的。如果我将图片换到服务器上的另一台服务器上，链接保持不变，但应用程序中的图片没有改变，仍然是缓存中的
android - 在不抬起手指的情况下检测触摸的项目改变(滑动)
我在 gridview 中创建了两个按钮。我想达到以下目的，但不知道应该用什么方法？首先我触摸第一个按钮，将显示 toast 1 msg。通过将我的手指滑到第二个按钮而不抬起我的手指，将显示 to
jquery 滑动/计时问题
所以我设置了一个小的 jquery 动画，用户将鼠标悬停在容器上一段时间，这会导致容器 split ，然后显示内部信息。我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动
javascript - 如何将鼠标选择默认效果转换为在网站中滚动/滑动？
这个问题在这里已经有了答案: Simulate swipe with mouse in javascript (5 个答案) 关闭 7 年前。
python - 滑动 Sprite
我希望我的 Sprite 像在冰上一样滑动。因此，如果他在地面上，那么他可以正常行走，但当他接触冰时，他会滑动，直到有东西阻止他。有谁知道如何才能做到这一点？谢谢最佳答案像“Sprite Move
JavaScript 滑动、文本消失和居中修复
我的代码有几个问题:HTML: Bellevue
Android - 滑动 fragment
我正在尝试实现从 fragment1 过渡到 fragment2 的滑动动画。我正在使用 setCustomAnimations 方法。而且我知道我需要使用框架方法来替换 fragment 。我的代
Android 滑动 View ？
我不知道你们是否听说过 app chomp，但应用程序中有一个布局，如下图所示。我想知道他们是如何设置的，我将如何使用它来为我自己的应用程序制作类似的东西。有趣的是，当你滑动时，没有像水平 Scrol
ios - UICollectionView 滑动
我想检测用户何时在一个单元格占据整个屏幕宽度的 collectionView 中向左或向右滑动。是否可以不添加手势识别器。我试过添加手势识别器，但只有当我们将 collectionView 的 scr
mongodb - 滑动/匹配的后端如何在基于滑动的应用程序中工作？
我正在尝试开发一个应用程序来复制类似 tinder 的基于滑动的提要。该应用程序的想法与火种非常相似，也具有向右滑动和向左滑动匹配功能。到目前为止我做了什么-我在 MongoDB 中创建了一个刷卡集

首页

博学

6Ren·AI

商城

javascript - 滑动接触形式重新定位