流程状态图

一 、 所用技术 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");

               

            5）红色状态表示当前状态，走过的状态可以点击，之后的状态不可以点击。

                   

                    如果是普通按钮可以： $("#element").click(function(e){e.stopPropagation();});

        但是对于popover缺任然可以点击，该如何禁止它呢。

              我们不想让该弹出提示弹出时候，除了销毁，我们也没有更好的办法，可是销毁后，想再次使用只能再次初始化……

               注：实际上很多方法可以使用类似于.popover('xxx')的方法调用，但某些需要获取其返回值得方法却不能使用，因为我们知道jQuery中的方法一般都会返回this，所以我们没法得到我们想要的东东。所以为了统一，我们推荐用下面的方法调用。 

           

获取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() 方法来切换生效和无效状态。