Jeditable

Question

有没有办法让 Jeditable 将编辑框显示为内联元素而不是块？我也在用Bootstrap 3.我试过在JS中添加一个"style"各种值的属性，但是好像没有什么效果？

这是原来的样子：

但当我开始使用 jeditable 编辑值时，它是这样显示的：

这是我希望它出现的方式：

相关HTML:

<div class="col-sm-4">
    <span id="songtitle-CD001-1" class="edit-song">Song number 1</span> 
    (<span id="songdura-CD001-1" class="edit-song">00:03:16</span>)
    <br />
    <span id="songtitle-CD001-2" class="edit-song">Song number 2</span> 
    (<span id="songdura-CD001-2" class="edit-song">00:03:46</span>)
    <br />
</div>

JS:

// Edit song text
$('.edit-song').editable('templates/edits/edit-song.php', {
    indicator: 'Saving...',
    tooltip: 'Click to edit...'
});
$('.edit-song-area').editable('templates/edits/edit-song.php', {
    type: 'textarea',
    submit: 'OK',
    cancel: 'Cancel',
    indicator: 'indicator',
    tooltip: 'Click to edit...',
    style: 'inherit' // I have also tried "display: inline' 
});

我也试过将样式直接添加到标签中：

<span title="Click to edit..." id="songtitle-CD001-1" class="edit-song" style="display:inline;">Song number 1</span>

但是那个好像被忽略了？即使后面有 !important：

<span title="Click to edit..." id="songtitle-CD001-1" class="edit-song" style="display:inline; !important">Song number 1</span>

有什么方法可以强制 jeditable 元素内联显示吗？

Answer 1

啊，算了。即使在“.edit-song-area”中另外定义了edit元素，display: inline部分也必须在父元素中，像这样：

// Edit song text
$('.edit-song').editable('templates/edits/edit-song.php', {
    indicator: 'Saving...',
    tooltip: 'Click to edit...',
    style: 'display: inline' // <-- Must be here
});
$('.edit-song-area').editable('templates/edits/edit-song.php', {
    type: 'textarea', // ...even though the other parts are defined here
    submit: 'OK',
    cancel: 'Cancel',
    indicator: 'indicator',
    tooltip: 'Click to edit...',
});

Jeditable - 显示内联编辑框而不是块？

Jeditable - show edit box inline instead of block?

twitter-bootstrap-3