雨夜带刀's Blog

easyDialog 简单、实用的弹出层组件

easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。当然,如果你想找那种集成了模板的弹出层,请移步artDialog,artDialog的模板设计得很精美,功能也是很丰富的,但是体积比较大,压缩后的体积还是有18KB,如果是注重性能的网站,一个弹出层组件有这么大至少对于我来说是没法容忍的,在某些情况下优点恰恰也成了缺点,easyDialog始终保持着超轻量级。

让Firefox支持outerHTML的解决方案

<p>对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别:</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2011/02/outerhtml_demo.png" alt="innerHTML和outerHTML的区别"></div>
<p>outerHTML最开始是属于IE的私有属性,可以查看MSDN上的说明:<a href="http://msdn.microsoft.com/en-us/library/ms534310%28VS.85%29.aspx" target="_blank">outerHTML Property</a>。目前IE、Chrome、Safari、Opera都能支持这个属性,杯具的是outerHTML不支持Firefox,在Firefox中该属性永远返回undefined。</p>
<p>让Firefox支持outerHTML属性可以通过扩展HTMLElement的原型来实现…</p>

Email Suggest 邮箱输入提示

&lt;p&gt;最近的项目会用到登录框邮箱输入提示的功能,于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个,效果和新浪微博的基本一致,但是实现原理可能会有区别。&lt;/p&gt;
&lt;a href=&quot;http://stylechen.com/wp-content/uploads/demo/email-suggest/index.html&quot; target=&quot;_blank&quot;&gt;查看演示&lt;/a&gt;
&lt;h3&gt;HTML结构部分:&lt;/h3&gt;
&lt;pre class=&quot;brush: c-sharp&quot;&gt;
&amp;lt;div id=&quot;login_box&quot;&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;div&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label for=&quot;email&quot;&amp;gt;电子邮箱:&amp;lt;/label&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;input type=&quot;text&quot; id=&quot;email&quot; autocomplete=&quot;off&quot; /&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;/div&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;ul id=&quot;email_list&quot;&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;请选择邮箱类型&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@163.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@126.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@qq.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@yahoo.com.cn&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@gmail.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@sohu.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@hotmail.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;/ul&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/pre&gt;
&lt;p&gt;与新浪微博不同的是,我将邮箱后缀都先写在了结构中,然后用把邮箱后缀取出来存到一个数组中。上面input标签中的autocomplete=&quot;off&quot;属性是用来关闭浏览器默认的cookie提示的,如果不关闭这个提示将会弹出2个层,新浪微博的就没有关闭,这应该算是一个BUG吧。&lt;/p&gt;

未知高度的图片垂直居中

<p>图片的宽度和高度是未知的,没有固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求,所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图,外部容器的宽度和高度固定,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>

CSS清除浮动

<p>“90%的CSS布局的兼容问题都是浮动布局引起的”,这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动,我回答过N次,但这位新手朋友好像始终记不住,总是会在这里出问题,包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确,但也反映出了前端人员在这个问题上或多或少的要纠结一番,新手会时常犯难,老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法,发觉方法还是挺多的,那么有没有一种最优的方法可以实现一劳永逸呢?且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签,空标签上定义一个清除浮动的类:</p>
<pre class="brush: c-sharp">
&lt;style type="text/css"&gt;
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
&lt;/style&gt;
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>

头像

雨夜带刀

主要折腾前端
现居北京

第 14 页,共 18 页« 最新...1213141516...最旧 »