- 浏览: 81498 次
- 性别:
- 来自: 信阳
最新评论
-
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,实现功能有是可移动的,可关闭的,调用的函数就是一个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 1110<!DOCTYPE html PUBLIC &q ... -
jqplot 的一些补充
2012-08-05 19:32 6727最近实用jqplot,要求在pie chart 上显示labe ... -
基于AJAX的高并发数据传输与缓存技术研究
2012-03-11 14:09 66开题报告 题目名称 基 ... -
仿jquery里的最基本的ajax功能
2011-08-13 17:06 1384这个只是最基本的,防止我们总是写无效的代码 代码如下: f ... -
jsf的总结上
2011-04-28 21:56 12586最近一直在看JSF的网站学习,写了点心得,内容是乱七八糟。 ... -
论Ajax的作用
2011-03-22 19:33 4113首先,我承认,我的这个话题有点大了,但还是把内容写出来吧。 ... -
电脑搭建服务器
2010-03-23 18:50 1239今天刚刚学了如何搭建私人的服务器互联网上,现在同大家分享一下 ... -
连接池的配置
2009-12-06 22:55 974jdbc是什么? jdbc就是一个一些类,并且还有jdbc驱动 ... -
servlet问题
2009-11-21 21:42 970问题 快被post折磨死了,我的目录下有两个,servlet一 ... -
servlet初学理解
2009-11-19 22:58 1163servlet 是服务端的开 ... -
初学JavaScript的一些感想
2009-11-07 15:02 1258感想: 对于frames等等来 ... -
第一篇网页制作
2009-10-24 00:00 912比较粗糙:
相关推荐
基于模板万能自定义自己的特色dialog,做一个百度开发工程师
一个好的 Dialog 库应支持自定义配置,如宽度、高度、标题、内容、按钮等,这可以通过设置参数或者对象属性来实现。 8. **关闭逻辑** 对话框关闭时可能需要执行某些回调函数,比如保存用户输入、清理内存等。因此...
通过以上步骤,我们可以在Android应用中实现一个具有Windows风格的Dialog。需要注意的是,尽管我们可以模仿Windows的视觉效果,但Android与Windows在用户体验方面还是存在差异,因此在设计时应兼顾Android的平台规范...
- AlertDialog:这是最常见的Dialog类型,它可以包含一个标题、一个消息、一个或多个按钮。通过AlertDialog.Builder类创建,可以设置图标、标题、消息和按钮。 - ProgressDialog:用于显示进度条,通常在执行耗时...
本篇将详细介绍如何封装`DialogFragment`来创建一个通用的、可复用的`Dialog`组件,以及如何实现底部弹框和分享弹框。 首先,我们需要创建一个新的`DialogFragment`子类,例如`NiceDialog`。这个类应该包含以下核心...
在Android开发中,有时我们可能需要将一个Activity展示为Dialog样式,以便于用户交互,比如在主界面之上显示一个半透明、大小可调整的小窗口。本文将深入探讨如何完美实现将Activity作为Dialog弹窗进行弹出,并且...
本教程将详细介绍如何在Android中自定义Dialog以实现一个登录框。 首先,理解Dialog的基础概念。Dialog是Android系统提供的一个类,它可以在当前Activity之上显示一个半透明的窗口,用于向用户展示额外的信息或进行...
本文将深入探讨如何使用JavaScript来实现一个简单的`dialog`功能,包括弹出对话框并在1秒后自动关闭。 首先,我们需要创建一个HTML结构,用于构建对话框的基础框架。这个对话框可以包含标题、内容区域以及关闭按钮...
为了在Dialog中使用ViewPager,我们需要自定义一个Dialog的布局,包含一个ViewPager并为其提供适配器。 实现Dialog嵌套ViewPager的步骤如下: 1. **创建布局资源**:首先,创建一个XML布局文件,包含一个ViewPager...
"Dialog实现3D翻转效果"是一个旨在为对话框添加独特动画效果的技术,它可以为用户提供更丰富的视觉体验,增强应用的互动性。资源中包含了两种不同的旋转效果,使得对话框在显示和隐藏时呈现出3D翻转动画,既增添了...
总的来说,这个压缩包提供了一个实现Windows风格Dialog的实例,对于想要学习自定义Dialog的开发者来说,是一个有价值的参考资料。通过分析和理解这些代码,可以学习到如何在Android平台上实现具有特定风格的用户界面...
在Android SDK中,Dialog是一个继承自`android.app.Dialog`的类,它是用来显示一个浮现在当前Activity之上的小窗口,通常用于展示临时信息或获取用户输入。创建Dialog的基本步骤包括: 1. **创建Dialog实例**:通过...
在标题“使用Dialog实现从页面顶部弹出类似搜索的对话框”中,我们要探讨的是如何创建一个从屏幕顶部滑出的对话框,模拟常见的搜索功能。这种效果在许多应用程序中都能看到,它提供了简洁且不中断用户体验的方式来...
通过以上步骤,我们可以创建一个具有Windows风格的Dialog,既保留了Android平台的特性,又实现了与Windows系统相似的视觉效果和交互体验。在实际开发过程中,应根据具体需求进行调整和优化,以达到最佳的用户体验。
6 创建自定义列表对话框 笔者为该对话框添加了自定义的布局文件 该自定义布局文件包含一个文本标签和一个文本框 并实现了确定按钮点击监听事件 在文本框输入内容后 获取文本框里的内容 并以toast形式显示出来 ...
本开源项目“一个计算器Dialog..zip”即是一个实现计算器功能的自定义对话框,它允许用户在不离开当前界面的情况下进行数学计算。下面我们将详细探讨这个项目的相关知识点。 首先,我们关注的是如何在Android中创建...
1.实现类似于ios的dialog.iphone的Dialog 2.可以传递参数 IosDialog iosDialog = new IosDialog(MainActivity.this); ArrayList<SheetItem> listSheetItems;
在标题“自定义Dialog实现Menu菜单”中,我们主要探讨的是如何模仿酷狗和淘宝应用中的Menu样式,创建一个具有类似效果的自定义Dialog。Menu通常用于展示一组可选操作,而Dialog则是一个浮动窗口,可以更好地吸引用户...
2. **自定义布局**:为DialogActivity创建一个布局文件,它将作为对话框的内容。 3. **处理逻辑**:在DialogActivity的onCreate()方法中,加载布局并进行必要的初始化操作。 4. **启动DialogActivity**:在需要显示...