以后主要的工作任务看来都是前端了，以前只是在前人的代码上做一些简单开发扩展，没有什么积累。现在就每天记录点进度和学习成果，以便记录和查找。
打算使用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基于video网站弹窗视频播放代码"旨在实现一个用户友好的视频播放功能，当鼠标悬停在视频列表的预览图片上时，会显示播放按钮，点击后以弹出窗口的方式播放视频。 首先，我们要理解jQuery的基本使用。...
在网页开发中，弹窗是一种常见的用户交互元素，用于显示通知、警告、确认信息或进行更复杂的对话。jQuery，作为一款强大的JavaScript库，为开发者提供了丰富的弹窗插件选择，以实现各种各样的弹窗样式和功能。...
jQuery弹窗插件是基于jQuery库开发的一类组件，它们通常具备高度自定义性，支持多种功能，如警告、提示、信息展示、确认对话框等。这些插件通过简单的API调用，就能快速实现复杂的弹窗效果，极大地提高了开发效率。 ...
在网页设计和开发中，弹窗功能是一种常见的用户交互手段，用于提示、确认、展示信息等。jQuery LayerModel 是一款基于 jQuery 的弹窗插件，它提供了丰富的自定义选项和灵活的布局方式，极大地增强了网页的用户体验。...
在网页开发中，有时我们需要实现一种功能：当用户关闭某个弹窗后，这个弹窗不会立即再次出现，而是会在一段时间后，比如24小时后，重新弹出。这就是所谓的“延迟显示”或“周期性提醒”功能。在这个场景中，我们可以...
基于jquery的弹窗插件，既简单又强大，代码示例： //确定弹窗 new DialogHelper().confirm('确定删除？', function(){ new DialogHelper().alert('点击了确定！'); //警告弹窗 }, function(){ alert&#...
总的来说，"jQuery确认对话框窗口弹窗插件"提供了一种优雅的方式来处理需要用户确认的关键操作，它结合了jQuery的强大功能和易用性，使得在网页开发中实现这样的功能变得简单高效。通过深入学习和使用这个插件，...