json传参应用

<span ;style="font-size: ;18px;">json传参应用</span>

JSON(JavaScript ;Object ;Notation) ;是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

下面做一个最简单的弹窗小插件，通过用json参数改变弹窗的样式。

HTML：

; ;<pre>&lt;button ;id="open"&gt;打开&lt;/button&gt;

&lt;button ;id="close"&gt;关闭&lt;/button&gt;

&lt;div ;id="box"&gt;&lt;/div&gt;</pre> ; ;

JS：

; ;<pre>function ;Alert(json){

; ; ; ; ; ; ; ;this.win=document.getElementById('box');

; ; ; ; ; ; ; ;this.w=json.width||200; ;//如果参数为''，就显示200.

; ; ; ; ; ; ; ;this.h=json.height||150;

; ; ; ; ; ; ; ;this.content=json.content||'box';

; ; ; ; ; ; ; ;this.win.style.height=this.h+'px';

; ; ; ; ; ; ; ;this.win.style.width=this.w+'px';

; ; ; ; ; ; ; ;this.win.innerText=this.content;

; ; ; ; ; ; ; ;this.win.style.background=json.background||'black';

; ; ; ; ; ; ; ;this.win.style.color=json.color||'white';

; ; ; ;}

; ; ; ;Alert.prototype.open=function(){//对象原型,open打开close关闭

; ; ; ; ; ; ;this.win.style.display='block';

; ; ; ;}

; ; ; ;Alert.prototype.close=function(){

; ; ; ; ; ; ; ;this.win.style.display='none';

; ; ; ;}</pre> ; ;

调用JS：

; ;<pre>window.onload=function(){ ;

; ; ; ;var ;Open=document.getElementById('open');

; ; ; ;var ;Close=document.getElementById('close');

; ;var ;box=new ;Alert({

; ; ; ; ; ; ; ;height:100,

; ; ; ; ; ; ; ;width:100,

; ; ; ; ; ; ; ;content:'弹窗', ; ;

; ; ; ; ; ; ; ;background:'red',

; ; ; ; ; ; ; ;color:'blue'

; ; ; ;});

; ; ; ;Open.onclick=function(){

; ; ; ; ; ; ; ;box.open();

; ; ; ;};

; ; ; ;Close.onclick=function(){

; ; ; ; ; ; ; ;box.close()

; ; ; ;}

};</pre> ; ;