- 浏览: 79907 次
- 性别:
- 来自: 信阳
最新评论
-
Mr_pop:
jqplot 的一些补充 -
zz_wangyuhoho:
你好,那么我在linux下,把 实际IP地址(10.10.10 ...
EJB(一) -
zkx1217:
请教下,画Pie chart 时,总共有三部分,其中2部分占的 ...
jqplot 的一些补充 -
yexiongMYBH:
您好,我想请问你一下,我如果只单单用jsf.ajax.requ ...
JSF AJAX 的理解 -
ligangbin117:
我觉得还有更简单的方法,这边要求也是显示百分比和数量两个值。可 ...
jqplot 的一些补充
实现一个粗糙的dialog模板
- 博客分类:
- 网页WEB
这只是一个比较粗糙的dialog,实现功能有是可移动的,可关闭的,调用的函数就是一个opendialog,有四个参数,第一个是dialog的配置参数,第二个参数是我们传进我们自己想要编写的dom元素,占据到该dialog的主体位置,第三个参数是当我们的dialog加载完成之后,我们的回调函数,第四个参数是当我们关闭这个dialog的之前,我们调用的回调函数。 该dialog依赖于我写的另外一个为了简写代码的工具包base.js
base.js代码如下:
dialog.js代码如下:
这个缺点是我使用的关闭是一个图片,所以当我配置的时候需要在dialog源代码里面自己配图片的路径
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源代码里面自己配图片的路径
发表评论
-
toolstip的代码
2012-08-20 21:57 1048<!DOCTYPE html PUBLIC &q ... -
jqplot 的一些补充
2012-08-05 19:32 6680最近实用jqplot,要求在pie chart 上显示labe ... -
基于AJAX的高并发数据传输与缓存技术研究
2012-03-11 14:09 66开题报告 题目名称 基 ... -
仿jquery里的最基本的ajax功能
2011-08-13 17:06 1327这个只是最基本的,防止我们总是写无效的代码 代码如下: f ... -
jsf的总结上
2011-04-28 21:56 12551最近一直在看JSF的网站学习,写了点心得,内容是乱七八糟。 ... -
论Ajax的作用
2011-03-22 19:33 4073首先,我承认,我的这个话题有点大了,但还是把内容写出来吧。 ... -
电脑搭建服务器
2010-03-23 18:50 1190今天刚刚学了如何搭建私人的服务器互联网上,现在同大家分享一下 ... -
连接池的配置
2009-12-06 22:55 939jdbc是什么? jdbc就是一个一些类,并且还有jdbc驱动 ... -
servlet问题
2009-11-21 21:42 944问题 快被post折磨死了,我的目录下有两个,servlet一 ... -
servlet初学理解
2009-11-19 22:58 1121servlet 是服务端的开 ... -
初学JavaScript的一些感想
2009-11-07 15:02 1215感想: 对于frames等等来 ... -
第一篇网页制作
2009-10-24 00:00 856比较粗糙:
相关推荐
基于模板万能自定义自己的特色dialog,做一个百度开发工程师
使用纯javascript实现dialog
Android实现Windows风格的Dialog.rar
一个类实现Android弹出dialog,调用相册,相机截图功能
自定义dialog实现登录框自定义dialog实现登录框
各种Android Dialog的实现 包括系统的6中dialog和自定义dialog
6 创建自定义列表对话框 笔者为该对话框添加了自定义的布局文件 该自定义布局文件包含一个文本标签和一个文本框 并实现了确定按钮点击监听事件 在文本框输入内容后 获取文本框里的内容 并以toast形式显示出来 ...
1.实现类似于ios的dialog.iphone的Dialog 2.可以传递参数 IosDialog iosDialog = new IosDialog(MainActivity.this); ArrayList<SheetItem> listSheetItems;
Android实现Windows风格的Dialog
Android自定义显示内容的Dialog,有两种实现方式,一个继承Dialog,一个继承PopupWindow。
dialog 封装DialogFragment来实现的, 通用dialog 弹框.底部弹框,分享弹框
dialog弹框上实现下拉列表功能,有二级关联菜单选项功能ExpandableListViewDemo-master 通过设置属性,可实现只显示一个Group的子菜单 , 显示全部Group的子菜单 。需要自己设置就可以了。
封装一个通用Dialog,使用DialogFragment有很多优势。
Android 使用DialogFragment 实现一个可以多选的Dialog,实现横竖屏切换动态设置界面大小,轻松实现你想要的效果。
Dialog的一个例子
此dialog为业务需要基于jquery开发的一个dialog ,没有那么复杂,但是基本的方法也有了,开发者下载后如有意见或者建议可以提出,但是请勿骂街,谢谢合作,我也是一个普通的开发人员,有技术上可以切磋的话可以按照...
Dialog嵌套Viewpager实现Tabhost效果
一个计算器Dialog..zip,Android计算器对话框
安卓Android源码——安卓Android实现Windows风格的Dialog.rar