JQuery UI幻燈片效果創建一個新行

我想在我的web應用程序中啓用一個效果，在該應用程序中，用戶單擊「編輯」圖標並且文本框水平地立即滑出圖標右側。目前它正在滑出，但不是非常優雅，因爲當我點擊圖標出於某種原因時，在我點擊的瀏覽器（以及下面的所有內容都被撞下）中創建了一個新行。文本框滑出，然後奇怪地跳回到我最初希望它去的地方，並且創建的新行消失。JQuery UI幻燈片效果創建一個新行

但是，請注意，如果我將文本框放在自己的行上，以便它完全左對齊頁邊距，它就可以正常工作。但我想讓它滾動到圖標的右側。

此行爲對於IE8和Firefox是相同的。

下面是HTML：

<img src="../images/edit.gif" onclick="toggleNotebox()" style="cursor:pointer"/> 
<span id="AddText" style="display:none"> 
    <input name="AddNoteText" id="TextBox" onkeypress="return addNote(event);" /> 
</span>

這裏是相關的Javascript：

function toggleNotebox() { 
    var options = {}; 
    $('#AddText').toggle('slide', options, 500); 
}

這裏是jsbin.com網址看到這種行爲在行動：http://jsbin.com/alopu/edit

來源

2009-08-18 ep4169

在您關心的所有瀏覽器中是否一致？你能舉一個例子http://jsbin.com/？ – 2009-08-18 16:12:40

是的，是的。請參閱上面的編輯。 – ep4169 2009-08-18 16:43:47

嘗試把一個浮動：留在兩個元素上。

http://jsbin.com/uzoqo

編輯：由於某種原因，上述工程，但如果你嘗試編輯它，它不顯示我的修改代碼。不知道發生了什麼事。

來源

2009-08-18 16:52:13 Samuel

你也可以在你的標記中丟失「onClick」，並在'document.ready'函數中設置'toggle（）'函數 – Jason 2009-08-18 16:57:14

這可以工作。僅供參考，我還在圖標左側添加了一些其他元素，所以我必須爲每一個添加一個float：left，但最終我得到了我想要的。 – ep4169 2009-08-18 17:52:05

默認情況下，跨度和輸入的內聯元素不符合顯式寬度。所以jQuery要麼改變動畫元素的顯示來阻止，要麼將其包裝在一個塊元素中，以便該元素可以被動畫化。

這就是塞繆爾改變作品的原因 - 浮動元素的寬度。

來源

2009-08-18 16:54:28

JQuery UI幻燈片效果創建一個新行

回答

相關問題