`
暗夜骑士0376
  • 浏览: 81296 次
  • 性别: Icon_minigender_1
  • 来自: 信阳
社区版块
存档分类
最新评论

实现一个粗糙的dialog模板

 
阅读更多
这只是一个比较粗糙的dialog,实现功能有是可移动的,可关闭的,调用的函数就是一个opendialog,有四个参数,第一个是dialog的配置参数,第二个参数是我们传进我们自己想要编写的dom元素,占据到该dialog的主体位置,第三个参数是当我们的dialog加载完成之后,我们的回调函数,第四个参数是当我们关闭这个dialog的之前,我们调用的回调函数。 该dialog依赖于我写的另外一个为了简写代码的工具包base.js
base.js代码如下:
function $id(eltid)
{
	return document.getElementById(eltid);
}
/**
 *  把一个string 类型转换成一个dom 我们只是返回第一个元素
 */
function parsetoDom(string)
{
	var div = document.createElement("div");
	div.innerHTML = string;
	return div.firstChild;
}
function isIE() {
	if ("\v" == "v")
		return true;
	else
		return false;
}
function Trim(str)
{
	return str.replace(/(^\s*)|(\s*$)/g, "");
}
/**
 * 过滤空格
 */
function spaceFilter(element)
{
	var childarray = element.childNodes;
	for(var i = 0;i<childarray.length;i++)
	{
		if(childarray[i].nodeName == "#text" && ! /\S/.test(childarray[i].nodeValue)){
	           element.removeChild(childarray[i]);//如果该元素为空格则删除
	    }
	}
	return element.childNodes;
}
function getAjaxRequest() {
	var request = false;
	try {
		request = new XMLHttpRequest();
	} catch (IE) {
		try {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (othermicrosoft) {
			try {
				request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (failed) {
				request = false;
			}
		}
	}
	return request;
}

/**
 * 构建建议的ajax参数
 * options{url:"",data,dataType,callback
 * @param options
 */
function Ajax(options)
{
	var request = getAjaxRequest();
	var url     = options.url;
	var data    = null || options.data;
	var dataType = (options.dataType || 'GET').toLocaleUpperCase() == 'POST'?'POST':'GET';
	
	var callback = options.callback;
	//回调函数
	var facade   = function(callback){
		if (request.readyState == 4) {
			if (request.status == 200) 
			{
					var responseText = request.responseText;
					callback && callback(responseText);
			}
		}
		
	};
	try{
		request.open(dataType,url,true);
		if(dataType == "POST")
			request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); 
		request.onreadystatechange = function(){
			facade(callback);
		};
		request.send(data);
	}catch(e)
	{
		throw e;
		return ;
	}
	
}

dialog.js代码如下:
/**
 * 这个js创建自己的对话框,依赖于base.js
 */
var timeHal;
//自己创建的element作为缓存存下来
var elecache;

/**
 * 当前默认下的dialog的布局管理
 */
var optionargs = {"left":"200","top":"300","width":"450","height":"300","id":"dialog","content":"请输入内容"};

function pageSize() {
	var body = document.documentElement;
	var bodyOffsetWidth = 0;
	var bodyOffsetHeight = 0;
	var bodyScrollWidth = 0;
	var bodyScrollHeight = 0;
	var pageDimensions = [ 0, 0 ];
	pageDimensions[0] = body.clientHeight;
	pageDimensions[1] = body.clientWidth;
	bodyOffsetWidth = body.offsetWidth;
	bodyOffsetHeight = body.offsetHeight;
	bodyScrollWidth = body.scrollWidth;
	bodyScrollHeight = body.scrollHeight;
	windowavailHeight = window.screen.availHeight;
	windowavailWidth = window.screen.availWidth;

	if (bodyOffsetHeight > pageDimensions[0]) {
		pageDimensions[0] = bodyOffsetHeight;
	}
	if (bodyOffsetWidth > pageDimensions[1]) {
		pageDimensions[1] = bodyOffsetWidth;
	}
	if (bodyScrollHeight > pageDimensions[0]) {
		pageDimensions[0] = bodyScrollHeight;
	}
	if (bodyScrollWidth > pageDimensions[1]) {
		pageDimensions[1] = bodyScrollWidth;
	}
	if (windowavailHeight > pageDimensions[0]) {
		pageDimensions[0] = windowavailHeight;
	}
	if (windowavailWidth > pageDimensions[1]) {
		pageDimensions[1] = windowavailWidth;
	}
	return pageDimensions;
}
/**
 * 制作一个movespan
 */
function createMoveSpan()
{
	var closespan = document.createElement("span");
	//display: inline-block;width: 432px;
	closespan.style.display = "inline-block";
	closespan.style.width   = (parseInt(optionargs.width) - 20) + "px";
	closespan.innerHTML     = optionargs.content;
	closespan.onmousedown = drag;
	return closespan;
}
/**
 * close img
 */
function createCloseImg(closecallback)
{
	var img = document.createElement("img");
	img.src = "jsdir/dialog/img/close.gif";
	img.id = "closesign";
	img.onclick = function() 
	{
		var dialog = document.getElementById(optionargs.id);
		var disablediv = document.getElementById("disablepage");
		document.body.removeChild(dialog);
		document.body.removeChild(disablediv);
		window.clearTimeout(timeHal);
		
		closecallback && closecallback(elecache);
	};
	return img;
}
/**
 * 创建包装好closeimg 和 movespan
 */

function createLayerWrapper(closecallback)
{
	var layer = document.createElement("div");
	//定义style
	layer.style.left = "0px";
	layer.style.height = "20px";
	layer.style.border = "solid 1px gray";
	layer.style.background = "gray";
	layer.style.width = (parseInt(optionargs.width) - 2) + "px";
	//接收子element
	layer.appendChild(createMoveSpan());
	layer.appendChild(createCloseImg(closecallback));
	
	return layer;
}
function initargs(options)
{
	options  = options || optionargs;
	//如果不==,表示的是我们传递的有参数的
	if(options != optionargs)
	{
		if(options.left)
			optionargs.left = options.left;
		if(options.top)
			optionargs.top  = options.top;
		if(options.width)
			optionargs.width = options.width;
		if(options.height)
			optionargs.height = options.height;
		if(options.id)
			optionargs.id = options.id;
		if(options.content)
			optionargs.content = options.content;
	}
}
/**
 * 创建一个dialog并且对其属性进行初始化
 */
function createDialog(options) {
	initargs(options);
	var dialog = document.createElement("div");
	dialog.style.position = "absolute";
	dialog.style.border = "solid 1px";
	dialog.style.display = "none";
	dialog.style.zIndex = "10001";
	dialog.style.top    = optionargs.top + "px";
	dialog.style.left   = optionargs.left + "px";
	dialog.style.width  = optionargs.width + "px";
	dialog.style.height = optionargs.height + "px";
	dialog.style.background = "white";
	dialog.id           = optionargs.id;
	return dialog;
}
/**
 * 创建一个能够遮罩整个body的div
 */
function createDisablePageDiv() {
	var disable = document.createElement("div");
	var page = pageSize();
	disable.id = "disablepage";
	disable.style.position = "absolute";
	disable.style.left = "0px";
	disable.style.top = "0px";
	disable.style.width = page[1];
	disable.style.height = page[0];
	disable.style.zIndex = "10000";
	disable.style.background = "#333";
	disable.style.textAlign = "center";
	disable.style.filter = "alpha(opacity=0)";
	disable.style.opacity = 0;
	disable.style.display = "none";
	disable.style.cursor  = "move";
	return disable;
}

/**
 * 拖曳的事件
 */
function drag(e) {

	e = e || event;
	
	//获得的是span的Node
	var target = e.target || e.srcElement;
	//外层的dialog Dom
	var element = target.parentNode.parentNode;
	if (document.addEventListener) {
		document.addEventListener("mousemove", startDrag, true);
		document.addEventListener("mouseup", stopDrag, true);
	} else {
		document.onmousemove = startDrag;
		document.onmouseup = stopDrag;
	}

	var deltaX = e.clientX - parseInt(element.style.left);
	var deltaY = e.clientY - parseInt(element.style.top);

	function startDrag(e) 
	{
		var el = e || event;
		element.style.left = el.clientX - deltaX + "px";
		element.style.top = el.clientY - deltaY + "px";
	}
	;

	function stopDrag() {
		if (document.removeEventListener) {
			document.removeEventListener("mousemove", startDrag, true);
			document.removeEventListener("mouseup", stopDrag, true);
		} else {
			document.onmousemove = "";
			document.onmouseup = "";
		}
	};
	return true;
}
function addMask() {
	timeHal = window.setTimeout(addMask, 20);
}
/**
 * @param options dialog的配置参数
 * @param callback 启动显示一个dialog之后,我们要做的工作
 * @param closecallback 关闭dialog之后,我们要做的工作
 */
function opendialog(options,element,callback,closecallback) 
{
	var dialog = createDialog();
	var disablepage = createDisablePageDiv();
	var layer = createLayerWrapper(closecallback);
	
	dialog.appendChild(layer);
	
	if(!element)
		return false;
	
	if(typeof(element) == "string" && element.length == 0)
		return false;
	if(typeof(element) == "string")
		dialog.innerHTML  = dialog.innerHTML + element;
	
	try{
		dialog.appendChild(element);
	}catch(e)
	{
		return false;
	}
	
	elecache = element;
	
	document.body.appendChild(dialog);
	document.body.appendChild(disablepage);
	
	dialog.style.display = "block";
	disablepage.style.display = "block";
	addMask();
	
	callback && setTimeout(function() {
		callback();
	}, 500);
	return true;
}



这个缺点是我使用的关闭是一个图片,所以当我配置的时候需要在dialog源代码里面自己配图片的路径
分享到:
评论

相关推荐

    万能自定义dialog模板

    基于模板万能自定义自己的特色dialog,做一个百度开发工程师

    js实现的dialog

    一个好的 Dialog 库应支持自定义配置,如宽度、高度、标题、内容、按钮等,这可以通过设置参数或者对象属性来实现。 8. **关闭逻辑** 对话框关闭时可能需要执行某些回调函数,比如保存用户输入、清理内存等。因此...

    Android实现Windows风格的Dialog.rar

    通过以上步骤,我们可以在Android应用中实现一个具有Windows风格的Dialog。需要注意的是,尽管我们可以模仿Windows的视觉效果,但Android与Windows在用户体验方面还是存在差异,因此在设计时应兼顾Android的平台规范...

    Android Dialog各种实现

    - AlertDialog:这是最常见的Dialog类型,它可以包含一个标题、一个消息、一个或多个按钮。通过AlertDialog.Builder类创建,可以设置图标、标题、消息和按钮。 - ProgressDialog:用于显示进度条,通常在执行耗时...

    dialog 封装DialogFragment来实现的, 通用dialog

    本篇将详细介绍如何封装`DialogFragment`来创建一个通用的、可复用的`Dialog`组件,以及如何实现底部弹框和分享弹框。 首先,我们需要创建一个新的`DialogFragment`子类,例如`NiceDialog`。这个类应该包含以下核心...

    完美实现将activity作为dialog弹窗进行弹出

    在Android开发中,有时我们可能需要将一个Activity展示为Dialog样式,以便于用户交互,比如在主界面之上显示一个半透明、大小可调整的小窗口。本文将深入探讨如何完美实现将Activity作为Dialog弹窗进行弹出,并且...

    自定义dialog实现登录框

    本教程将详细介绍如何在Android中自定义Dialog以实现一个登录框。 首先,理解Dialog的基础概念。Dialog是Android系统提供的一个类,它可以在当前Activity之上显示一个半透明的窗口,用于向用户展示额外的信息或进行...

    js实现dialog 源码包

    本文将深入探讨如何使用JavaScript来实现一个简单的`dialog`功能,包括弹出对话框并在1秒后自动关闭。 首先,我们需要创建一个HTML结构,用于构建对话框的基础框架。这个对话框可以包含标题、内容区域以及关闭按钮...

    dialog实现tabhost效果

    为了在Dialog中使用ViewPager,我们需要自定义一个Dialog的布局,包含一个ViewPager并为其提供适配器。 实现Dialog嵌套ViewPager的步骤如下: 1. **创建布局资源**:首先,创建一个XML布局文件,包含一个ViewPager...

    Dialog实现3D翻转效果

    "Dialog实现3D翻转效果"是一个旨在为对话框添加独特动画效果的技术,它可以为用户提供更丰富的视觉体验,增强应用的互动性。资源中包含了两种不同的旋转效果,使得对话框在显示和隐藏时呈现出3D翻转动画,既增添了...

    安卓Dialog对话框相关-Android实现Windows风格的Dialog的冲突文件2016-11-1516-54-17-807.zip

    总的来说,这个压缩包提供了一个实现Windows风格Dialog的实例,对于想要学习自定义Dialog的开发者来说,是一个有价值的参考资料。通过分析和理解这些代码,可以学习到如何在Android平台上实现具有特定风格的用户界面...

    安卓Android源码——安卓Android实现Windows风格的Dialog.rar

    在Android SDK中,Dialog是一个继承自`android.app.Dialog`的类,它是用来显示一个浮现在当前Activity之上的小窗口,通常用于展示临时信息或获取用户输入。创建Dialog的基本步骤包括: 1. **创建Dialog实例**:通过...

    使用Dialog实现从页面顶部弹出类似搜索的对话框

    在标题“使用Dialog实现从页面顶部弹出类似搜索的对话框”中,我们要探讨的是如何创建一个从屏幕顶部滑出的对话框,模拟常见的搜索功能。这种效果在许多应用程序中都能看到,它提供了简洁且不中断用户体验的方式来...

    Android实现Windows风格的Dialog

    通过以上步骤,我们可以创建一个具有Windows风格的Dialog,既保留了Android平台的特性,又实现了与Windows系统相似的视觉效果和交互体验。在实际开发过程中,应根据具体需求进行调整和优化,以达到最佳的用户体验。

    各种Android Dialog创建及其监听事件实现

    6 创建自定义列表对话框 笔者为该对话框添加了自定义的布局文件 该自定义布局文件包含一个文本标签和一个文本框 并实现了确定按钮点击监听事件 在文本框输入内容后 获取文本框里的内容 并以toast形式显示出来 ...

    一个计算器Dialog..zip

    本开源项目“一个计算器Dialog..zip”即是一个实现计算器功能的自定义对话框,它允许用户在不离开当前界面的情况下进行数学计算。下面我们将详细探讨这个项目的相关知识点。 首先,我们关注的是如何在Android中创建...

    android实现防iphone的Dialog效果

    1.实现类似于ios的dialog.iphone的Dialog 2.可以传递参数 IosDialog iosDialog = new IosDialog(MainActivity.this); ArrayList&lt;SheetItem&gt; listSheetItems;

    自定义Dialog实现Menu菜单

    在标题“自定义Dialog实现Menu菜单”中,我们主要探讨的是如何模仿酷狗和淘宝应用中的Menu样式,创建一个具有类似效果的自定义Dialog。Menu通常用于展示一组可选操作,而Dialog则是一个浮动窗口,可以更好地吸引用户...

    Android实现模态dialog

    2. **自定义布局**:为DialogActivity创建一个布局文件,它将作为对话框的内容。 3. **处理逻辑**:在DialogActivity的onCreate()方法中,加载布局并进行必要的初始化操作。 4. **启动DialogActivity**:在需要显示...

Global site tag (gtag.js) - Google Analytics