以后主要的工作任务看来都是前端了,以前只是在前人的代码上做一些简单开发扩展,没有什么积累。现在就每天记录点进度和学习成果,以便记录和查找。
打算使用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()即可,附件为相关资源文件和代码。
相关推荐
总结来说,"jquery封装的漂亮弹窗confirm"是一个强大的前端开发工具,通过它,开发者可以为用户提供更加优雅、功能更全面的确认对话框,提升网页应用的交互体验。结合其源码和文档,开发者可以深入理解其工作原理,...
在IT行业中,开发用户友好的交互界面是至关重要的,而弹窗组件是实现这一目标的常见工具。"基于jQuery可高度自定义的弹窗组件"就是这样一个解决方案,它旨在为开发者提供灵活、强大的功能,以满足不同场景下的弹窗...
在网页开发中,jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本教程将深入探讨如何使用jQuery实现右下角弹窗功能,类似于QQ的新闻弹窗,为用户提供即时信息提示。 首先,让...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计等任务。"jquery简单易用的弹窗"指的是利用jQuery来创建功能丰富的弹窗组件,这种组件通常用于向用户...
通过以上步骤,我们可以实现一个jQuery驱动的网页弹窗功能,它在页面加载时自动弹出,并且具有可关闭性。对于不同的项目需求,只需调整HTML内容和jQuery逻辑,就能轻松实现各种弹窗效果。这个功能对于网站的用户体验...
在网页开发中,弹窗是一种常见的交互元素,用于提示用户信息、确认操作或展示详细内容。这个项目是利用jQuery库创建的一个弹窗效果,它允许开发者轻松地在网页上实现动态、自定义的对话框。jQuery是一个强大的...
"模拟layer体验做的vue弹窗组件"是一个旨在提供类似layui(一款基于jQuery的UI框架)的弹窗体验的Vue组件。 Vue组件是Vue.js的核心特性之一,它允许我们将UI分解为独立、可复用的模块。在这个项目中,“vue弹窗组件...
"JQuery-DIV弹窗"是指利用jQuery实现的一种弹出窗口效果,通常用于显示通知、确认信息或进行表单输入等场景。这种弹窗在用户交互中起到关键作用,因为它可以吸引用户的注意力并提供一个独立的操作空间。 在描述中...
JQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,因此非常适合用来开发弹窗插件。这个基于JQuery的弹窗插件,可能是为了提供更加灵活、易于定制的弹窗解决方案,以满足...
在网页开发中,弹窗是一种常见的交互元素,用于展示通知、警告、确认信息或提供用户交互界面。jQuery作为一款轻量级的JavaScript库,提供了丰富的API来简化DOM操作,使得创建弹窗插件变得更为便捷。本篇文章将深入...
jQuery Fancybox插件就是这样一个解决方案,它为网页中的图片提供了点击弹窗预览的功能,让图片展示变得既美观又便捷。本篇文章将详细介绍基于jQuery的Fancybox 1.3.4版本的使用方法和核心特性。 **一、jQuery与...
基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件
在网页开发中,弹窗是一种常见的用户交互元素,用于显示通知、警告、确认信息或进行更复杂的对话。jQuery,作为一款强大的JavaScript库,为开发者提供了丰富的弹窗插件选择,以实现各种各样的弹窗样式和功能。...
jQuery弹窗插件是基于jQuery库开发的一类组件,它们通常具备高度自定义性,支持多种功能,如警告、提示、信息展示、确认对话框等。这些插件通过简单的API调用,就能快速实现复杂的弹窗效果,极大地提高了开发效率。 ...
在网页设计和开发中,弹窗功能是一种常见的用户交互手段,用于提示、确认、展示信息等。jQuery LayerModel 是一款基于 jQuery 的弹窗插件,它提供了丰富的自定义选项和灵活的布局方式,极大地增强了网页的用户体验。...
在网页开发中,有时我们需要实现一种功能:当用户关闭某个弹窗后,这个弹窗不会立即再次出现,而是会在一段时间后,比如24小时后,重新弹出。这就是所谓的“延迟显示”或“周期性提醒”功能。在这个场景中,我们可以...
基于jquery的弹窗插件,既简单又强大,代码示例: //确定弹窗 new DialogHelper().confirm('确定删除?', function(){ new DialogHelper().alert('点击了确定!'); //警告弹窗 }, function(){ alert&#...
本项目"jQuery基于video网站弹窗视频播放代码"旨在实现一个用户友好的视频播放功能,当鼠标悬停在视频列表的预览图片上时,会显示播放按钮,点击后以弹出窗口的方式播放视频。 首先,我们要理解jQuery的基本使用。...
总的来说,"jQuery确认对话框窗口弹窗插件"提供了一种优雅的方式来处理需要用户确认的关键操作,它结合了jQuery的强大功能和易用性,使得在网页开发中实现这样的功能变得简单高效。通过深入学习和使用这个插件,...