js espace de noms écrivant un exemple de code-js tutoriel-php.cn

js espace de noms écrivant un exemple de code

怪我咯

Libérer： 2017-07-07 15:09:11

original

1472 Les gens l'ont consulté

Cet article présente principalement la méthode d'écriture de l'espace de noms js et analyse la méthode d'écriture de l'espace de noms JavaScript sous la forme d'un exemple complet. Il a une certaine valeur de référence dans Friends. besoin peut s'y référer.

Cet article analyse la méthode d'écriture de l'espace de noms js avec des exemples. Je le partage avec vous pour votre référence. Les détails sont les suivants :

Je connais cette méthode d'écriture depuis longtemps, je l'évite car la base orientée objet est. pas assez solide, mais cette méthode est quand même nécessaire pour l'ensemble du site. Will

partie html :

<p id="p1">111</p>
<p id="p2">现实</p>
<p id="p3">层</p>
<p class="tab">
  <ul class="tab_nav clearfix">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
  </ul>
  <p class="tab_main">
   <p style="display: block">内容1</p>
   <p>内容2</p>
   <p>内容3</p>
  </p>
</p>

Copier après la connexion

style css :

#p1{width: 100px;height: 100px;background: #ccc;}
#p2{width:100px;height: 20px;background: red;}
#p3{width: 300px;height: 200px;border: 1px solid #ccc;position: absolute;;margin-left: -150px;margin-top:-100px;left:50%;top: 50%;display: none;}
li{width: 100px;float: left;background: #ccc;}
.active{background: red;}
.tab_main{display: none;}
.clearfix:after{clear: both;display: table;content:&#39;&#39;;}
.cleafix{zoom:1;}

Copier après la connexion

code js :

var namespace={
 int:function(){
  this.hide.hideFun();
  this.show.showFun();
  this.tab.tabFun();
 }
};
namespace.hide={
 hideBtn:$(&#39;#p1&#39;),
 hideFun:function() {
  var that=this;
  var a=this.hideBtn;
  a.click(function() {
   $(this).hide();
  });
 }
};
namespace.show={
 showBtn:$(&#39;#p2&#39;),
 showBox:$(&#39;#p3&#39;),
 showFun:function(){
  var that=this;
  var a=this.showBtn;
  var b=this.showBox;
  a.click(function(event) {
   b.show();
  });
 }
}
namespace.tab={
 tabBtn:$(&#39;.tab_nav li&#39;),
 tabCon:$(&#39;.tab_main p&#39;),
 tabFun:function(){
  var that=this;
  var a=this.tabBtn;
  var b=this.tabCon;
  a.click(function() {
   $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
   b.eq($(this).index()).show().siblings().hide();
  });
 }
}
namespace.int();

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!