按鈕單擊切換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來更改和使用輸入寬度的轉換

回答

相關問題