Jquery Block是一個在線文本編輯器,可以輕松地實現在線編輯功能。使用jquery block可以減少大量的開發工作,同時提高開發效率。
$(document).ready(function(){
$('#editor').jqEasyCounter({
'maximum': 50,
'minimum': 2,
'selector': '#message',
'counter': '#counter',
'onSuccess': function(){
$('#submit').removeAttr('disabled');
},
'onError': function(){
$('#submit').attr('disabled', true);
}
});
});
上面代碼用到了Jquery Block的一些特性,最大值是50,最小值是2,同時它會通過消息(message)控制器計算它的長度。Counter控制器會實時更新UI并顯示當前的消息狀態。當達到最大值時,提交按鈕會被禁用。這是一個基本的示例,我們還可以使用更多的控制器和選項來實現更多操作。
Jquery Block具有較高的可擴展性,可以輕松地定制功能。比如我們需要實現一個自定義樣式,只需添加CSS即可:
#myBlock {
border: 1px solid #666;
padding: 10px;
background-color: #fff;
color: #000;
}
同時使用以下代碼來調用:
var myBlock = $('#myBlock');
myBlock.block({
message: ‘加載中……’,
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
上述代碼中,我們根據需求自定義了CSS。如果用戶感到在線編輯器自帶的樣式不符合需求,可以按以上方式進行自定義,以實現更好的效果。