用Jquery 将控件设置成ReadOnly在指定的Container中

最近实现了将容器内的指定的元素设置成ReadOnly, 为了复用,用了Jquery的继承来实现。

 

   1:  var pm = new PermissionManager();
   2:  function PermissionManager() {
   3:      this.Container = null;
   4:      this.HasPermission = null;
   5:      this.Coll = [];
   6:      this.Initialize = function () {
   7:          var iColl = this.Coll;
   8:   
   9:          if (this.Container != null) {
  10:              jQuery.each(this.Container.find("*"), function (inx, itm) {
  11:                  if (itm.tagName.toLowerCase() == "input") {
  12:                      iColl.push(new PermissionItem(itm));
  13:                  }
  14:                  else if (itm.tagName.toLowerCase() == "select") {
  15:                      iColl.push(new PermissionItem(itm));
  16:                  }
  17:                  else if (itm.tagName.toLowerCase() == "textarea") {
  18:                      iColl.push(new PermissionItem(itm));
  19:                  }
  20:                  else if (itm.tagName.toLowerCase() == "a") {
  21:                      iColl.push(new LinkPermissionItem(itm));
  22:                  }
  23:                  else if (itm.tagName.toLowerCase() == "span") {
  24:                      iColl.push(new ButtonPermissionItem(itm));
  25:                  }
  26:              })
  27:          }
  28:      }
  29:      this.Add = function (permissionItem) {
  30:          this.Coll.push(permissionItem);
  31:      }
  32:   
  33:      this.Execute = function () {
  34:          var iHasPermission = this.HasPermission
  35:          jQuery.each(this.Coll, function (inx, itm) {
  36:              if (iHasPermission != null && iHasPermission == "false")
  37:                 itm.Disable(); 
  38:          });
  39:      }
  40:  }
  41:  function LinkPermissionItem(control) {
  42:      // 派生类 重写Disable.
  43:   $.extend(this, new PermissionItem(control)); 
  44:   this.Disable = function () {
  45:         if ($(this.Control).attr("id") == "InvitationEdit" || $(this.Control).attr("id") == "NotificationEdit") { $(this.Control).css("display", "none"); this.Control.previousSibling.nodeValue = "";//这里是找到当前节点之前的文本节点 
  46:          }
  47:      }
  48:  }
  49:  function ButtonPermissionItem(control) {
  50:      $.extend(this, new PermissionItem(control));
  51:      this.Disable 
  52:   = function () {
  53:       if ($(this.Control).attr("class") == "left" || $(this.Control).attr("class") == "middle" || $(this.Control).attr("class") == "right") { $(this.Control).css("display", "none"); 
  54:          }
  55:   
  56:      }
  57:  }
  58:  function PermissionItem(control) {
  59:      // 基类
  60:      this.Control = control;
  61:      this.Disable = function () { $(this.Control).attr("disabled", true); } 
  62:  }
  63:   
  64:  $(function () {
  65:      pm.HasPermission = $("input[id$='hasPermission']").val().toLowerCase();
  66:      pm.Container = $("div.preview-invitation");
  67:      pm.Initialize();
  68:      pm.Execute();
  69:  })
 
通过继承PermissionItem 重写Dislabe方法来控制各个元素的禁止方法。
这样代码复用性就比较好了。 望大家多多指教。

Smile

 
posted @ 2012-03-23 18:50  SharePoingGuy  阅读(587)  评论(0)    收藏  举报