中山php|最优网络中山做网站 中山php建站

最优良人

Category Page for: 网站前端

asyncbox异步弹出窗口,jq弹出层插件,可异步加载页面

2011/08/25 at 12:18 » Comments (20)

AsyncBox(异步盒子)是一款基于 jQuery 的弹窗插件。能够实现网站的整体风格效果,给用户一个新的视觉享受。主要模拟常用的 alert、confirm、prompt、open 和扩展了一些对话框。它通过回调函数触发事件动作并执行,使操作区域更加明了、统一。而且能够在主流浏览器中灵活运用。 介绍及下载地址 http://www.nnhuashi.com/asyncbox/index.html 实例: $('#select-furns').click(function() { asyncbox.open({ id: 'select-form', ...more »

解决jquery和prototype冲突,jquery和prototype共存的方法

2011/08/25 at 11:58 » Comments (251)

今天遇到一个项目的修改,由于该项目之前是使用prototype框架,而我拿手的是使用jquery框架,但是又不想全部重写原来的页面效果,所以在页面引入了jquery文件,但是发现原来的js效果消失了,这是因为他们共同使用了$这个对象,造成了重写覆盖,解决方法是重定义jquery的这个对象 首先在页面最开头引入jquery文件,一定要在prototype文件引入之前,然后紧接着重写$ <script type="text/javascript" src="data/jquery.min.js"></script> <script type="text/javascript"> var jQuery=$; </script> 然后在后面运用jquery时把原来使用$的地方全部换成jQuery就可以了 more »

div li元素不限定宽度,如何浮在中间

2011/08/18 at 17:47 » Comments (498)

div的横向居中我们都知道而已用margin:0 auto;实现,但是在不指定宽度的情况下这语句是没有意义的,div为块级元素,在内层DIV未指定宽度的情况下不能通过margin:0 auto来实现居中,将其转换为内联元素(display:inline)后在外层DIV加text-align:center才能居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div style="width:800px;height:300px;text-align:center;margin:0 auto;background:#efefef;"><div style="background:#ff33cc;display:inline;">sdaasddsa</div></div> </body> </html> more »

按钮变成失效状态,input框变成只读模式以及CSS一些页面控制

2011/08/18 at 14:42 » Comments (200)

以下代码可以使按钮变成失效状态 <input id="select-layout" type="button" value="布置图管理" name="select-layout" disabled="disabled"> 以下代码可以使input框变成只读且禁用模式 <input name="demo" type="text" disabled value="value" readonly="true" /> CSS控制字数多,隐藏多余字 text-overflow:ellipsis;word-break:keep-all;overflow:hidden; white-space:nowrap; 显示竖的滚动条 overflow-y:auto;height:220px; //表格不被撑开,换行 style="word-break:break-all" 控制input或者textarea背景透明的样式 background-color: transparent; 实现细边的表格 <table width=500 border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#add3ef"> <tr bgcolor="#eff3ff"> <td>标题:用户:</td> </tr> <tr bgColor="#ffffff"> <td>内容:</td> </tr> </table> 或者简单通过这个属性控制 style="border-collapse:collapse" more »

HTML表单里面使用fieldset,legend标签,实现标题浮在边线上的效果

2011/08/15 at 09:58 » Comments (293)

经常看到一些表单会有一种相同的特殊效果,就是表单说明文字会浮在边线上,可以用css控制实现,但是其实html有一个fieldset标签来实现这效果 HTML <fieldset> 标签 定义和用法 fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。 <fieldset> 标签没有必需的或唯一的属性。 <legend> 标签为 fieldset 元素定义标题。 实例 组合表单中的相关元素: <form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form> 实现效果如下 health informationheight: weight: 还可以用css控制边线的样式和legend的样式。 <form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form> more »

php正则匹配时常用到的模式修正符

2011/08/15 at 01:19 » Comments (267)

PHP简单的模版引擎主要的原理是使用preg_replace对模板的内容进行替换,替换成可执行的php语句然后写入缓存文本,再include进来执行。 在使用preg_replace时常用到的模式修正符有: e:$replacement 的字符串将被当作php语句执行 U:禁止贪婪匹配 只跟踪到最近的一个匹配符并结束, m:在匹配首内容或者尾内容时候采用多行识别匹配 s:模式中的圆点元字符(.)匹配所有的字符,包括换行 more »

js离开当前页面时触发的函数

2011/08/15 at 01:14 » Comments (51)

js离开当前页面时触发的函数: window.onbeforeunload=fun() ; function fun(return 'msg';) ; 这样子在浏览器在捕捉到页面即将离开的时候就会弹出提示框,显示msg的内容,询问你确定或者取消 目前三大主流浏览器中firefox和IE都支持onbeforeunload事件 另外还有一个相似的函数Onunload: Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。   Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。 1、onbeforeunload事件:   说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。   用法:    ·object.onbeforeunload = handler    ·<element onbeforeunload = "handler" … ></element>   描述:    事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。   触发于:    ·关闭浏览器窗口    ·通过地址栏或收藏夹前往其他页面的时候    ·点击返回,前进,刷新,主页其中一个的时候    ·点击 一个前往其他页面的url连接的时候    ·调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.    ·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。    ·重新赋予location.href的值的时候。    ·通过input type="submit"按钮提交一个具有指定action的表单的时候。   可以用在以下元素:    ·BODY, FRAMESET, window   平台支持:    IE4+/Win, ...more »

异步加载可视化编辑器 Xheditor

2011/08/15 at 01:02 » Comments (6)

如果像上一篇文章使用基于Jquery的可视化编辑器 Xheditor 那样设置的话,访问页面时会加载70多k的jquery文件和50多k的xheditor文件,为了追求页面默认加载的性能提升,其实这些文件完全可以在编辑的时候异步加载的,下面是操作步骤: 1,需要用到一个异步加载js文件并执行的函数 function getJsFile(url, callBack){ var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP'); XH.open('get',url,true); XH.onreadystatechange = function(){ if(XH.readyState == 4 && XH.status == 200){ if(window.execScript) window.execScript(XH.responseText); else eval.call(window, XH.responseText); eval(callBack); } ...more »

使用基于Jquery的可视化编辑器 Xheditor

2011/08/15 at 01:00 » Comments (19)

使用方法 1. 下载xhEditor最新版本。 下载地址:http://code.google.com/p/xheditor/downloads/list 2. 解压压缩文件,将其中的xheditor.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录 3. 在相应html文件的</head>之前添加 <script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script> <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script> 4. 方法1:在textarea上添加属性: class="xheditor {skin:'default'}",前面主参数也可以是xheditor-mini和xheditor-simple,分别加载迷你和简单工具栏,后面详细参数可以省略 方法2:在您的页面初始JS代码里加上: $('#elm1').xheditor(); $('#elm1').xheditor(); 例如: $({ $('#elm1').xheditor(); }); 相应的删除编辑器的代码为 $('#elm1').xheditor(false); 重要说明:2种初始化方法只能选择其中一种,不能混合使用,优先级分别是:方法1>方法2,例如用了方法1,方法2就无法使用了 更多帮助信息,请查看在线帮助:http://code.google.com/p/xheditor/wiki/Help 或者参考demos文件夹中的演示页面 建议使用wizard.html初始化代码生成向导来生成适合你的代码。 more »

异步加载 Xheditor 的时候遇到的浏览器兼容问题

2011/08/14 at 02:55 » Comments (20)

由于各个浏览器对js代码的异步执行函数的支持不一样 window.execScript() 只支持IE浏览器 eval() 虽然支持各个浏览器,但是却不能在全局执行 解决的方法是利用javascript里面有一个改变上下文环境的关键字with . 把GetJsFile方法改成如下: function getJsFile(url, callBack){ var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP'); XH.open('get',url,true); XH.onreadystatechange = function(){ if(XH.readyState == 4 && XH.status == 200){ with ( window )eval(XH.responseText); //if(window.execScript) window.execScript(XH.responseText); //else eval.call(window, XH.responseText); with ...more »