Question

我知道我可以设定＆＃34; Ok＆＃34;和＆＃34;取消＆＃34; Jeditable用这样的css文件创建的按钮：

form.editable > button {
color : #F00
}

我希望Jeditable使用现有的Bootstrap类btn btn-danger和btn btn-success。

我知道我可以将CSS从bootstrap复制并粘贴到我的自定义css文件中，但这看起来很恶心。

这样做的正确方法是什么？我没有取得太大的成功，并且阅读了可编辑的文档，但解决方案对我来说并不明显。

Answer 1

我对此感兴趣，我发现它就像这一样简单:)

$('.edit_area').editable('http://www.example.com/save.php', {
     type: 'textarea',
     cancel: '<button class="btn btn-danger" type="cancel" >Cancel</button>',
     submit: '<button class="btn btn-success" type="submit" >Ok</button>'
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//rawgit.com/tuupola/jquery_jeditable/master/jquery.jeditable.js"></script>

<div class="edit_area">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae officiis reprehenderit tempora rerum quaerat sed totam recusandae sint doloremque perspiciatis omnis illum facilis odio perferendis quibusdam sequi ab consectetur repudiandae.</div>

Answer 2

访问Bootstrap CSS自定义页面：http://getbootstrap.com/customize/
点击“全部切换”，然后只选择“按钮”
单击“编译并下载”
打开zip文件并将bootstrap-theme.css文件加载到您的应用
添加btn类按钮：<button class="button btn btn-success" type="submit" >Ok</button>

这将为您提供所需的Bootstrap（而不是整个CSS库），并允许您将按钮设置为Bootstrap按钮。

Answer 3

尝试以下：

$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit">'+
'<i class="icon-ok icon-white"></i></button>'+
'<button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>';

如何使Jeditable使用Bootstrap按钮类进行确定/取消？

3 个答案: