jQuery jFlow幻灯插件
jFlow,一款基于jQuery的幻灯插件.
幻灯(通常也被称为“内容滑动”、内容切换效果、焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法。动态的自动滑动内容在很多网站上都是很流行的。
今儿又要做幻灯.上次用过jQuery UI的插件...效果是做出来了.但比较繁琐.需写死一些预定义的样式命名.
jFlow相对的简洁多了.起初在网上找到的是1.1,(site|demo).啥都好.就是没有自动播放...本来要放弃继续用jQuery UI来着.没想到让我找到个1.2版本的.可以自动播放.这下就舒服了.
默认方法:
$("#myController").jFlow({ //这里选择的是1,2,3,4部分的盒子
slides: "#slides", //这里选择的是幻灯内容的盒子
controller: ".jFlowControl", //必须用class,1,2,3,4每一个的class
slideWrapper : "#jFlowSlide", // 必须用id,幻灯外层的盒子
selectedWrapper: "jFlowSelected", // 必须用文本,高亮的class(前面没class选择器的".")
auto: true, //自动播放
width: "610px",
height: "235px",
duration: 400, //切换速度
prev: ".jFlowPrev", // 必须用class,上一页
next: ".jFlowNext" //必须用class,下一页
});
html幻灯结构:
<div class="slide-wrapper">
<div class="slide-thumbnail">
<!-- image here -->
</div>
<div class="slide-details">
<h2><!-- title here --></h2>
<div class="description">
<!-- description here. -->
</div>
</div>
<div class="clear"></div>
</div>
html控制部分:
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowNext">Next</span>
很遗憾的是,这个插件没有停顿时间.默认是3000ms.可自行修改js文件.
X-UA-Compatible 强制IE渲染模式
在做公司项目的时候总会习惯把ie8的渲染模式强行转换为ie7。这样一来就缩短了不少调试时间,也就基本能敢上公司催死人的进度了..
具体强制方法就是使用meta标签的http-equiv="X-UA-Compatible"属性.
此方法仅在ie8+才管用..
[URL=http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx]这里[/URL]是微软官方的介绍.(英文)
基本用法:
<meta http-equiv="X-UA-Compatible" content="IE=5" />
像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。这个模式建议不要用，IE5，太老了，相信你见都没见过。用了它，你就不是一个合格的前端人员。
<meta http-equiv="X-UA-Compatible" content="IE=7" />
无论页面是否包含 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。
注意，IE7的标准模式与W3C标准模式不是一回事哈。
<meta http-equiv="X-UA-Compatible" content="IE=8" />
开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。
<meta http-equiv="X-UA-Compatible" content="edge" />
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
EmulateIE7 模式通知 Windows Internet Explorer 使用 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 指令。对于多数网站来说，它是首选的兼容性模式。
还有一点值得注意的,也是我今儿才发现的:
原来X-UA-Compatible的书写位置也是有要求的.记录一下.
除了title元素及其他的meta元素之外，它必须出现在网页head节其它元素之前的位置
jQuery BlockUI Plugin 弹层插件
接触jQuery一段时间了.插件也用了几个.
用BlockUI也有一段时间了.终于有时间从头到尾记录一下了.
BlockUI的主要功能就是弹层.弹出提示.
类似功能插件还有:ThickBox,FancyBox,Boxy,FaceBox,Impromptu,nyroModal,FancyZoom,Flyout等
相比之下.BlockUI应该算是最简洁的一款.
最常用的两个函数是$.blockUI();$.unblockUI
还有两个局部弹层的函数:$.fn.block();$.fn.unblock()
另外新增加了个$.growlUI()也不错.
用法:
// 直接弹消息
$.blockUI({
message: '<h1>Please wait...</h1>'
});
// 直接某个页面元素
$.blockUI({
message: $("#id"),
});
// 解除弹层
$.unblockUI();
//锁定某元素并提示
$.fn.block({message: 'blocked!'});
//解锁某元素
$.fn.unblock();
//弹出提示
$.growlUI(title, message, timeout, onClose);
$.blockUI({
// 弹出层的样式
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},
// 遮罩层的样式,默认就是那个黑色半透明层
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6
},
// $.growlUI()的样式
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: null,
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},
});
百仕达商友圈个人版模块通过了.
三个人,对着三个页面用了一个月的时间终于做的差不多了.今儿下午给领导大体做了一下演示,没啥大问题,算是通过了.还有4天时间,大体调整一下就可以上线α测试了.
去年也是做这个模块,两个人用一周时间就做出来了.给领导演示的时候这个说不好,那个说不行的.可以说完全不能用.领导的基本要求都无法满足.为啥年后重做后一次就通过了呢?为啥年前俩人天天都在抱怨,年后加班都高兴?
年前是两个人,一个程序一个设计.需求模糊.再加上一个只会说"先做个简单的出来,高层要马上上线"的领导.我想这程序跟设计就是再牛.再热情.估计做出来的也不会好到哪里去.
年后加了个人,虽然团队就仨人但他也算是项目经理,进行需求的收集与分析,全程指挥.时间不够,他会去跟高层交涉.页面表现困难,他会组织一起开会讨论,程序/数据库有问题他也会亲自操刀.
为什么一次通过,显而易见了.
值得注意的问题:
前期的需求收集与分析真的很重要.
专业知识强了,很难跳出这个圈从用户的角度去看问题,用户体验很难做.
领导只重视了客户.忘记了潜在客户.如果不产生利益的功能尽量的去掉,那很难发展用户了.这个还要找机会沟通.