篮球世界杯在哪买球dhtmlxTree目录树增加右键菜单

在以前的一个公司内部管理系统(InnerOA)中,对于目录树的构造我采用的是dTree,实现无限级目录显示及右键菜单功能(右键菜单中包括:新建、修改、共享、删除、刷新等功能,如下图所示)

jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框;它可以设置对话框的标题、内容,并且使对话框可以拖动、调整大小、及关闭;平常主要用来替代浏览嚣自带的alert、confirm、open等方法。
主要参数
jQuery UI Dialog常用的参数有:
1. autoOpen:默认true,即dialog方法创建就显示对话框
2. buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式:
1. {"确定":function(){},"取消":function(){}}
2. [{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
3. modal:默认false,是否模态对话框,如果设置为true则会创建一个遮罩层把页面其他元素遮住
4. title:标题
5. draggable:是否可手动,默认true
6. resizable:是否可调整大小,默认true
7. width:宽度,默认300
8. height:高度,默认"auto"
其他一些不太常用的参数:
1. closeOnEscape:默认true,按esc键关闭对话框
2. show:打开对话框的动画效果
3. hide:关闭对话框的动画效果
4. position:对话框显示的位置,默认"center",可以设置成字符串或数组:
1. 'center', 'left', 'right', 'top', 'bottom'
2. ['right','top'],通过上面的几个字符串组合(x,y)
3. [350,100],绝对的数值(x,y)
5. minWidth:默认150,最小宽度
6. minHeight:默认150,最小高度
使用方法:
 $("...").dialog({
  title: "标题",
  //...更多参数
});
主要方法
jQuery UI Dialog提供了一些方法来控制对话框,仅列出常用的:
1. open:打开对话框
2. close:关闭对话框(通过close不会销毁,还能继续使用)
3. destroy:销毁对话框
4. option:设置参数,即前面列出的参数
使用的时候作为dialog方法的参数:
 var dlg = $("...").dialog({
  //...各种参数
});
dlg.dialog("option", { title: "标题" }); // 设置参数
dlg.dialog("open"); // 使用open方法打开对话框
主要事件
jQuery UI Dialog提供了一些事件,比如打开、关闭对话框的时候做一些额外的事情:
1. open:打开时
2. close:关闭时
3. create:创建时
4. resize:调整大小时
5. drag:拖动时
使用方法同参数的使用方法,比如在打开时隐藏关闭按钮:
 $("...").dialog({
  //...各种参数
  open: function(event, ui) {
     $(".ui-dialog-titlebar-close", $(this).parent()).hide();
  }
});
具体使用
以下封装了一些常用的提示信息,不再详细解释:

篮球世界杯在哪买球 1

jQuery.extend(jQuery, {
  // jQuery UI alert弹出提示
  jqalert: function(text, title, fn) {
    var html =
    '<div class="dialog" id="dialog-message">'
    '  <p>'
    '    <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' text
    '  </p>'
    '</div>';
    return $(html).dialog({
      //autoOpen: false,
      resizable: false,
      modal: true,
      show: {
        effect: 'fade',
        duration: 300
      },
      title: title || "提示信息",
      buttons: {
        "确定": function() {
          var dlg = $(this).dialog("close");
          fn && fn.call(dlg);
        }
      }      
    });
  },
  // jQuery UI alert弹出提示,一定间隔之后自动关闭
  jqtimeralert: function(text, title, fn, timerMax) {
    var dd = $(
    '<div class="dialog" id="dialog-message">'
    '  <p>'
    '    <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' text
    '  </p>'
    '</div>');
    dd[0].timerMax = timerMax || 3;
    return dd.dialog({
      //autoOpen: false,
      resizable: false,
      modal: true,
      show: {
        effect: 'fade',
        duration: 300
      },
      open: function(e, ui) {
        var me = this,
          dlg = $(this),
          btn = dlg.parent().find(".ui-button-text").text("确定(" me.timerMax ")");
        --me.timerMax;
        me.timer = window.setInterval(function() {
          btn.text("确定(" me.timerMax ")");
          if (me.timerMax-- <= 0) {
            dlg.dialog("close");
            fn && fn.call(dlg);
            window.clearInterval(me.timer); // 时间到了清除计时器
          }
        }, 1000);
      },
      title: title || "提示信息",
      buttons: {
        "确定": function() {
          var dlg = $(this).dialog("close");
          fn && fn.call(dlg);
          window.clearInterval(this.timer); // 清除计时器
        }
      },
      close: function() {
        window.clearInterval(this.timer); // 清除计时器
      }
    });
  },
  // jQuery UI confirm弹出确认提示
  jqconfirm: function(text, title, fn1, fn2) {
    var html =
    '<div class="dialog" id="dialog-confirm">'
    '  <p>'
    '    <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' text
    '  </p>'
    '</div>';
    return $(html).dialog({
      //autoOpen: false,
      resizable: false,
      modal: true,
      show: {
        effect: 'fade',
        duration: 300
      },
      title: title || "提示信息",
      buttons: {
        "确定": function() {
          var dlg = $(this).dialog("close");
          fn1 && fn1.call(dlg, true);
        },
        "取消": function() {
          var dlg = $(this).dialog("close");
          fn2 && fn2(dlg, false);
        }
      }
    });
  },
  // jQuery UI 弹出iframe窗口
  jqopen: function(url, options) {
    var html =
    '<div class="dialog" id="dialog-window" title="提示信息">'
    ' <iframe src="' url '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>'
    '</div>';
    return $(html).dialog($.extend({
      modal: true,
      closeOnEscape: false,
      draggable: false,
      resizable: false,
      close: function(event, ui) {
        $(this).dialog("destroy"); // 关闭时销毁
      }
    }, options));
  },
  // jQuery UI confirm提示
  confirm: function(evt, text, title) {
    evt = $.event.fix(evt);
    var me = evt.target;
    if (me.confirmResult) {
      me.confirmResult = false;
      return true;
    }
    jQuery.jqconfirm(text, title, function(e) {
      me.confirmResult = true;
      if (e) {
        if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {
          $.globalEval(me.href);
          me.confirmResult = false;
          return;
        }
        var t = me.type && me.type.toLowerCase();
        if (t && me.name && (t == "image" || t == "submit" || t == "button")) {
          __doPostBack(me.name, "");
          me.confirmResult = false;
          return;
        }
        if (me.click) me.click(evt);
      }
      return false;
    });
    return false;
  }
});
以上代码还存在一个问题,就是每次弹出框关闭之后都没有销毁。
解决办法有(具体不演示):
1. 在close事件里面destroy
2. 把alert/confirm提供里的dialog实例设置成静态的
3. 在外部调用使用单个dialog实例
演示程序
html代码如下:
 <div>
  <input type="button" id="button1" value="普通提示" />
  <input type="button" id="button2" value="自动关闭提示" />
  <input type="button" id="button3" value="确认提示" />
  <input type="button" id="button4" value="确认提示2" />
  <input type="button" id="button5" value="打开窗口" />
</div>
相应js代码如下:

关于公司内部管理系统(InnerOA)中目录树的一些知识以后有时间将整理并提供源码。

$(function() {
  $("#button1").click(function() {
    $.jqalert("这是普通提示!");
  });
  $("#button2").click(function() {
    $.jqtimeralert("这是自动关闭的提示!", "自动关闭提示",
      function() {
        $.jqalert("时间到");
      });
  });
  $("#button3").click(function() {
    $.jqconfirm("确定要这么做吗?", "确认提示", 
      function() {
        $.jqalert("点了确定");
      },
      function() {
        $.jqalert("点了取消");
      });
  });
  $("#button4").click(function(e) {
    if ($.confirm(e, "确定要这么做吗?"))
      $.jqalert("点了确定");
  });
  $("#button5").click(function(e) {
    $.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 });
  });
});
对于服务器端控件使用confirm,可能需要如下方法:
 $("#button4").click(function(e) {
  if (!$.confirm(e, "确定要这么做吗?")) {
    e.stopPropagation();
    return false;
  }
});
额外再提一下,jQuery UI使用的字体都是以em为单位,可能会导致平常使用时dialog变得比较大,可以额外设置以下样式:

但是dTree唯一遗憾的是不支持拖拽排序功能,这让我在完成InnerOA之后心里一直纠结的问题。在网上查看关于目录树的一些内容,dTree是我目前认为最符合我项目的一个。在一个偶然机会,发现了另一个强大的目录树,也就是本文所说的:dhtmlxTree,支持拖拽功能,然而在源码中并没有找到类似DEMO或功能,仅发现提供一个启用拖拽参数,不过,这也让我决心解决目录树的拖拽排序问题,于是花了点时间研究了一下源码和结合dTree项目所总结的经验,终于实现我的需求:可自由拖拽排序、移植dTree的右键菜单功能,并实现在所选目录上右键单击并弹出菜单,可以当前目录为基础,进行如下操作:

body { font-size: 12px; } // 默认字体大小
 /*jQuery UI fakes*/
.ui-widget { font-size: 1em; }
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }
这样子,dialog的大小看起来就比较正常了。
在Telerik RadControls for asp.net ajax中使用
主要是针对telerik RadButton控件,定义如下两个函数:

1、在该目录下新建目录

// 用于RadButton的confirm确认回调,即触发按钮点击
function radcallback(s) {
  return Function.createDelegate(s, function(argument) {
    if (argument) {
      this.click();
    }
  });
}
// 用于为RadButton添加confirm提示
function radconfirm2(textOrFn, title, callback) {
  return function(s, e) {
    $.jqconfirm(textOrFn, title, callback || radcallback(s));
    //radconfirm(textOrFn, callback, 280, 50, null, title);
    e.set_cancel(true);
  };
}
然后可以这样使用:
?
1 <telerik:RadButton ... OnClientClicking="radconfirm2('确定要这么做吗?')" />

2、修改当前目录名称

 摘自 囧月

3、删除当前目录

http://www.bkjia.com/Javascript/506980.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/506980.htmlTechArticlejQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框;它可以设置对话框的标题、内容,并且使对话框可以拖动...

4、刷新页面

5、可增加其它功能,比如“共享”。我在公司内部管理系统(InnerOA)中是以windows操作系统的共享为原型,设置“自读共享”或“可写共享”,并可指定对某用户(或多用户甚至全部用户)共享。这样只有设定共享的用户,才可看到共享的内容。

由于无法在线演示,下面用几个图说明一下(源码下载见:http://download.csdn.net/detail/zm2714/4544616):

1、可在任意目录上点击右键,新建目录

篮球世界杯在哪买球 2

2、可在任意目录上点击右键,修改当前目录。但根目录除外。

篮球世界杯在哪买球 3

上图说明:根目录不可修改,即图中Books不可修改。此id值为-1。这是一个特殊ID。标志为根目录。

篮球世界杯在哪买球 4

上图说明:其它任意目录匀可修改。实际使用中,是存在数据库中目录的ID值。上图中“目录ccc”的ID值为3。

篮球世界杯在哪买球 5

本文由美洲杯在哪买球发布于计算机教程,转载请注明出处:篮球世界杯在哪买球dhtmlxTree目录树增加右键菜单

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。