[英]X-Editable and Bootstrap 4
以前,我已經使用 X-Editable 和 Bootstrap 3 實現了內聯編輯。使用 Bootstrap 4,它似乎不再起作用。 在這里查看 JsFiddle。
如果我定義一個這樣的簡單彈出窗口:
<div style="margin: 150px">
<a href="#" class="comment" data-name="comment" data-type="text" data-pk="@item.Id" data-url="/" data-title="Enter comment">comment</a>
</div>
<script>
$(document).ready(function() {
$('.comment').editable();
});
</script>
它在 BS3 中運行良好,但一旦我切換到 BS4,它就不再起作用,給出錯誤:
Uncaught TypeError: Cannot read property 'addClass' of undefined
at Popup.show (bootstrap-editable.js:1091)
at Editable.show (bootstrap-editable.js:1802)
at Editable.toggle (bootstrap-editable.js:1824)
at Editable.<anonymous> (bootstrap-editable.js:1547)
at HTMLAnchorElement.e (jquery-3.2.1.slim.min.js:2)
在控制台中。
我做錯了什么? 我應該使用不同的庫/叉嗎?
有一個支持 Bootstrap 4 的新版本:
https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable
只是為了幫助遇到此問題的其他人,這就是我處理它的方法。 我切換到內聯模式:
$(document).ready(function() {
$('.comment').editable({
mode: 'inline',
});
$('.hours').editable({
mode: 'inline',
type: 'number',
step: '1.00',
min: '0.00',
max: '24'
});
});
這工作正常,但由於不再支持字形,按鈕不會呈現任何圖像。
我添加了font-awesome然后使用以下 css 來獲取圖標:
.glyphicon-ok:before {
content: "\f00c";
}
.glyphicon-remove:before {
content: "\f00d";
}
.glyphicon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
一切似乎都像以前一樣。 感謝薩杜為我指明了正確的方向。
似乎這是 bootstrap 4 中的錯誤。 Bootstrap 4 目前處於 beta 版本。
自舉4個實施例與FontAwesome 4在https://jsfiddle.net/frallain/h5qmord2/並用FontAwesome 5在https://jsfiddle.net/frallain/atwb19dz/
順便說一句,關鍵字before
的 CSS 需要一個 double :
.glyphicon-ok::before {
content: "\f00c";
}
.glyphicon-remove::before {
content: "\f00d";
}
.glyphicon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-style: normal;
}
這是另一個通過示例,使 x-editable 與 Bootstrap 4 兼容
https://bbbootstrap.com/snippets/edit-forms-inline-using-x-editable-editor-11973728
從 css 中,您可以獲取第 69 行以下的所有內容.form-group label {...
對於 javascript 部分,您可以在文檔加載中復制以下內容
$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.buttons =
'<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
'<i class="fa fa-fw fa-check"></i>' +
'</button>' +
'<button type="button" class="btn btn-warning btn-sm editable-cancel">' +
'<i class="fa fa-fw fa-times"></i>' +
'</button>';
除了基本的 x 可編輯依賴項之外,您還需要 FontAwesome。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.