9

我是 ruby​​ on rails 和 twitter bootstrap 的新手。如果我的问题听起来很愚蠢，请接受我的道歉。我正在使用 twitter bootstrap 进行网站设计。我一直在尝试使用引导程序通过单击超链接按钮将我的标签更改为文本框。

<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 回答
3

我知道这是一个老问题，但只是在 Saghirs 答案中添加了更新选项，

http://jsfiddle.net/integerz/k3p4vhnb/ 

    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"]');
        var edit = $(parent).find('.controls-edit');
        var update = $(parent).find('.controls-update');
        $(input).show();
        $(edit).hide();
        $(update).show();
        //$(input).attr('placeholder', placeholder);
    }

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

这将使用户能够回到正常模式。Ajax 更新调用也可以在更新函数上触发。

于 2015-11-19T14:17:39.397 回答
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>

当用户单击“编辑”时，从text-info（例如 Saghir）获取文本，隐藏标签，显示输入并设置输入占位符属性。

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 回答
2

我对 Amyth 的回答稍加摆弄。这只是让您单击文本进行编辑。您只需向任何文本元素添加一个类即可启用该功能。Enter 键更新文本。在输入外部单击以中止。

HTML：

<span class="edit-on-click">Click to edit</span>

JS：

$(document).ready(function() {
  $('.edit-on-click').click(function() {
    var $text = $(this),
      $input = $('<input type="text" />')

    $text.hide()
      .after($input);

    $input.val($text.html()).show().focus()
      .keypress(function(e) {
        var key = e.which
        if (key == 13) // enter key
        {
          $input.hide();
          $text.html($input.val())
            .show();
          return false;
        }
      })
      .focusout(function() {
        $input.hide();
        $text.show();
      })
  });
});

JSFiddle

更新（实现 AJAX 更新 db 值）：

以下是我在实践中最终使用它的方式：它使用原始元素上的数据属性来更新 ajax 请求中的 id、model 和 field。（这是来自使用 Bootstrap 的 Django 应用程序，因此根据您的设置，某些行可能已过时。）

HTML：

<span onclick="editOnClick(this)" 
      data-id="123" 
      data-model="myapp.MyModel" 
      data-field="my_field">Click to edit</span>

JS：

function editOnClick(el) {
    var $text = $(el),
            $input = $('<input type="text" />');

    $text.hide()
            .after($input);

    $input.val($.trim($text.html())).show()
            .tooltip({title:"press ENTER to save<br>click outside to cancel", container:"body", trigger:'focus', html:true})
            .focus()
            .keypress(function(e) {
                var key = e.which;
                if (key == 13) // enter key
                {
                    $.ajax({
                        type: "POST",
                        data: {
                            value:$input.val(),
                            obj_id:$text.attr('data-id'),
                            obj_model:$text.attr('data-model'),
                            obj_field:$text.attr('data-field'),
                            csrfmiddlewaretoken:'{{ csrf_token }}'
                        },
                        url: "{% url 'edit_on_click' %}",
                        cache: false,
                        dataType: "html",
                        success: function(html, textStatus) {
                            $input.hide();
                            $text.html(html)
                                    .show();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('Error: ' + XMLHttpRequest.responseText)
                        }
                    });

                    return false;
                }
            })
            .focusout(function() {
                $input.hide();
                $text.show();
            })
}
于 2016-03-19T21:05:27.857 回答