simplenodal使用JQuery在jstree事件之前确认

时间:2011-08-14 20:33:15

标签: javascript jquery jstree

我的基本需求是在jstree中基于用户确认对话框停止使用stopImmediatePropagation()。例如,用户检查了顶级节点,我的代码意识到他这样做很危险 - 并要求确认。如果用户说“不”,则停止将使支票保持实际发生状态。我希望这是节点,因此用户必须先回答此对话框。

SimpleNodal'确认'看起来像是一个很好的解决方案。一切都有效,除了停止传播。踩着firebug,原因是返回是在jstree.stopPropagation()中执行的,因为this.originalEvent是未定义的。

非常感谢更简单的方法或解决方法。

来自jquery.js的

片段 - 执行此返回而不是完成停止:

stopPropagation: function() {
  this.isPropagationStopped = returnTrue;
  var e = this.originalEvent;
  if ( !e ) {
    return;
  }

错误代码从此处开始 - 执行停止,但上面的返回是:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type='text/css' href='confirm/css/demo.css' rel='stylesheet' media='screen' />
<link type='text/css' href='confirm/css/confirm.css' rel='stylesheet' media='screen' />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type='text/javascript' src='confirm/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='confirm/js/confirm.js'></script>
</head>
<body>
    <div id="demo1" style="float:left;width:50%;">
        <ul>
            <li>
                <a href="" id='a' >aaa</a>
            </li>
            <li>
                <a href="" id='b' >bbb</a>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        $(function () {
        $("#demo1").jstree({ 
            "themes": {
            "theme": "default",
            "dots": true,
            "icons": true,
            "url": "themes/default/style.css"
          },

            "plugins" : [ "themes", "html_data", "ui", "checkbox" ],
            "checkbox": { "override_ui" : true, "checked_parent_open" : false }

        })
        .bind("before.jstree", function (event1, data) {
            console.log(data.func);
            if(data.func === "uncheck_node") {                 // a node was unchecked
                if (typeof(data.args[0]) == "string") return;
                id = data.args[0].parentNode.id;
                if (id == 'a') {
                    **//Uncomment these 2 and the stop works**
                    **//event1.stopImmediatePropagation();**
                    **//return false;**
                    return(
                        confirm('Any Luck', function(isYes) {
                            if (!isYes) {
                                event1.stopImmediatePropagation();
                                return false;
                            } else
                                return true;
                        })
                    );
                }
            }
            if(data.func === "check_node") {                   // a node was unchecked
                $(function(){console.log('hello world');});
            }
        })
    });
    </script>
    <div id='confirm'>
        <div class='message'></div>
        <div class='buttons'>
            <div class='no'>No</div>
            <div class='yes'>Yes</div>
        </div>
    </div>
    <div style='display:none'>
        <img src='confirm/img/confirm/header.gif' alt='' />
        <img src='confirm/img/confirm/button.gif' alt='' />
    </div>
</body>
</html>

0 个答案:

没有答案