10个新鲜的JQ插件

今天,我们想和大家分享10个最新鲜、令人印象深刻的jQuery插件的集合。这些插件,有的帮助您建立一个很好的幻灯展示、重新排列不同的块元素、显示各种社会化媒体的信息、建立一个图片库等,欢迎来测试这些插件。

1)?fineuploader

采用Ajax技术实现的文件上传组件,支持拖拽文件上传。使用很简便,只需在页面中引入相应的CSS+JavaScript,剩下的就只服务器端处理逻辑。在其提供的下载包中已经有多种语言实现包括:ASP.NET, ColdFusion, Java, Node.js, Perl, PHP, Python?。

有一些选项可以来限制文件大小,文件类型,文件上传的数量等。

2)?responsive-carousel

一个基于jQuery的脚本,用于实现响应式旋转木马。支持鼠标,触摸和键盘。

3)?slideControl

jQuery插件,让您可以轻松地使滑块范围输入

4)?iview

iView是易于使用jQuery的图像滑块与动画字幕,响应式布局和支持HTML元素(视频,IFRAME)的滑块。轻松添加无限数量的幻灯片和标题。使用它作为图像滑块,图像画廊,横幅肩,横幅广告,或演示文稿。

5)?jbar-plugin

jBar创建的通知显示在网页的顶部和自动切换,几秒钟后自消失或用户可以单击功能区显示/隐藏。

这插件非常小,它的功能和样式都完全可以快速自定义。

6)?iosslider

iosSlider是一个jQuery插件,它允许你集成了一个可定制的,跨浏览器的内容滑块到您的网页中。专为用作一个内容滑块,旋转木马,滚动网站横幅,orimage画廊。

7)?jquery-timing

帮助你快速的使用链式和延迟代理模式来实现类似的效果。这个插件提供了简单实用的方法来定义列举,timeout,interval,延迟,并且使用基于时间的循环,仅仅使用数行就可以实现。

8)?socialist

jquery-socialist 是jQuery 社交网络插件,用于从多个社交网络获取数据并创建一个单一的社交媒体流。

9)?vintagejs

VintageJS?是一个jQuery插件,它使用html5 canvas 元素为你的相片添加复古外观。它自带三种效果,并能够自定义。为使用你需要最新版本的jQuery,浏览器需要支持HTML5 canvas元素。

VintageJS经测试支持以下浏览器:Mozilla FireFox 3+, Google Chrome 9+, Apple Safari 5+, Opera 11+ 和 Internet Explorer 9。

10)?gridster

这是一个支持拖拉的多列表格插件,可动态的添加和删除表格中的元素。

十月份全球主流浏览器市场份额排行榜

在过去的十月份,我们正是迎来了Windows 8操作系统,但在全球浏览器市场又发生了哪个变化呢?一起来看一下由浏览迷为大家带来的2012年10月份全球主流浏览器市场份额排行榜。

首先我们一起看一下来自StatCounter的统计数据:

 

由上图我们可以看到,在?StatCounter 十月份的统计中Chrome仍然以34.77%的市场占有率高居榜首,而九月份的同期数据则为34.21%。

IE浏览器方面,虽然由九月份的32.7%增长至32.8%,但仍然位居第二,不知道Windows 8的正式发布,以及11月份即将发布的Windows 7版本的IE10能不能给IE浏览器的市场份额带来一定增长。

Firefox在10月份以22.32%的份额位居第三,而九月份的市场份额为22.4%,有所下降。Safari浏览器10月份全球市场份额7.81%,Opera份额1.63%,分别位居第四和第五的位置。值得一提的是,Safari和Opera较九月份市场份额都出现了一定程度的增长。

最后放上一张StatCounter统计的,中国浏览器市场的分布情况,供大家吐槽。

下面,我们在一起看一下统计的数据有哪些异同:

在NetApplications10月份的统计中,IE浏览器仍以54.13%的份额位居第一,而Firefox浏览器则以19.99%的份额位居第二。Chrome则位居第三位,市场份额18.55%。Safari 5.21%的份额排在第四位,Opera浏览器则以1.63%的市场份额位居第五位。

关于Document.CompatMode的一些介绍

对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助。

我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat:Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat:Standards-compliant mode is switched on. (Standards Mode)
在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。
在Ext中的代码:
1.var ua = navigator.userAgent.toLowerCase();
2.var isStrict = document.compatMode == “CSS1Compat”,
3.isIE = !isOpera && ua.indexOf(“msie”) > -1,
4.isBorderBox=isIE&&!isStrict;

当文档有了标准声明时, document.compatMode 的值就等于 “CSS1compat”, 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明:
1.Var height = document.compatMode==”CSS1Compat” ? document.documentElement.clientHeight : document.body.clientHeight;

Seo先生博客发布,固定链接地址:https://seosir.cc/668.html?转载请注明。

CSS纯英文数字自动换行技巧[转]

一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和Firefox中都会撑大容器,不会自动换行

并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break

word-wrap用来控制换行

两种取值:

(1)normal

(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

word-break用来控制断词

三种取值:

(1)normal

(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)

(3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

可以在CSS中加入

word-wrap:break-word;

word-break:break-all;

Seo先生博客转发,原文地址:[技巧] CSS纯英文数字自动换行?转载请注明。

常见的IE兼容性代码大全

1.制作全屏背景技巧

我们只要把需要做为全屏背景的那张图片放在HTML标签中:

html{/* 需要全屏的背景图片 */background:url(‘background.jpg’) no-repeat center center;/* 确保html元素总是占用全部浏览器窗口的高度 */min-height:100%;/* 实现的关键 */

background-size:cover;

}

body{

/* 在移动端更好的工作 */

min-height:100%;

}

 

2.最小高度兼容代码,min-height

selector {min-height:500px;height:auto !important;height:500px;}

还有一条专门针对ie的,不建议使用

div {height: expression( this.scrollHeight < 501 ? “500px” : “auto” );}

 

3.清除浮动

/* new clearfix */.clearfix:after {visibility: hidden;display: block;font-size: 0;content: ” “;

clear: both;

height: 0;

}

* html .clearfix???????????? { zoom: 1; } /* IE6 */

*:first-child+html .clearfix { zoom: 1; } /* IE7 */

//最近版\r\n.clearfix:before, .clearfix:after {content:””;display:table;}.clearfix:after{

clear:both;

overflow:hidden;

}

.clearfix{

*zoom:1;

}

 

4.CSS透明兼容,alpha兼容

以前的兼容

.transparent_class {-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* ie8??*/filter:alpha(opacity=50);????/* ie5-7??*/-moz-opacity:0.5;????/* old mozilla browser like netscape??*/-khtml-opacity: 0.5;????/* for really really old safari */opacity: 0.5;????/* css standard, currently it works in most modern browsers like firefox,??*/

}

现在的兼容

.transparent_class {-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* ie8??*/filter:alpha(opacity=50);????/* ie5-7??*/opacity: 0.5;????/* css standard, currently it works in most modern browsers??*/}

 

5.rgba兼容

.rgba {background: rgb(0,0,0); /*The Fallback color*/background: rgba(0, 0, 0,0.5);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */\r\n}

注:ie滤镜中的颜色值前两位表示透明度,下面说明这个透明值如何计算:

现在我需要两个透明度,分别为0.25和0.5,那么第一步先得到乘以256的数值
256 × 0.25 = 64,
256 × 0.50 = 128,
然后我们通过这个地址的计算公式convert to hexadecimal 得到值为: 40和 80

6.标签pre的css代码,防止代码pre中代码过长等问题

pre {white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */word-wrap: break-word; /* Internet Explorer 5.5+ */

}

 

7.ie hack招数集

#box{\r\ncolor:red; /* 所有浏览器都支持 */color:red !important;/* 除IE6外 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */+color:red;/*IE7支持*/

*+color:red; /* IE7支持 */

color:red\9; /* IE6、IE7、IE8、IE9支持 */

color:red\0; /* IE8、IE9支持 */

color:red\9\0;/*IE9支持*/

}

 

8.兼容浏览器的inline-block

.inlineblock{display:inline-block;*display:inline;*zoom:1;}

 

9.css省略号实现
Firefox7.0开始兼容text-overflow:ellipsis;这样的话,以后的省略号就可以做到浏览器兼容了,代码片段为:

width:200px;/*设置宽度*/white-space:nowrap;/*设置不折行*/text-overflow:ellipsis;/*这就是省略号喽*/-o-text-overflow:ellipsis;/*兼容opera*/overflow: hidden;/*设置超过的隐藏*/

 

10.纯CSS三角效果代码

<style>.arrow-up {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;

border-bottom: 5px solid black;

}

.arrow-down {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

 

.arrow-right {

width: 0;

height: 0;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

.arrow-left {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-right:10px solid blue;

}

</style>