Зміна ширини кнопки в jquery

Я намагаюсь змінити ширину кнопки, щоб відповідати ширині текстового поля над ним у jquery. Я спробував виконати це, використовуючи наступну лінію:

$("#myButton").css("width", $("#textbox").width());

У наведеному нижче коді:

JSFiddle

JQuery:

$('#tabs').tabs();
$("#myButton").css("width", $("#textbox").width());

HTML:

<div id="tabs">
    
    <div id="tabs-1" class="buttons" class="ui-widget">
    </div>
    <div id="tabs-2">
        <table>
            <tr>
                <td>
                    <input type="text" id="textbox" />
                </td>
            </tr>
            <tr>
                <td>
                    <button id="myButton">My Button
                    </button>
                </td>
            </tr>
        </table>
    </div> 
</div>

Я вважаю, що оскільки я використовую вкладки, ширина текстового поля не відразу доступна.

4

8 Відповіді

Отримайте ширину перед використанням .tabs :

var width = $("#textbox").width();
$('#tabs').tabs();
$("#myButton").css("width", width);

Demo: http://jsfiddle.net/4EfAJ/12/

4
додано
Погоджено, це також повинна бути прийнятою відповіддю.
додано Автор webnoob, джерело
Це краще рішення, ніж моє, +1.
додано Автор Rory McCrossan, джерело

Проблема полягає в тому, що текстова скринька прихована (на вкладці, яка не відображається), тому її ширина не може бути розрахована. Робота навколо полягає в тому, щоб клонувати елемент, додати його, потім отримати його ширину та, нарешті, видалити його з DOM.

$('#tabs').tabs();
var $textboxClone = $('#textbox').clone().appendTo('#tabs');
$("#myButton").css("width", $textboxClone.width());
$textboxClone.remove();

оновлена ​​скрипка

Примітка; незначна різниця в ширині тут пов'язана з розширенням та/або різницею маржі, які я дозволю вам вирішити в CSS.

4
додано

You can set the width once you click on the tab containing the form. See here: http://jsfiddle.net/4EfAJ/16/

$('#tabs').tabs();
$("#productTab").on("click",function() {
    $("#myButton").css("width", $("#textbox").width());
});
2
додано

Спробуйте змінити ширину кнопки, коли її вкладка видно, а не раніше:

 $('#tabs').tabs({
  activate: function(event, ui){
    if (ui.newTab.index() == 1){
        $("#myButton").css("width", $("#textbox").width() );
    }
  }
});
0
додано

Будьте більш гнучкими, просто призначте ширину кнопки. Не боїться, якщо він видно чи ні.

#textbox {
  width: 250px
}

Якщо ви можете вирішити проблему за допомогою css, завжди обирайте цей спосіб перед початком JavaScript.

0
додано

спробуйте це спочатку:

<input type="text" id="textbox" **style="width:300px"** />

потім

$("#myButton").css({width:$("#textbox").width()+"px"});

Сподіваюся, це призводить до певного рішення

0
додано
Чи радимо ви використовувати вбудовані стилі? Бігає дуже близько до -1 для цього;)
додано Автор Rory McCrossan, джерело

Я думаю, що це має працювати

$("#myButton").css("width", $("#textbox").css("width"));
0
додано
Це фактично не відрізняється від того, що вже існує ОП, що не працює.
додано Автор Rory McCrossan, джерело

$ ("# textbox") невидимий на завантаженій сторінці часу, тому ви не можете отримати його width . Спробуйте помістити ці матеріали на першу вкладку. або змінити розмір width , коли другий активний

0
додано