代码|Code

强大的jQuery弹出层插件–BlockUI

经常会有些同志问我有没有好用的基于jQuery的弹出层插件,我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件,因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。

先看看BlockUI的演示效果:

BlockUI支持很多常见的弹出层,表单、图片、div窗口等。那么这个插件该如何使用呢?接着往下看。

先导入jQuery的库文件(小提示:使用Google服务器的压缩版jQuery库文件加载速度会更快),然后再导入BlockUI的库文件,如果你觉得库文件比较大你可以使用压缩技术对其进行压缩,本博在另一篇文章中详细的说明了javascript文件和CSS文件的压缩

导入库文件后,就可以调用BlockUI了,BlockUI的调用挺简单的,看下面这段代码


$(function(){
$('#box_btn').click(function(){ //给box_btn绑定一个鼠标点击的事件
$.blockUI({ //当点击事件发生时调用弹出层
message: $('#box'), //要弹出的元素box
css: { //弹出元素的CSS属性
top: '50%',
left: '50%',
textAlign: 'left',
marginLeft: '-320px',
marginTop: '-145px',
width: '600px',
background: 'none'
}
});
$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
$('.close').click($.unblockUI); //也可以自定义一个关闭按钮来关闭弹出层
});
});

看了上面的代码,其实你会发觉BlockUI的使用很简单,有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。

$.blockUI定义了一个message属性的,该属性的值就定义了要弹出的元素,比如要弹出一个id为box的div元素,就可以这样 写:message: $(‘#box’),对应了上面的第4行代码。需要注意的是,要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为 display:none。

$.blockUI还定义了一个css属性,该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看,其实在库文件 中也默认定义了一个弹出层的样式,如果你在页面中定义的样式效果并不是很理想,最好是看看库文件中的$.blockUI.defaults的CSS属性。

如果你想了解一些BlockUI的更高级的用法你可以去该插件的官网看看说明文档

BlockUI的下载地址是:hhttp://jquery.malsup.com/block/#download

另一个简单实用的弹出层组件–easyDialog:http://stylechen.com/easydialog.html

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/jquery-blockui.html
如需转载请以链接形式注明原载或原文地址。

8个神奇的网页动态流体布局及其做法揭秘

最近,有一种新的网页布局 ——动态流体布局,很让我感到兴趣。它巧妙地重排元素,并填补了网页的所有空间,而在每个浏览器上显示效果都十分出色,而且通常配以流畅的动画效果。其中有些甚至针对不同类别有不同效果.

这样的网站我找到了8个,他们都有相同的特征。在文章末尾列举了3个JQuery插件, 可以很方便的帮助你达到这些效果。

 

展示

Gimme Bar Read More…

关于豆瓣CSS规范(转)

来源:优站 Ucoding   来源地址:http://ued.ucoding.com/2010/11/17/douban-css-rules/

Douban CSS Code Guideline

1. CSS浏览器支持标准

WinXP Win7 OS X
IE9 C C
IE8 A A
IE7 A A
IE6 A A
Chrome7 C C C
Chrome6 A A A
Chrome3 B B B
Firefox4 C C C
Firefox3.6 A A A
Firefox3.5 C C
Firefox3 C C
Safari B B B
Opera C C C

(注:根据2010年11月10日数据整理)

  1. A级-交互和视觉完全符全设计的要求
  2. B级-视觉上允许有所差异,不破坏页面整体效果
  3. C级-可忽视视觉上的问题,但不防碍使用

2. 尽可能的通过继承和层叠重用已有样式

3. 根据新建样式的适用范围分为三级:全站级、产品级、页面级

  1. 3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。
  2. 3-2. 产品级CSS是指作用于某一垂直产品(如音乐、读书、电台等),文件放在css/下相应目录下。

Read More…

告别前端IE的苦恼IE6-9 BUG解决宝典

原文发表于:Alipay UED Blog – 打败 IE 的葵花宝典:CSS Bug Table

作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示。当然,还有性能问题。不过,今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天,IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 这些浏览器的兼容,无不让前端们头痛。而在这之中,最让人头痛的当数IE,特别是IE6。搞定了IE6,基本也就能称霸半个江山了。搞定了IE,也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么?反正我是想的。

今天,趁着想完善公司的内部样式框架,把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西,一些官方的不足,也根据自己的知识升级了一下。当然,也顺利地升级了框架的一些内容,感觉甚爽。随后,便将一些值得去看的Bug整理成一个列表,基于Alipay前端伟大的分享精神,分享出来以供团队工友们和大家参考。

同时,由于整理仓促,有些理解和表达不当,以及其他纰漏在所难免,还请大家帮忙更正。谢谢。

问题 浏览器 DEMO 解决方法
Hacking Rules:

property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;

1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 bug | fixed 为input添加width
2 body{overflow:hidden;}没有去掉滚动条 IE6/7 bug | fixed 设置html{overflow:hidden;}
3 hasLayout的标签拥有高度 IE6/7 bug | fixed *height:0;

_overflow:hidden;

4 form>[hasLayout]元素有margin-left时,子元素中的[input | textarea] 出现2×margin-left IE6/7 bug | fixed form > [hasLayout 元素]{margin-left:宽度;}

form div{*margin-left:宽度÷2;}

5 当border-width有1条<边3条时被设置成dotted时,1px的边dotted显示成dashed IE7 bug | fixed 不在同一个元素上使用不同宽度的 dotted
6 当子元素有position:relative的时候,父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible; IE6/7 bug | fixed 给父元素设置position:relative;
7 :hover伪类不能改变有position:absolute的子级元素的left/top值 IE7 bug | fixed 把top/left的值设置成除0%外的所有百分值;或添加一个margin-[所有方向]除0外的所有值,包括0%
8 :focus + selector {} 选择器失效 IE8 bug | fixed 在失效选择器后面添加一个空选择器, :focus{}
9 列表中混乱的浮动:在list中浮动图片时,图片出现溢出正常位置;或没有list-style IE8 bug | fixed 用背景图片替换list-style
10 th 不会自动继承上级元素的 text-align IE8 bug | fixed 给th添加text-align:inherit;
11 样式(包括link/style/@import(link)) 最多允许个为是:32 IE6-8 ─ 常识 99.99%的情况下,不会遇到
12 :hover 时若background-color为#fff, 失效 IE7 bug | fixed 把background-color改成background。或者,非#fff || #ffffff
13 忽略’>’后有注释的选择器:selector> /**/ selector{} IE6 bug | fixed 官方DEMO有误
14 * html IE6 ─ HACK 只对IE6有效
15 PNG图片中的颜色和背景颜色的值相同,但显示不同 IE6-7 bug | fixed 利用 pngcrush 去除图片中的 Gamma profiles
16 margin:0 auto; 不能让block元素水平居中 IE6-8 bug | fixed 给block元素添加一个width
17 使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效 IE8 bug | fixed !important is evil, don’t use it anymore
18 :first-letter 失效 IE6 bug | fixed 把 :first-letter 移到离{}最近的地方,如 h1, p:first-letter{},而非 p:first-letter h1{}
19 Position:absolute元素中,a display:block, 在非:hover时只有文本可点击 IE6/7 bug | fixed 给a添加background, 如果背景透明,使用background:url(‘任何页面中已经缓存的文件链接’),不推荐background:url(#)[官方的解决方法],因为会增加一下HTTP请求
20 float列表元素不水平对齐:li不设置float,a设置display:block;float:[方向],li不水平对齐 IE6/7 bug | fixed 给li设置display:inline 或 float:[方向]
21 dt, dd, li 背景失效 IE6 bug | fixed dt, dd, li{position:relative;}
22 <noscript />元素的样式在启用javascript的情况下显示了样式 IE6-8 bug | fixed 利用js给<noscript />添加display:none;
23 使用filter处理的透明背景图片的透明部分不可点 IE6-8 bug | fixed 把background:none变成background:url(‘链接’),链接到本身和图片之外的任何文件
24 li内元素偏离 baseline 向下拉 IE8 bug | fixed 给li设置display:inline 或 float:[方向]
25 列表中li的list-style不显示 IE6/7 bug | fixed 给li添加margin-left,留空间来显示(不要加在ul上)
26 图片不能垂直居中 IE6/7 bug/fixed 添加一个空标签,并赋给”Layout”, 比如display:inline-block;
27 不能自定义指针样式 IE6-8 bug | fixed 给指针文件设置绝对路径
28 背景溢出,拖动滚动条后显示正常 IE6 bug | fixed 给父元素添加overflow:hidden防止溢出,并赋予hasLayout,如果添加_zoom:1;
29 高度超过height定义的高 IE6 bug/fixed 添加_overflow:hidden;(推荐)或者_font-size:0;
30 宽度超过width定义的宽 IE6 bug/fixed 添加_overflow:hidden;
31 双倍边距 IE6 ─ 常识 添加display:inline到float元素中
32 margin负值隐藏:hasLayout的父元素内的非hasLayout元素,使用负边距时,超出父元素部分不可见 IE6/7 bug/fixed 去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
33 给两个浮动元素的某中一个的文字设定为斜体,另一个元素下拉在有斜体文字元素的下面 IE6 bug/fixed 给有斜体文字的元素添加overflow:hidden;
35 3px 间隔:在float元素后的元素,会有3px间隔 IE6 bug/fixed 因为是确切的3px,所以,用“暴力破解”吧,比如_margin-left:-3px;
35 text-align 影响块级元素 IE6/7 bug/fixed 整理你的float;或者分开设置text-align

DD_belatedPNG,解决IE6不支持PNG绝佳方案

我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.
而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及.
原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
使用方法
1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:

<br />
&lt;!--[if IE 6]&gt;<br />
&lt;script src=&quot;DD_belatedPNG.js&quot; mce_src=&quot;DD_belatedPNG.js&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!<br />
&lt;!<br />
/* EXAMPLE */<br />
DD_belatedPNG.fix('.png_bg');<br />
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/<br />
// --&gt;<br />

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

<br />
&lt;!--[if IE 6]&gt;<br />
	&lt;script type=&quot;text/javascript&quot; src=&quot;js/DD_belatedPNG.js&quot; &gt;&lt;/script&gt;<br />
	&lt;script type=&quot;text/javascript&quot;&gt;<br />
	DD_belatedPNG.fix('.trans,.box a:hover');<br />
	&lt;/script&gt;<br />
&lt;![endif]--&gt;<br />

其他方案
在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好

CSS半透明效果(IE6/IE7/FF兼容)

CSS代码:

<br />
.test {<br />
    background:#000;<br />
    color:white;<br />
    width:200px;<br />
    position:absolute;<br />
    left:10px;<br />
    top:10px;<br />
    filter: Alpha(opacity=10); /* IE */<br />
    -moz-opacity:0.1;    /* FF 主要是为了兼容老版本的FF */<br />
    opacity:0.1;    /* FF */<br />
}<br />

如果想让层变成透明但不想让层里的内容变成透明的,可以用以下的方法(需要用到半透明的PNG图片):
CSS代码:

<br />
#content {<br />
position: relative;<br />
width: 300px;<br />
line-height: 22px;<br />
height: 300px;<br />
background-color: transparent;<br />
background-image:url(img/bg.png);<br />
_background-image: none;<br />
background-repeat:repeat;<br />
}<br />
#content #content-bg {<br />
_background-color: #FFFFFF;<br />
position: absolute;<br />
width: 100%;<br />
height: 100%;<br />
left: 0px;<br />
top: 0px;<br />
z-index: -10;<br />
filter: Alpha(opacity=60);<br />
}<br />

HTML代码:

<br />
&lt;div id=&quot;content&quot;&gt;<br />
&lt;div id=&quot;content-bg&quot;&gt;&lt;/div&gt;<br />

网页背景是一张固定图片,其上的方框是半透明的,方框里的内容不是半透明,但内容之外的空白都是半透明可以将底部的图片渐显出来。
</div>

这个方法经测试在IE6/7、FF2、Opera9、Safari3.1下可以正常显示,别的浏览器因为条件原因没有测试,有兴趣的朋友可以测试一下。

完美解决IE6不支持PNG和hover等BUG兼容到IE7,IE8,IE9

一直没用Google code,用了才知道Google的强大之处!

Google代码里很有很多开源的项目,还有一些牛人分享的JS代码

我发现一段代码只要沾到你的页面中去就可以完美的解决IE6上的一下BUG

只是可以解决PNG不透明,tr:hover等无效的BUG

使用办法如下:

http://code.google.com/p/ie7-js/
IE7.js

Upgrade MSIE5.5-6 to be compatible with MSIE7.

<br />
&lt;!--[if lt IE 7]&gt;<br />
&lt;script src=&quot;http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE7.js&quot;&gt;&lt;/script&gt;<br />
&lt;![endif]--&gt;

IE8.js

Upgrade MSIE5.5-7 to be compatible with MSIE8.

&lt;!--[if lt IE 8]&gt;<br />
&lt;script src=&quot;http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js&quot;&gt;&lt;/script&gt;<br />
&lt;![endif]--&gt;

You do not need to include IE7.js if you are using IE8.js

IE9.js

Upgrade MSIE5.5-8 to be compatible with modern browsers.

&lt;!--[if lt IE 9]&gt;<br />
&lt;script src=&quot;http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE9.js&quot;&gt;&lt;/script&gt;<br />
&lt;![endif]--&gt;

You do not need to include IE7/IE8.js if you are using IE9.js PNG The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = “*.png”; You must set this variable before including the IE7 script. Alternatively, you can set the variable inside the IE7 script element:
The suffix will ignore query string parameters. For more fine-grained control you can also set IE7_PNG_SUFFIX to a RegExp object. If you want to use an alternative PNG solution then set the suffix to something that cannot possibly match:

var IE7_PNG_SUFFIX = “:”;
By default, the PNG will be stretched (this simulates tiling). If you want to turn this off then set the no-repeat property as follows:

div.example {
background: url(my-trans.png) no-repeat;
}
Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

Download

You may link directly to these files if you wish:

http://ie7-js.googlecode.com/svn/version/

Or go to the downloads section to download the current version.

Getting Started

Here is a nice introduction:

http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

Demo

http://ie7-js.googlecode.com/svn/test/index.html

The demo pages are currently not reflecting the latest changes. Hopefully this will resolve itself in the next couple of days.

[Discuz!模板]原创精品orangeBlack橙黑风格

Discuz!模板

风格名称 orangeBlack橙黑风格
适用版本 Discuz!7.2
语言编码 GBK 
风格作者 Wag-Jie
版权所属 DESICODE
风格转换者 原创
支持网站 http://desicode.cn

如约而至又精心制作了一版橙色和黑色搭配的风格,这次制作稍微注意了点细节。
希望大家喜欢!! 喜欢就多帮我顶贴吧

Discuz! Board - Powered by Discuz!.jpg Read More…

[Discuz!模板] DESICODE简约紫色模板发布啦!希望大家来捧个场

Discuz!模板

风格名称 simplePurple简约紫色风格
适用版本 Discuz!7.2
语言编码 GBK
风格作者 Wag-Jie
版权所属 DESICODE.CN
风格转换者 原创
支持网站 http://desicode.cn

自从开始使用了dz开始,就一直在用别人的模板,那时候初出茅庐的我,对高手们的模板真羡慕啊,多么想自己也能做几套,能力有限只能在别人的基础上修改修改….就这样几年就过来了,一直在别人的基础上改来改去的,而且在前辈的身上学到了不少东西!现在,我在做网页设计的工作,也感谢在这里学到的东西和前辈们!正是这些经历让我缩短和理想的差距。我以后会多做一些免费的模板来让像我当初那样追逐理想的朋友们。

这些话我早就想说了,但是一直没实力!我还是需要不断的提高和学习,希望和大家共勉!
本人小博:DESICODE(分享设计与代码的乐趣)希望志同道合的朋友多交流!

简约紫色风格看图:
首页:

未标题-1.jpg

Read More…

CSS布局自适应高度解决方法

原作者:Alex Robinson
原文标题:Equal Height Columns

这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码:

<br />
#wrap{<br />
 overflow: hidden;<br />
 }</p>
<p>#sideleft, #sideright{<br />
 padding-bottom: 32767px;<br />
 margin-bottom: -32767px;<br />
 }<br />

实现原理:

块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用 padding-bottom(足够大的值)到列的块元素 。

应用margin-bottom(足够大的值)到列的块元素。

padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。 Read More…

1 2  Scroll to top