html网页制作教程按钮添加,html – 如何在网页上制作垂直按钮

他们是怎么做到的……

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

自己做…

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

Here is where you would have your form.

?

在这种情况下,.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);

}

});

});