一 、 所用技术 jQuery 和 bootstrap
二、 箭头是 图片,状态是bootstrap里的btn
三、开发时遇到的问题
1) 使用bootstrap的插件popover时候,在先啦框中添加新的按钮。
2)popover里的按钮右击相应图片被覆盖。如下图:
3) jQuery 给页面元素赋值:
TEXTBOX:
var str = $('#txt').val();
$('#txt').val("Set Lbl Value");
LABLE:
var str = $('#lbl').text();
$('#lbl').text("Set Lbl Value");
4)改变节点的class属性
$("#"+state).removeClass("btn btn-info");
$("#"+state).addClass("btn btn-warning");
获取Popover对象
实际上,弹出提示是由内建的Popover对象管理的,jQuery.fn.popover方法只是调用Popover对象中的方法而已。所以首要是取出Popover对象供我们使用,而这一对象又在该元素的jQuery缓存中,我们可以这样取出:
$().data('popover');
例如:
var popoverObj = $('#element').data('popover');
然后我们就可以通过该对象的方法来完成我们想做的东西。
获取弹出提示对象
Popover.tip();
我们可以使用该方法返回jQuery包装后的弹出提示对象,然后进行事件绑定,例如:
popoverObj.tip().on('click', '#someElement', function(evt){ //do something... })
使弹出提示有效或无效
利用Popover.enable() 和 Popover.disable() 方法可以很容易使弹出框生效或无效,而不是销毁他。
当然我们也可以用Popover.toggleEnabled() 方法来切换生效和无效状态。