Long Dropdowns
Demo: http://css-tricks.com/examples/LongDropdowns/
var maxHeight = 400;
$(function(){
$(”.dropdown > li”).hover(function() {
var $container = $(this),
$list = $container.find(”ul”),
$anchor = $container.find(”a”),
height = $list.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller
// need to save height here so it can revert on mouseout
$container.data(”origHeight”, $container.height());
// so it can retain it’s rollover color all the while the dropdown is open
$anchor.addClass(”hover”);
// make sure dropdown appears directly below parent list item
$list
.show()
.css({
paddingTop: $container.data(”origHeight”)
});
// don’t do any animation if list shorter than max
if (multiplier > 1) {
$container
.css({
height: maxHeight,
overflow: “hidden”
})
.mousemove(function(e) {
var offset = $container.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data(”origHeight”) * multiplier);
if (relativeY > $container.data(”origHeight”)) {
$list.css(”top”, -relativeY + $container.data(”origHeight”));
};
});
}
}, function() {
var $el = $(this);
// put things back to normal
$el
.height($(this).data(”origHeight”))
.find(”ul”)
.css({ top: 0 })
.hide()
.end()
.find(”a”)
.removeClass(”hover”);
});
// Add down arrow only to menu items with submenus
$(”.dropdown > li:has(’ul’)”).each(function() {
$(this).find(”a:first”).append(”<img src=’images/down-arrow.png’ />”);
});
});
iPhone Human Interface Guidelines for Web Applications
It’s essential to keep in mind, for example, that instead of the layered windows, desktop, mouse, and file system with which you’re familiar, iPhone has a small, fixed screen size, a browser interface supplied by Safari on iPhone, a touch-based input system, and no accessible file system.
Almost by definition, users use iPhone while they are mobile. Whether they’re in a car or a train, sitting in a cafe or on a park bench, taking a walk, shopping, or waiting for an appointment, users use iPhone in environments that are likely to be filled with distractions. This does not mean that your iPhone solution can’t or shouldn’t perform important tasks that require users to concentrate. But it does mean that you must be prepared for the probability that users will not be giving their undivided attention to your content, at least not for long.Above all, therefore, your iPhone content must be quick and extremely easy to use. You need to grab the user’s attention immediately and help them access the most valuable parts of your content quickly.
Safari on iPhone provides the interface for all web content on iPhone. Although Safari on iPhone is similar in many ways to Safari on the computer desktop, it is not the same. You need to work within the feature set Safari on iPhone makes available and provide workarounds if you typically use Safari features available on the desktop that are unavailable on iPhone. For information on all the differences between Safari on iPhone and Safari on the desktop and how to accommodate them, see Creating Compatible Web Content.
HTML5-Canvas
<canvas>是html5当中的一个标签，通过Javascript来画图。
<canvas id=”canvas” width=”150″ height=”150″></canvas>
<script>
var canvas = document.getElementById(”canvas”);
var ctx = canvas.getContext(”2d”);
ctx.fillStyle = “rgb(0,0,200)”;
ctx.fillRect(10, 10, 50, 50);
</script>
画图形
这是canvas的网格，刚才的图形，x=10,y=10, width=150, height=150
不像svg, canvas仅支持一种图形-矩形，所有其它复杂的图形都是通过一些函数来组成的。
画矩形
fillRect(x,y,width,height) : 画一个填充的矩形
strokeRect(x,y,width,height) : 为一个矩形描边
clearRect(x,y,width,height) : 清楚一个矩形的一部分并且设为透明
rect(x, y, width, height)
直接画矩形，当调用rect方法时moveTo会直接定位到(0,0)位置
画路径
beginPath() 创建路径的第一步是调用beginPath方法，返回一个存储路径的信息
closePath() 从当前的点到起始点闭合路径
stroke()描边路径
fill()填充路径
lineTo(x, y) 从上一个起点到(x,y)的点画线，上一个起点可以通过moveTo来指定，默认为原先路径的终点
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
继续阅读 »