Category Archives for 前端
tornado模板html转义
tornado新版（具体版本未知)支持自动转义，比如{{ “<div>” }}不会输出html标签，而是进行转义。 {{ module.test(10) }} 也会进行转义。往往module的调用是输出html的，转义之后就没法使用了。 解决方法有2种: 1. 通过{% autoescape None %}关掉自动转义，但是此命令的作用于是整个文件，要么全自动转义，要么全都不转义 2. 使用{% module %}命令输出原始html. “{% module *expr* %}“ Renders a `~tornado.web.UIModule`. The output of the “UIModule“ isnot escaped::{% module Template(“foo.html”, arg=42) %} 使用场景： 如果一个文件中多数需要转义，则打开{% autoescape xhtml_escape %},遇到不需要转义的则通过{% … Continue reading
鼠标点击document 的时候autocomplete menu不关闭
默认情况，如果鼠标点击input之外的任何地方就是会触发blur事件，然后把menu关闭 //具体处理的该事件的代码 .bind( “blur.autocomplete”, function( event ) { if ( self.options.disabled ) { return; } clearTimeout( self.searching ); // clicks on the menu (or a button to trigger a search) will cause a blur event self.closing = setTimeout(function() { self.close( … Continue reading
[转帖]在同一站点下，跨子域进行ajax通信的一种解决方法
处于安全的考虑，浏览器对于ajax请求是有限定的，他要求发起和相应请求的双方处于相同的域名。 一种比较容易的方式就是在当前的域名下设置一个代理页面，通过它来发送请求和转接回复的数据，从而实现ajax的跨域请求。这种方式的优势在于可以跨站点而不仅限于跨子域，不过这样做还有一个弊端就是客户端的session信息将会丢失，在一些需要session的情形(比如需要用户登录验证的情况)就不能适用。 这里介绍的是另一种方法。 解决办法其实和上面的代理页面方式有些类似，上面的方式我们实际上是借用代理页面来发送请求和接受数据，从而绕开浏览器的安全设定。而在这里我们将借用代理页面所处的环境，通过它来实现功能。 首先在想要进行通信的那个子域下设置一个”代理”页面，在这个页面中我们是能对这个子域下的数据进行ajax请求的。 接着就是需要建立一个通道来使用”代理”页面的这一权限，我们在需要使用跨子域的页面中通过iframe引入代理页面，然后通过javascript就能获得代理页面的javascritp环境(iframeEle.contentWindow)，不过这里有个前提就是代理页面需要和当前页面处于同一域中(document.domain需要一致)。由于对于document.domain的值设定时有一个规定就是，域只能提升，不能降低层级或者跳到同级中(比如 home.blueidea.com 只能设为blueidea.com 而不能设为 bbs.blueidea.com或者 xx.home.blueidea.com)，所以这里可以在两个页面中同时把document.domain提升为站点的主域。 通过以上的实现，我们就可以在页面中调用想要进行通信的子域下的”代理”页面来进行ajax通讯了。 上面的图基本能解释的很清楚了，如果有疑问，可以查看原文， 原文来自 blueidea ——2011 年 12 月 27日—– ps: 英文原文 yahoo
ie6-7 的display：inline-block文字隐藏（text-indent:-xxxx）
一般纯背景图表示内容的时候，会放一些文字说明，有利于机器的阅读（有需要借助机器才能“阅读”的人，听说win7 自带就有屏幕阅读器） 但是有不想文字露出来，所以要把他们隐藏掉。 一般我们会使用 font-size:0; line-height:0; display:inline-block; text-indent:-99999px; ie6－7有bug，导致都显示不出来 IE 的 text-indent Bug和当inline-block与text-indent在IE6、7下相遇 上面得俩个文章基本能说明ie6－7下在display：inline or inline-block；得时候text-indent的bug； text-indent会传递父级。 <style type=”text/css”> a{ display:inline-block; margin-left:150px; width:150px; height:35px; text-indent:-9999em; background: red; } </style> <div><a>下一步</a></div> 上面的代码在ie6－7上看不到红色的背景 <style type=”text/css”> a{ display:inline-block; margin-left:150px; width:150px; height:35px; text-indent:-9999em; background: … Continue reading
导航头的100%背景 ，需要添加magin:0 auto;min-width:xxx
导航头的100%背景 ，需要添加magin:0 auto;min-width:xxx update：20101019 16:42 国内的大部分网站页面使用的宽度950px或者960px作为页面主要的宽度 其中有些头部的一小块的宽度是width:100%，带一个背景，随着页面自适应。 浏览器或者屏幕显示的区域小于950或者960px 浏览器的底部会滚动条，如图所示 滚动条拉到最右边的时候看页面width:100%部分的背景，有些时候显示不全 demo
ie6下的hover
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。 a:hover span{display:inline-block;} ie下死活就是出不来。。。 上网找了下原因。 网上确实有好多跟我碰到同样问题的人。。。。 解决方案 添加样式 a:hover{}具体的大括号里面要添加什么样式，有一定的依据但是又找不出规矩。。。期待有人解释下。。。 当a:hover {}的属性跟a {}中的是一样的时候，也就是说a:hover没有发生属性的改变，完全继承a的属性的时候，就会产生此BUG。 也就是说a:hover和a样式不同的时候才会有能触发hover的效果。 zoom, display, padding, background,border:none,position。。。 都能使得ie6 a:hover span{display:inline-block;}起作用。 但是如果 a.demo{color:green;} a.demo1:hover{color:red;} a.demo2:hover {border:none;} a.demo span{display:none;} a.demo:hover span{display:inline-block;} demo demo1:ie6下a:hover span没有出来。。。 其实a:hover效果出来的时候，a:hover span的样式不一定就会出来。。。猜测是应该是触发盒模型的时候就可以了 ——-华丽分割线————- update:由于之前的demo是写在wordpress的正文中，模板引入了一个小于ie7的css样式，导致演示的结果出错。 明天4月1日，最近天气多变，注意身体健康