欢迎来到 jackNEss'窝窝
I like simple mind

弹出层拖拽API jnPopups()

2011年12月15日

jnPopups() 作为一个 弹出层用 js控件,除了提供了使弹出层页面居中、可拖动、简单的动画缓动效果 和 跟随页面移动之外,还提供了运用前端模板技术的 可定制模板功能,基本上能满足一个正常的网站正常开放的各种需求。

原生JS编写,so 支持和各种 JS库如 Jquery 等 混合使用。

调用方法

一个完整的 jnPopups() 的使用方法如下:

函数初始化

首先是函数的初始化,主要是对函数的各种方法与功能的设置

// javascript document
var data = "";
data+= '<div class="popup_box" id="popup_box">';
data+= '<div class="popup_box_head">';
data+= '<h3 class="h_tl">{%title%}</h3>';
data+= '<a href="javascript:;" class="close" id="popup_close">CLOSE</a>';
data+= '</div>';
data+= '<div class="popup_box_content">{%content%}</div>';
data+= '</div>';

var myPopup = new jnPopup({
	withBg:true,
	bgColor:"#000",
	bgOpacity:0.5,
	zIndex:10000,
	transition:200,
	isFixed:true,
	interval:20,
	dastance:20,
	closeBtn:"#popup_close",
	moveArea:"#popup_box",
	configuration:data,
	title:"温馨提示",
	content:"",
	variable:null
});
myPopup.init();	
	

函数调用

调用方法如下:

弹出层显示

//javascript document
myPopup.popupShow({
	title:"温馨提示",
	content:"hello jackNEss",
	callback:function(){alert("data loaded")}
});	
	

弹出层隐藏

	//javascript document
	myPopup.popupHide(function(){alert("popups hided")});
	

参数介绍

看完上面的例子之后估计还不知道那些参数是干嘛的,下面就来一一解释 ^_^#

jnPopups(option)

本函数的顶层方法。option,类型为 Object,里面提供了以下的各种属性设置:

属性 介绍
withBg boolean 类型。
设置弹出层显示的时候是否显示背景。
默认值为:false
bgColor String 类型。
设置弹出层显示时如有背景的话,背景的色值,格式可为 “#000″ 或 “black” 或 “rgb(0,0,0)” 等。
默认值为:”#000″
bgOpacity float 类型。
设置弹出层显示时如有背景的话,背景的透明度其中 1 为完全不透明,0为完全透明。
默认值为:0.5
zIndex int 类型。
设置弹出层的初始深度,其中背景为 z-index,弹出层是 z-index + 1。
默认值为:10000
transition int 类型。
动画缓动时间。
默认值为:200
isFixed boolean 类型。
设置弹出层是否定位在页面上。
默认值为:true
interval int 类型。
设置每帧动画的时间间隔。
默认值为:40
dastance int 类型。
设置动画缓动距离。
默认值为:20
closeBtn String 类型。
设置关闭弹出层的对象,函数封装了简单选择器,支持 “#a”,”#a .content”,”.close”,”#a span” 这样的筛选。
默认值为:null
moveArea String 类型。
设置拖动弹出层的区域的对象,函数封装了简单选择器,支持 “#a”,”#a .content”,”.close”,”#a span” 这样的筛选。
默认值为:null
configuration String 类型。
设置自定义模板的模板结构代码。默认支持 2 个 变量 {%title%}、{%content%}。具体将在 下面 进一步解释说明。
默认值为:””
title String 类型。
设置{%title%} 的 默认内容。
默认值为:””
content String 类型。
设置{%content%} 的 默认内容。
默认值为:””
variable Object 类型。
设置自定义前端变量的类名和值。具体将在 下面 进一步解释说明。
默认值为:null

option.configuration 详细介绍

configuration 这个属性主要用来定义弹出层的结构代码,例如如果我们弹出层的html结构是这样:

<!-- html document -->
<div class="popups">
	<div class="popups_head">popups title</div>
	<div class="popups_content">popups content</div>
</div>	
	

我们现在要做的就是把这个东西变成一个模板,全个网站的弹出层都是这种结构,改变的就是 弹出层的 标题 部分 和 内容 部分,这里我们提供了2个默认的变量值{%title%} 和 {%content%} 用来把标题 和 内容 动态读取显示,其他的部分保持不变。所以,如果要将这个做成模板,假设 变量 data 为我们 自定义模板的值变量,我们可以这样写:

//javascript document
var data = "";
data += '<div class="popups">'
data += '<div class="popups_head">{%title%}</div>'
data += '<div class="popups_content">{%content%}</div>'
data += '</div>'
	

然后当我们调用方法显示弹出层时如:

//javascript document
jnPopups().popupSHow({title:"温馨提示",content:"生日快乐"})
	

里面的 {%title%} 内容 和 {%content%} 内容 即可动态显示。

option.variable 详细介绍

option.variable 给开发者提供一个自定义动态变量的一个接口,例如,我想在自定义模板中增加一个变量 {%sizeClass%} 用来 储存一个样式 来区分是 当前提示框尺寸是标准型的还是迷你型的。首先我们可以通过 variable来进行自定义设置:

//javascript document
option.variable = { sizeClass:"standand"};	
	

上面是理论上的,我们看看实际开发时候。

假设我们运用这个js来坐一个弹出层,只设置自定义模板,其他统一使用默认值。代码如下:

//javascript document
var data = "";
data += '<div class="popups {%sizeClass%}">'
data += '<div class="popups_head">{%title%}</div>'
data += '<div class="popups_content">{%content%}</div>'
data += '</div>'
var myPopups = new jnPopup({configuration:data});
myPopups.init();
	

然后我们调用的时候可以这样写来使用自定义变量:

//javascript document
myPopups.popupShow({title:"tips",content:"happy brithday~",variable:{sizeClass:"standand"}})	
	

jnPopups().setOption(option)

设置jnPopups的各种属性,支持链式操作 返回值是 jnPopups() 自身,option 里面的各个属性和 jnPopups(option)中的 option 一致,具体可看 这里

jnPopups().init()

函数初始化,在调用 jnPopups().popupShow() 和 jnPopups().popupHide() 必须执行这方法一次,一次即可。用于将各个属性初始化,返回值是 jnPopups() 自身。

jnPopups().popupShow(option)

弹出层显示时调用的方法,里面option 可设置各种动态变量,支持回调函数,即执行完 popupShow 时调用的方法。具体属性如下:

属性 介绍
title String 类型。
设置{%title%} 的 显示内容。
默认值为:””
content String 类型。
设置{%content%} 的 显示内容。
默认值为:””
variable Object 类型。
设置自定义前端变量的类名和值。具体将在 下面 进一步解释说明。
默认值为:null
callback Function 类型。
回调函数,执行完弹出层显示时,如果 callback 不为空,执行该函数。
默认值为 null

jnPopups().popupHide(callback)

弹出层隐藏时调用的方法,里面的参数为 回调函数,用于执行完弹出层隐藏时回调用的方法,具体属性如下:

属性 介绍
callback Function 类型。
回调函数,执行完弹出层隐藏时,如果 callback 不为空,执行该函数。
默认值为 null

参考例子

一个简单的调用示例: 点击这里 查看。

实际开发中如果是做一个全站通用弹出层的调用示例: 点击这里 查看。

打包下载

下载地址: http://www.jackness.org/lab/jn_popups/jn_popups_lastest.rar

分类javascript
标签,
阅读 1,441
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS