Navigation like Themify Page
仿Themify首页的导航效果
无意中了解到Themify这个网站，看到首页的导航效果挺漂亮（实话说，主要是图片够漂亮），就仿造了一个。
点击查看demo
PS:这个demo没有什么技术含量，纯属做个记录。图片和css基本上是直接从Themify中copy过来的，js效果是自己实现，核心代码如下：
// 代码不多，加上没有什么技术含量，不做注释 var $contents = $('#slider .slides'); var $navs = $('#slider .slider-nav li'); $navs.click(function(){ var $this = $(this); $this.siblings().find('a').attr('class', ''); $('a', this)[0].className = 'activeSlide'; var index = $navs.index($this); var $content = $contents.find('li').eq(index); $content.fadeIn(); $content.siblings().fadeOut(); return false; });
Detection of iPad & iPhone & iPod
下一个项目是做Ipad的web应用，在网上做了一些功课，记录一些开发中可能会用到东西。
使用javascript判断设备类型
// platform的可能值为 iPad, iPod, iPhone
alert(navigator.platform);
对应横屏竖屏引用不同的css文件
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><!-- 竖屏 --> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"><!-- 橫屏 -->
用javascript判定当前是否横屏
alert(window.orientation)
- * window.orientation 为 0 表示竖屏
- * window.orientation 为 90 表示向左横屏（相对于设备下方的操作按钮）
- * window.orientation is -90 表示向右横屏（相对于设备下方的操作按钮）
- * window.orientation is 180 表示向反竖屏（相对于设备下方的操作按钮）
通过JS动态判断横竖屏
当用户进行横竖屏转换的时候，可以通过onorientationchange事件监听
通过CSS截取字符串，并用...结尾
.title { width:200px; white-space:nowrap; word-break:keep-all; // 目前在webkit下有效 2010.8.20 overflow:hidden; text-overflow:ellipsis; }
其它
不知道有没有强制禁止竖屏或横屏的方法，希望知道的朋友告知一声:)
【翻译】多文件上传
多文件上传
以往我打算是实现同时上传多个文件，会使用多个"file"表单元素，这是令人讨厌的，效率低下（译者注：用户需要一个文件一个文件地选择），但我无法想象我如果不使用它的话，我的用户会怎么样。很幸运，Safari, Chrome和firefox 现在已经实现了使用一个file表单元素就能完成完成多文件上传的方法。
查看DEMO
HTML
<form method="post" action="upload-page.php" enctype="multipart/form-data"> <!-- 译者注：注意這個multiple属性和name属性 --> <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> </form> <br/>
简单的给file 表单元素添加一个muliple属性就允许多文件上传了。(译者注：multiple的值的作用不清楚，原文的意思大概是可以添加验证功能)
Listing Multiple Files with JavaScript
//get the input and UL list var input = document.getElementById('filesToUpload'); var list = document.getElementById('fileList'); //清空列表 while (list.hasChildNodes()) { list.removeChild(ul.firstChild); } //遍历每一个选择上传的文件 for (var x = 0; x < input.files.length; x++) { //add to list var li = document.createElement('li'); li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; list.append(li); }
file表单元素的files属性是一个数组，所以可以通过length属性可以知道用户选择的文件。可以遍历得到每一个文件的路径(path)和名称(name)。
Receiving and Handling Files with PHP
使用PHP接收并处理文件
if(count($_FILES['uploads']['filesToUpload'])) { foreach ($_FILES['uploads']['filesToUpload'] as $file) { // 你可以在处理图片 echo $file; } }
PHP根据表单的那么属性创建了一个文件数组。
当然，你也可以在IE和opera中通过flash实现多文件上传，可是想这样要另外的组件支持始终不是什么好主意。希望这些浏览器快点支持多文件上传吧!
by 译者
评论中以外发现一个flash上传的jquery插件http://www.uploadify.com/，这段时间在弄大文件上传的处理方式，是使用swfupload这个组件实现的。
记录一下这个uploadify， 以后也许用得着:)
表单控件与文字的对齐
1.给表单属性添加 vertical-align:middle 属性，对于radio元素要特殊处理，因为radio默认margin: 3px 3px 0 5px，要将margin值设为相同。