`
big_student
  • 浏览: 40213 次
  • 性别: Icon_minigender_1
  • 来自: 宝鸡
社区版块
存档分类
最新评论

jquery一步步开发弹窗组件(1)

阅读更多

以后主要的工作任务看来都是前端了,以前只是在前人的代码上做一些简单开发扩展,没有什么积累。现在就每天记录点进度和学习成果,以便记录和查找。

 打算使用jquery和jquery UI库开发,一步步开始做弹窗,1)确认取消弹窗,2)输入信息弹窗prompt,3) 弹出窗口可嵌入任何内容。这次先把简单的弹窗做出来,然后再一步步完善。so,开始吧。

一、设计文档结构

一个窗口主要分2个部分:标题header和内容,先整个layout html

<div class="dialog">
	<div class="header">
		<!-- header -->
		<span class="caption">Caption</span>
		<!-- close button -->
		<div class="button close">
			<img src="images/close.gif">
		</div>
	</div>
	<div class="content">
	</div>
</div>

二、增加样式

使用上面结构的html,然后接下来增加样式即可。做好内容layout的html后,可以直接使用浏览器的调试工具如火狐的firebug,ie和chrome的开发人员工具对css进行设置和调试,过程中整理css直至完善。

因为各个浏览器的相应html标签展现的并不同,所以需要统一相关的标签样式,这里统一使用到的即可,body,div,span,及font。

其中,一般字体大小使用em即相对单位,这样做的好处是用户可能会放大或者缩小页面以方便使用。使用px即像素单位,这种缺点是在ie浏览器上像素单位的字体是不会相对放大或者缩小的,而使用em就不会,放大页面字体也会相对放大。浏览器默认1em的大小为16px,为了方便计算一般都设置font-size:  62.5%;表示默认的字体em相对大小为16*62.5%=10px。 

 

body, div, span{
	margin: 0;
	padding: 0;
}
body{
	font-family: Times New Roman, Verdana, Arial, sans-serif;
	font-size: 62.5%;
}
.dialog{
	border-style: solid;
	border-width: 1px;
	border-color: #c6c6c6 #a6a6a6 #a6a6a6 #c6c6c6;
	position: absolute;
	padding: 2px;
	/*z-index make sure the dialog is on the top*/
	z-index: 2000;
	background-color: rgb(232, 232, 245);
}	
.dialog .header{
	background: url("../images/v.png") rgb(170, 170, 203) top left;
	border: 1px solid rgb(152, 152, 165);
	overflow: hidden;
	height: 20px;
	/*close button is absolute so set the position of header relative*/
	position: relative;
}
.dialog .header .caption{
	font-size: 1.1em;
	font-weight: bold;
	margin-left: 4px;
	margin-top: 4px;
	display: inline-block;
}
.dialog .header .button{
	position: absolute;
	height: 16px;
	width: 16px;
	cursor: pointer;  
	padding: 3px 4px 3px 3px;
}
.close{
	right: 0;
	top: 0;
}
/*maybe uncompatible hover*/
.dialog .header .button:hover{
	background: url("../images/over.gif");
	border-right: 1px solid rgb(128, 128, 128);  
}
.dialog .content{
	overflow: auto;
}

 

 给.dialog设置下大小,style="width:200px;height:100px",样子土了点,css可以以后再美化,如图



 三、封装为js工具

新增Dialog工具类,如下:

 

/**
 * Dialog class
 */
var Dialog = function(){
	//default options
	this.defaults = {
		//set default size
		height: "auto",
		width: "auto",
		//set min size and max size when dialog is resizable
		minWidth: 100,
		minHeight: 30,
		maxWidth: null,
		maxHeight: null,
		//whether show the close button
		closable: true,
		resizable: true,
		draggable: true,
		//whether is modal or not
		modal: false,
		//dialog content
		content: "",
		//dialog caption
		caption: "",
		id: null,
		//the context of dialog
		context: "body",
		//location info, refer to jquery ui position
		x: "center",
		y: "center"
	};
	//the hmtl template 
	this._tml = "<div class=\"dialog\" role=\"dialog\" {if(id){} id=\"{-id}\"{}}>" +
				"<div class=\"header\">" +
				"<span class=\"caption\">{-caption}</span>" +
				"{if(closable){}" +
					"<div class=\"button close\"><img src=\"images/close.gif\"/></div>" +
				"{}}</div>" +
				"<div class=\"content\"></div>" +
				"</div>";
}
 这里用到了一个模版工具,之前有用到backbone做相关的东西,暂时用underscore.js解析字符串模版,介绍链接,如下:

 

underscore:http://underscorejs.org/

backbone:http://backbonejs.org/

这里我们会经常使用到jsp开发,所以为了避免冲突把underscore的模版匹配由<%%>改成了{}

添加如下代码

 

/**
 * underscore template settings
 */
  _.templateSettings = {
	evaluate    : /{([\s\S]+?)}/g,
	interpolate : /{=([\s\S]+?)}/g,
	escape      : /{-([\s\S]+?)}/g
};
 接下来,为Dialog类增加相应的方法,其中drag,resize,position都用到了jquery ui的方法,具体细节可参考jquery ui。要注意的是resize,position还有drag都需要设置正确的父容器containment。

 

//define methods of dialog
Dialog.prototype = {
	init: function(setting){
		this.options = $.extend(this.defaults, setting);
		this.context = $(this.options.context);
		//underscore template
		var tml = _.template(this._tml, this.options);
		//set the jquery dom object as a property of dialog object
		this.target = $(tml).appendTo(this.context);
		//set the content and the header div as properties of dialog object
		this.content = this.target.find(".content");
		this.header = this.target.find(".header");
		
		//init dialog id. uniqueId refers to jquery ui
		this.target.uniqueId();
		this.id = this.target.attr("id");
		
		//set dialog size
		this.target.width(this.options.width);
		this.target.height(this.options.height);
		//caculate and set the content height
		this.content.height(this.target.height() - this.header.outerHeight(true));
		
		this._initDraggable();
		this._initResizable();
		this._initPosition();
	},
	_initDraggable: function(){
		//draggable refers to jquery ui draggable 
		//only when mouse is over the header, the dialog is draggable.
		if(this.options.draggable){
			var dragging = false;
			this.header.css({cursor: "move"});
			this.header.bind("mouseover", {object: this},
				function(e){
					if(e.data.object){
						e.data.object.target.draggable({
							start: function(e){
								dragging = true;
							},	
							stop: function(e){
								dragging = false;	
							},
							containment: e.data.object.context
						});
					}
				}
			);
			this.header.bind("mouseout", {object: this}, function(e){
				if(!dragging)
					e.data.object.target.draggable("destroy");
			});
		}
	},
	_initResizable: function(){
		//resizable refers to jquery ui resizable
		if(this.options.resizable){
			this.target.resizable({maxHeight: this.options.maxHeight, maxWidth: this.options.maxWidth, 
							minHeight: this.options.minHeight, minWidth: this.options.minWidth,
							containment: this.context});
		}
	},
	_initPosition: function(){
		//init position refers to jquery ui position
		this.target.position({
			at: this.options.x+ " " + this.options.y, 
			my: "center center", 
			of: this.context, 
			within: this.context, 
			collision: "fit"
		});
	}
}

 来个测试页面

<body>
	<div id="container" style="position:relative;height:500px;width:800px;border:1px solid red; margin: 0 auto">
	</div>
	<script>
		var dialog = new Dialog();
		dialog.init({"context": "#container"});
	</script>
</body>

 完善close按钮事件

_initClose: function(){
		this.target.find(".close").bind("click", {object:this},
		function(e){
			if(e.data.object){
				//TODO trigger the close event
				e.data.object.target.remove();
			}
		});
}

 最后整理下代码结构,提供工具方法创建dialog

(function($){
        //dialog class code ...
	//regist window entry
	window.ui = {dialog:{}};
	ui.dialog.create = function(context, options){
		options = options ? options : {};
		if(options){
			options.context = context;
		}
		return new Dialog(options);
	}
})(jQuery)

 

要创建dialog使用ui.dialog.create()即可,附件为相关资源文件和代码。

  • 大小: 1.7 KB
分享到:
评论

相关推荐

    jquery封装的漂亮弹窗confirm

    总结来说,"jquery封装的漂亮弹窗confirm"是一个强大的前端开发工具,通过它,开发者可以为用户提供更加优雅、功能更全面的确认对话框,提升网页应用的交互体验。结合其源码和文档,开发者可以深入理解其工作原理,...

    基于jquery 可高度自定义的弹窗组件

    在IT行业中,开发用户友好的交互界面是至关重要的,而弹窗组件是实现这一目标的常见工具。"基于jQuery可高度自定义的弹窗组件"就是这样一个解决方案,它旨在为开发者提供灵活、强大的功能,以满足不同场景下的弹窗...

    Jquery右下角弹窗

    在网页开发中,jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本教程将深入探讨如何使用jQuery实现右下角弹窗功能,类似于QQ的新闻弹窗,为用户提供即时信息提示。 首先,让...

    jquery简单易用的弹窗

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计等任务。"jquery简单易用的弹窗"指的是利用jQuery来创建功能丰富的弹窗组件,这种组件通常用于向用户...

    jQuery实现网页打开页面即弹窗

    通过以上步骤,我们可以实现一个jQuery驱动的网页弹窗功能,它在页面加载时自动弹出,并且具有可关闭性。对于不同的项目需求,只需调整HTML内容和jQuery逻辑,就能轻松实现各种弹窗效果。这个功能对于网站的用户体验...

    基于jquery做的一个弹窗效果

    在网页开发中,弹窗是一种常见的交互元素,用于提示用户信息、确认操作或展示详细内容。这个项目是利用jQuery库创建的一个弹窗效果,它允许开发者轻松地在网页上实现动态、自定义的对话框。jQuery是一个强大的...

    模拟layer体验做的vue弹窗组件一款好用的vue弹窗组件

    "模拟layer体验做的vue弹窗组件"是一个旨在提供类似layui(一款基于jQuery的UI框架)的弹窗体验的Vue组件。 Vue组件是Vue.js的核心特性之一,它允许我们将UI分解为独立、可复用的模块。在这个项目中,“vue弹窗组件...

    JQuery-DIV弹窗

    "JQuery-DIV弹窗"是指利用jQuery实现的一种弹出窗口效果,通常用于显示通知、确认信息或进行表单输入等场景。这种弹窗在用户交互中起到关键作用,因为它可以吸引用户的注意力并提供一个独立的操作空间。 在描述中...

    基于JQuery开发的弹窗插件

    JQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,因此非常适合用来开发弹窗插件。这个基于JQuery的弹窗插件,可能是为了提供更加灵活、易于定制的弹窗解决方案,以满足...

    jQuery右下角弹窗插件

    在网页开发中,弹窗是一种常见的交互元素,用于展示通知、警告、确认信息或提供用户交互界面。jQuery作为一款轻量级的JavaScript库,提供了丰富的API来简化DOM操作,使得创建弹窗插件变得更为便捷。本篇文章将深入...

    基于jQuery的图片点击弹窗预览大图插件,jquery.fancybox-1.3.4

    jQuery Fancybox插件就是这样一个解决方案,它为网页中的图片提供了点击弹窗预览的功能,让图片展示变得既美观又便捷。本篇文章将详细介绍基于jQuery的Fancybox 1.3.4版本的使用方法和核心特性。 **一、jQuery与...

    基于Jquery的模态弹窗控件

    基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件

    jquery多种样式的弹窗插件

    在网页开发中,弹窗是一种常见的用户交互元素,用于显示通知、警告、确认信息或进行更复杂的对话。jQuery,作为一款强大的JavaScript库,为开发者提供了丰富的弹窗插件选择,以实现各种各样的弹窗样式和功能。...

    jquery弹窗插件 好用又好看

    jQuery弹窗插件是基于jQuery库开发的一类组件,它们通常具备高度自定义性,支持多种功能,如警告、提示、信息展示、确认对话框等。这些插件通过简单的API调用,就能快速实现复杂的弹窗效果,极大地提高了开发效率。 ...

    jquery.layerModel 弹窗插件

    在网页设计和开发中,弹窗功能是一种常见的用户交互手段,用于提示、确认、展示信息等。jQuery LayerModel 是一款基于 jQuery 的弹窗插件,它提供了丰富的自定义选项和灵活的布局方式,极大地增强了网页的用户体验。...

    简单的jquery.cookie插件使弹窗点击关闭后一天弹一次

    在网页开发中,有时我们需要实现一种功能:当用户关闭某个弹窗后,这个弹窗不会立即再次出现,而是会在一段时间后,比如24小时后,重新弹出。这就是所谓的“延迟显示”或“周期性提醒”功能。在这个场景中,我们可以...

    基于jquery的弹窗插件

    基于jquery的弹窗插件,既简单又强大,代码示例: //确定弹窗 new DialogHelper().confirm('确定删除?', function(){ new DialogHelper().alert&#40;'点击了确定!'&#41;; //警告弹窗 }, function(){ alert&#...

    jQuery基于video网站弹窗视频播放代码

    本项目"jQuery基于video网站弹窗视频播放代码"旨在实现一个用户友好的视频播放功能,当鼠标悬停在视频列表的预览图片上时,会显示播放按钮,点击后以弹出窗口的方式播放视频。 首先,我们要理解jQuery的基本使用。...

    jQuery确认对话框窗口弹窗插件.zip

    总的来说,"jQuery确认对话框窗口弹窗插件"提供了一种优雅的方式来处理需要用户确认的关键操作,它结合了jQuery的强大功能和易用性,使得在网页开发中实现这样的功能变得简单高效。通过深入学习和使用这个插件,...

Global site tag (gtag.js) - Google Analytics