phper,PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

文档标签: 前端开发

jquery点击页面隐藏,由点击页面其它地方隐藏div所想到的jQuery的delegate.

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div。比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div:<div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"></div>对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件冒泡,事件冒泡IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反DOM事件流:DOM2级事件规...
此文被围观1471次  分类: 前端设计 标签:  ····

jquery height()的应用.

前面我们了解了jquery瀑布流的相关流程,其中有一个问题值得我们注意就是jquery height()这个属性 height只计算了本身的高度,其中不包括margin、padding、border这些属性! 在线测试地址:jqeruy在线测试工具...

js正则,新浪用户名@检测,js检测@用户名,PHP正则@用户名.

最近一周在新浪的APP开发,做活动方面的网页。 发布微博并@好友参与抽奖,首先我们要在前端页面判断是否@了用户,用正则表达式解决。 看一下我现在用的正则检测@用户: [js] /@(([\u4E00-\u9FA5-a-zA-Z0-9_-]){2,})\s/g [/js] [html] //php正则检测用户昵称并取出 preg_match_all("/@([[\x81-\xfe-\x40-\xfe-a-zA-Z0-9_-]{2,})\s+/i",$text,$matchs);//$text要检测的字符串 [/html] 新浪昵称是4到30位字符,这里很可能是中文昵称,我就只判断了至少两个字符,这里应该分开来判断! 后续的检测用户名字符数后面补上,这里要感谢公司郑同事的提醒!现在才知道自己在正则这块的基础有多差了。...

kindeditor编辑器语言设置与页面多个编辑器设置.

首先看一下官方提出的方法: 移除编辑器后重新创建就可以,这是修改页面编辑器, http://www.kindsoft.net/ke4/examples/multi-language.html 查看页面源码: [html] <script> var editor; KindEditor.ready(function(K) { K('select[name=lang]').change(function() { if (editor) { editor.remove(); editor = null; } editor = K.create('textarea[name="content"]', { langType : this.value }); }); K('select[name=lang]').change(); }); </sc...

jquery 表单提交注意事项.

今天在做jquery表单提交的时候没有反应,也不报错,这就有点怪了。 [js] $(function(){ $("#ok").click(function(){ $("form[name='myform']").submit(); }); }); [/js] 就是这样一个简单的代码,居然不能提交。 后来我将此代码修改了一下: [js] $(function(){ $("#ok").click(function(){ $("#myform").submit(); }); }); [/js] 这样就对了 原来jquery提交表单要用id...
此文被围观1486次  分类: 前端设计 标签:  ·····

前端开发:滚动网页导航固定在顶部.

新的一个项目要求:滚动网页,但是导航条固定在顶部。 主要是产品搜索页面!当产品列表很长时,搜索条件固定在顶部,提高用户的体验感! [html] <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="http://static.blog.csdn.net/scripts/jquery.js" ></script> <script type="text/javascript"> function dhDiv(ee1){ //导航距离屏幕顶部距离 var...
此文被围观2355次  分类: 前端设计 标签:  ·····

js判断浏览器类型.

今天在做一个项目的时候需要对浏览器的类型进行判断,因为有一些CSS的属性IE下不识别,所以为了更好的提高用户的体验度,要分别设置不同浏览器! [js] var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { alert("MSIE"); } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ alert("Firefox"); } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { alert("Safari"); } if(isCamino=navigator.use...

好书推荐《社交网站界面设计》.

作者:克拉姆利什 本书提供100多种模式、原则以及最佳实践,并针对在设计社交网站时经常遇到的问题给出明确建议。本书将提供给你培养用户交互习惯和构建社区最具价值的参考。 本书作者将与你分享难得的经验,教会你平衡各种不同的因素,并与你的用户共同构建和谐健康的网络社区。 本书教会你: 掌握创建任何网站时都会用到的原则 学习基本设计模式,以便向现有的网站中添加新的社交组件 学会在活跃的社区网站管控好行为不端的用户 围绕一个产品或一项服务构建社交体验,并让用户参与其中 无须构建一个全新的架构就可以开发出一套实用的社交应用 让你的网站上的用户可以互动 为你的会员提供离线联系的机会 识别和避免采用反模式——社交网络和社交媒体空间产生的最糟实践 ...

js手机号码验证正则表达式,js正则验证.

这个问题不知道写了多少次了,但是一直记不住! 由于手机号段的不断更新,以前的正则表达式已经无法满足需求。重新编写这条表达式,号段资料来源依据:http://www.von-line.com/hao.htm [js] var regex = { mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/ } [/js] 表达式分析: “/”代表一个正则表达式。 “^”代表字符串的开始位置,“$”代表字符串的结束位置。 “?”代表匹配前面的字符一个或零个,所以这里0?的意思是手机号码可以以0开头或不以0开头。 接下的部分验证11位的手机号码,先从13开始,因为从130-139都有所以可选区间是[0-9],15开头的号码没有154所以[]里面没有4这个数字,当然也可以写成[0-35-9],下面18和14开的号码同上。 小括号括起来的代表一个子表达式,里面是4个可选分支分别用“|”来区分开来,在正则中“|”的优先级是最低的,这里每个分...

select动态更改宽度自适应.

select备受鄙视,前端中会碰到各式各样的问题,例如: 1,弹出层无法阻挡select 2,宽度,高度受系统影响,甚至连系统主题都影响select的宽高 等等。 今天碰到这样一个问题,后台系统再做3级联动的时候,用jquery的append向select中推拼合好的option,在IE6/7下居然无法自适应宽度。找到的唯一理由是,低版本浏览器无法重绘界面,导致宽度无法自适应,使用的解决方案: 对select先隐藏,后再显示。例如: $(“#SelectID”).hide().show(); 另外一种可能的解决方案是: 使用原生js的options.add向select中添加。 目前还是没有解决,以上测试过了! 转自:http://www.smuwcwt.com/archives/673...
此文被围观1420次  分类: 前端设计 标签:  ·····

js的逻辑运算符 ||,js运算符.

js运算符 初次见到这样语句 a=a || [] 还有些纳闷,因为在其他语言中没见过有如此用法。 因而查询一下js的介绍: 1.逻辑或运算符||: 当运算符||的两个运算数都是布尔值,它对这两个运算数执行布尔OR操作。 它先计算第一个运算数,如果这个表达式的值可以被转换成true,那么它就返回左边这个表达式的值。否则计算第二个运算数 即使||运算符的运算数不是布尔值,任然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值。 而且另一方面,对非布尔型的运算数使用了||,这是利用了它对非布尔型的值会将其返回的特性。该运算符的这一用法通常是选取一组备选值中的第一个定义了的并且非空的值(也就是说第一个不会转换为false的值) 例: var max=max_width || preferences.max_width || 500...
此文被围观1635次  分类: 前端设计 标签:  ······

jquery提示框(tip)插件介绍与使用教程.

jquery提示框(tip)插件 官方地址 http://craigsworks.com/projects/qtip/ 下载地址 http://craigsworks.com/projects/qtip/download 演示地址 http://craigsworks.com/projects/qtip/demos/ 演示地址:http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html...
此文被围观857次  分类: 前端设计 标签:  ······

mootools异步请求数据,mootools ajax.

网站找的一段文章,这里可以找到更多mootools里面的js:http://mootools.net/more/ 看mootools能够按所需组件进行下载,所以对他尝试一下,第一个例子就是Ajax组件。 这个是客户端文件:testAjax.html [html] <head> <title>测试Ajax</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <script type="text/javascript" src="./js/mootools.v1.00.js?v=1"></script> </head> <body> <textarea id=content cols=80 rows=20> </te...
此文被围观965次  分类: 前端设计 标签:  ·····

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.