x-editable使用图像来触发选择

时间:2013-06-02 00:16:26

标签: jquery twitter-bootstrap x-editable

我想在界面中使用图标来触发带有X-editable的选择弹出窗口,但我无法弄清楚如何用图像替换文本内容。

有没有办法用x-editable(for bootstrap)来做这件事,还是我需要创建自己的处理方式?

1 个答案:

答案 0 :(得分:3)

让它工作,留下这个以防万一有人正在寻找这个功能或有更好的方法。

http://jsfiddle.net/UGWWA/11/

HTML:

<p>X-editable: single reqular checkbox</p>
<div style="margin: 150px">
    <img id="check" src="http://png-4.findicons.com/files/icons/2152/snowish/128/dialog_warning.png"/>
</div>

JS:

$('#check').editable({
    type: 'checklist',
    url: '/post',    
    pk: 1, 
    placement: 'right',
    title: 'Option 1',
    source: {'1': 'enabled'},
    emptytext: 'disabled',
    success: function(data, config) {
        if(data == '1'){
            $("#check").attr("src", "http://png-2.findicons.com/files/icons/808/on_stage/128/symbol_check.png");
        }else{
            $("#check").attr("src", "http://png-4.findicons.com/files/icons/2152/snowish/128/dialog_warning.png");
        }
    }
});

var a=0;
//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else if(settings.data.value[0] == '1') {
           this.responseText = '1'; 
        }else{
           this.responseText = '0'; 
        }
    }
});