按钮单击切换Div来更改和使用输入宽度的转换

我试图创建一个简单的按钮，当按下时，将其左侧的输入展开并更改为窗体。如果可能，我只想使用jQuery和Bootstrap 3。按钮单击切换Div来更改和使用输入宽度的转换

它仅仅是这样的一个按钮，说通讯：（我的是右拉和橙色如果它的事项）

<a href="#" class="btn btn-lg btn-warning pull-right"><span class="glyphicon glyphicon-envelope"></span> News Letter</a>

，并按下按钮时，我想它过渡到一个输入字段并提交他们的电子邮件：

<form class="form-inline"> 
<div class="input-group"> 
    <input type="text" class="form-control input-lg" placeholder="enter your email"> 
    <span class="input-group-btn"> 
     <button type="submit" class="btn btn-lg btn-warning">Submit <span class="glyphicon glyphicon-envelope"></span> 
     </button> 
    </span> 
</div> 
</form>

如果可能的话，我想它有一个，5S过渡效果，当它做它。

这里是一个jsfiddle并排按钮和输入+按钮。 http://jsfiddle.net/Aa7S9/4/

编辑：我把在改变DOM jQuery的。我以前不想把它放在那里，因为我担心这可能是完全错误的做法。它只是使用.ReplaceWith（）函数，所以我不知道如何实现转换。编辑2：所以我能够将它替换为我的表单元素的按钮元素，如果我专注于输入框我可以获得转换发生，但由于某种原因链接在.focus（）之后，jQuery的更新不会集中它。此外，如果可能的话，我希望箱子在展开后保持新的尺寸，即使他们选择了它。

来源

2014-03-18 Evan Morrison

我不认为你会得到很多的帮助，除非你真的显示一些你试图写自己的Javascript。 – ifightcrime

你需要告诉我们你已经尝试过自己，所以我们可以帮助你。 Stackoverflow是为了帮助编程，而不是要求其他人为你做。 ;） – Morgan

我绝不是JavaScript或JQuery专家，但这里是一个答案的尝试，因为没有人似乎帮助过你。

查看JQuery Effects page，了解一些可以开箱即可完成的漂亮事情。也有一些与常见设计模式相对应的元素，您可能认为这些元素是jQuery等同于（在JavaScript中）Bootstrap提供的内容（在CSS中）。

我更新了your Fiddle，带来了非常糟糕的滑动效果，所以你可以得到这个想法。我相信一旦你掌握了它，你可以做得比我做得更好。这里是JavaScript的细分：

/* We make JQuery objects out of the main pieces */ 
var div_container = $('<div clas="input-group"></div>'); 
var input_text = $('<input type="text" class="pull-right form-control input-lg" id="transition">'); 
var button = $('<span class="input-group-btn"><button type="submit" class="btn btn-lg btnwarning">Submit <span class="glyphicon glyphicon-envelope"></span></button></span>'); 
/* stick them together */ 
div_container.append(input_text); 
div_container.append(button); 
/* and stash them in preparation for the effect */ 
div_container.hide().insertAfter($(this).parent()); 
/* animate out the button that was clicked (2000ms=2 seconds of animation)*/ 
$(this).slideUp(2000); 
/* and reveal our new content behind it */ 
div_container.slideDown(2000);

来源

2014-03-19 01:13:06

按钮单击切换Div来更改和使用输入宽度的转换

回答

相关问题