Question

我尝试创建一个简单的按钮，按下该按钮时，将输入扩展到其左侧并更改为表单。我想尽可能使用jQuery和Bootstrap 3。

它就像一个按钮，上面写着时事通讯：（我的是右拉和橙色，如果重要的话）

<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：所以我能够用我的表单元素替换button元素，如果我专注于输入框，我可以进行转换，但由于某种原因链接.focus（）jquery更新后没有关注它。此外，我希望盒子在可能的情况下一旦展开就保持新的尺寸，即使他们选择了它。

Answer 1

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

看看JQuery Effects page，了解它可以开箱即用的一些漂亮的东西。 JQuery UI还有一些与常见设计模式相对应的元素，您可能会将其视为jQuery与Bootstrap提供的等效（在JavaScript中）（在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);

按钮单击切换Div以更改输入宽度并使用转换

1 个答案: