如何在网页上制作垂直按钮

Question

有人可以解释如何编写foursquare.com上看到的反馈按钮吗？它是网页侧面的垂直按钮,它会打开一个新窗口并使背景变暗.我也在其他一些网站上看过这个.提前致谢.

Answer 1

他们是怎么做到的......

该按钮通过http://getsatisfaction.com服务提供.此服务类似于http://sharethis.com等其他服务,可以最大限度地减少创建全面网站所需的编程.基本上你设置了一个帐户(我假设...),它们为你提供了一个javascript代码块,你在项目中包含这个代码块,这会导致你的网站上出现垂直按钮.

自己做...

做你自己并不困难.我快速编写了一个jQuery示例.假设我们有以下标记:

<div id="feedback">
  <p>Here is where you would have your form.</p>
  <div class="toggler">?</div>
</div>

.toggler在这种情况下将是我们的按钮.我们希望将它放在带有一些css的反馈框之外,并且还将反馈框放在一些css中:

#feedback { position:absolute; left:0; width:200px; padding:10px; 
            background:red; color:white; }
.toggler  { width:25px; height:50%; color:white; background:blue; 
            text-align:center; position:absolute; top:25%; 
            right:-25px; cursor:pointer }

这可以清理一下.但是现在我们有了我们的元素,我们可以用jQuery添加一些toggle-logic:

$(function(){
  // When the user clicks on .toggler
  $(".toggler").click(function(e){
    // Get a reference to our feedback box
    var feedback = $("#feedback");
    // If it's in the process of being opened (or is opened)
    if ( $(feedback).hasClass("opened") ) {
      // Close it
      $(feedback)
        .removeClass("opened")
        .animate({"left":0}, 1000);
    } else {
      // Else, Open it
      $(feedback)
        .addClass("opened")
        .animate({"left":-$(feedback).outerWidth()}, 1000);
    }
  });
});

在线演示:http://jsbin.com/iyenu4