9

ruby on rails と twitter ブートストラップは初めてです。私の質問が愚かに聞こえる場合は、私の謝罪を受け入れてください。サイトのデザインに Twitter ブートストラップを使用しています。ハイパーリンクボタンのクリックを使用して、ブートストラップを使用してラベルをテキストボックスに変更しようとしています。

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <div class="controls">
        <a href="#">Edit</a>
    </div>

jqueryを使用するか、ブートストラップを使用する必要があります。正しい方向に向けてください。前もって感謝します

編集 コードはハイパーリンクで更新されます (ボタンでもかまいません)。「編集」ハイパーリンクをクリックすると、ラベルには、ブートストラップのプレースホルダー属性を使用して使用できるコンテンツ「Saghir」が表示されます。フォームを送信して値をデータベースに更新できます。

4

5 に答える 5

15

それにはjQueryが必要だと思います。これを試して ：

$('#edit').click(function() {
 var text = $('.text-info').text();
 var input = $('<input id="attribute" type="text" value="' + text + '" />')
 $('.text-info').text('').append(input);
 input.select();

 input.blur(function() {
   var text = $('#attribute').val();
   $('#attribute').parent().text(text);
   $('#attribute').remove();
 });
});
.control-label .text-info { display:inline-block; }
 
<label for="name" class="control-label"><p class="text-info">Saghir</p><i class="icon-star"></i></label>
<div class="controls">
   <a href="#" id="edit" class="btn">Edit</a>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

アップデート

ラベルを入力に変更し、ラベルのテキストを入力のプレースホルダーに入れたい場合は、これを試してください

$('#edit').click(function() {
 var text = $('.text-info').text();
 var input = $('<input type="text" placeholder="' + text + '" />')
 $('.text-info').text('').append(input);
});
.control-label .text-info { display:inline-block; }
<label for="name" class="control-label"><p class="text-info">Saghir</p><i class="icon-star"></i></label>
<div class="controls">
   <a href="#" id="edit" class="btn">Edit</a>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

jsfiddle jsfiddle 2

于 2013-05-28T13:28:11.023 に答える
13

Chris が言ったように、Bootstrapこれはフロントエンド フレームワークであるため、この機能は提供されません。これを達成するために使用できますjQuery。ただし、必要な要素のみを選択していることを確認するために、いくつかのカスタム ID またはクラスを要素に追加する必要があります。次のようなことができます。

HTML

<div class="control-group">
    <label for="name" class="control-label">
        <p class="text-info">Saghir<i class="icon-star"></i></p>
    </label>
    <input type="text" class="edit-input" />
    <div class="controls">
        <a class="edit" href="#">Edit</a>
    </div>
</div>

jQuery

$(document).ready(function() {
    $('a.edit').click(function () {
        var dad = $(this).parent().parent();
        dad.find('label').hide();
        dad.find('input[type="text"]').show().focus();
    });

    $('input[type=text]').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find('label').show();
    });
});

CSS

.edit-input {
    display:none;
}

参考までに、実際に動作するJSFiddleを次に示します。

于 2013-05-28T13:14:34.983 に答える
2

非表示の入力を使用する

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <input type="text" class="input-medium" style="display:none;">
    <div class="controls">
        <a href="#" onclick="edit(this);">Edit</a>
    </div>
</div>

ユーザーが [編集] をクリックすると、(Saghir などの) テキストを取得しtext-info、ラベルを非表示にし、入力を表示して、入力のプレースホルダー属性を設定します。

function edit(element) {
    var parent=$(element).parent().parent();
    var placeholder=$(parent).find('.text-info').text();
    //hide label
    $(parent).find('label').hide();
    //show input, set placeholder
    var input=$(parent).find('input[type="text"]');
    $(input).show();
    $(input).attr('placeholder', placeholder);
}

作業フィドル: http://jsfiddle.net/TKW74/

于 2013-05-28T13:24:19.737 に答える