中山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 »返回菜单
