我是
ruby on rails和twitter bootstrap的新手.如果我的问题听起来很愚蠢,请接受我的道歉.
我正在使用twitter bootstrap进行我的网站设计.我一直在尝试使用bootstrap将标签更改为文本框,使用超链接按钮单击.
我正在使用twitter bootstrap进行我的网站设计.我一直在尝试使用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这样做,或者我可以使用bootstrap.
请指出正确的方向.提前致谢
编辑
代码用超链接更新(它也可以是按钮).就像当我点击“编辑”超链接时,我的标签应该显示可以使用bootstrap的占位符属性使用的内容“Saghir”.我可以提交表单来更新数据库的值.
解决方法
正如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供您参考.
