Code our life 日日行，不怕千万里；时时学，不怕千万卷

19八/100

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;
});
标签: , , , , , , , 没有评论
9八/100

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;
}

其它

不知道有没有强制禁止竖屏或横屏的方法，希望知道的朋友告知一声:)

标签: , , , , , , , , , , 没有评论
13七/100

HTML5中的classList

HTML5的API加入了一个很有用的功能，那就是classList。
classList对象被添加在所有的DOM元素中，提供了DOM元素的class相关操作，如添加、删除等。
classList对象结构如下：

node.classList = {
	length: {number}, /* # of class on this element */
	add: function() { [native code] },
	contains: function() { [native code] },
	item: function() { [native code] }, /* by index */
	remove: function() { [native code] },
	toggle: function() { [native code] }
}

正如你所看到的，classList对象内容不多，但都是一些很有用的属性和方法。

添加一个class

myDiv.classList.add('myCssClass');

删除一个class

myDiv.classList.remove('myCssClass');

切换class

myDiv.classList.toggle('myCssClass');

检测元素是否拥有某个class

myDiv.classList.contains('myCssClass');

现在只有firefox支持classList这个对象。相信其他浏览器也会陆续支持。

标签: , , , , 没有评论
19一/100

记录：判定IE的各个版本

在Ruby's Louvre 上看了《判定IE的各个版本》这篇文章，记录下来：

var isIE = window.ActiveXObject;
    if(isIE){
        var isVersion = document.querySelectorAll ? 8.0 :
                            window.XMLHttpRequest ? 7.0 :
	                            document.compatMode ? 6.0 :
	                                (0).toFixed ? 5.5 :
	                                    document.getElementById ? 5.0 :
                                            document.all ? 4.0 :0;
    }
    alert("你的ie版本是"+isVersion);

在《判定浏览器》一文中介绍了判断浏览器的方法（通过特征）

1
2
3
4
5
6

var browser = window.ActiveXObject ? "ie" :
	window.opera ? "opera" :
	window.execScript ?"chrome":
	!navigator.taintEnabled ?"safari" :
	window.Components ? "firefox":"unknown"
alert(browser)
标签: , 没有评论
30十二/092

JavaScript调用对象属性的方法

今天在一个jq群里见到一个网友在问问题，在帮忙讲解了一些代码之后，那网友提到了这么一段代码

1

$(this)[hasSelected?"removeClass":"addClass"]("selected");

看了这段代码第一时间还没有反应过来，心想这段代码能执行吗？又看多了几下，终于反应过来了。

原来我一时没有想起javascript里面调用对象成员的一个特性，例如：

var obj = { name:'captain', age:'24' }

如果想调用obj的name属性，可以这样调用：

1

obj.name

还有一种方法就：

1

obj['name']

说到这里就很容易理解那位网友提到的那段代码了，

根据hasSelected的值来选择调用函数，例如hasSelected为true，则调用removeClass函数，这样就变成了这样：

$(this).removeClass("selected");

所以这段代码等价于:

1
2
3
4
5

if ( hasSelected ) {
    $(this).removeClass( "selected" );
} else {
    $(this).addClass( "selected" );
}

两种写法当然是各有好处，可读性与间接性你选择哪一种呢？

标签: , 2 评论
20十一/090

判断一个数是偶数还是基数

这原本是一个简单的问题，按照正常的逻辑来写：
var num = 10;
var isEven;
if ( num%2 == 0 ){
isEven = true;
} else {
isEven = false;
}

如果用三元运算，可以把代码写得更简练:
var isEven = (num%2==0) ? true : false;

有没有更简练的呢？有！
var isEven = !(num%2);

标签: 没有评论
4十一/090

javascript获取用户选择的文字


/* attempt to find a text selection */
function getSelected() {
// support by FF,OP,CH,
if(window.getSelection) { return window.getSelection(); }
// support by FF,OP,CH,
else if(document.getSelection) { return document.getSelection(); }
// support by IE,OP
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}

OP居然能全部支持，赞一个

标签: 没有评论
29九/090

使用Date对象要注意的问题

前几天asp.net部门的同事问我关于Date对象的一些问题，他在调试项目关于一个日历空间的js遇到了问题。我看了一下
关于Date对象的问题。记下来
[code]
var HT = 1000*60*60*24;
var now = new Date();
var yesterday = now - HT;
alert(new Date(yesterday));

var tomorrow = now + HT;
alert(new Date(tomorrow));
[/code]

对于第一个
var yesterday = now - HT;
js会把now自动转换成 “减” 操作，
但是第二个
var tomorrow = now + HT;
js只会认为是字符串连接。

标签: 没有评论
25八/090

javascript的闭合标签

今天上午写一个javascript的小demo，发现在FF下死活不能运行，在chrome下居然能运行
回到代码中检查，找了半天没有找到原因，放弃了。
中午过后，又不死心的检查了起来，在FF下查看源文件，发现了问题，我的源代码是这样写的：
1.<script type="text/javascript" src="/scripts/jquery.js"/>
2.<script type="text/javascript">
3.//do sth.
4.</script>
看上去没有什么问题，可是源码中的第二行<script type="text/javascript">，这句竟然没有被高亮显示(在FF下查看源码关键字会高亮显示)，我很奇怪，首先怀疑是拼写错误，可是检查了即便还是没有发现错误。

随后，打开chrome，查看源码。发现问题了！chrome把第一行解析成<script type="text/javascript" src="/scripts/jquery.js"></script>。我马上回到源码，修改成和chrome解析的一样，打开FF，运行成功。

总结：在页面加载js，无论是外联还是内联，都必须用</script>闭合

标签: , , 没有评论
24八/090

【转】判断Javascript变量类型的函数

转自：http://www.pjhome.net/article/Javascript/toString_get_type.htm

function getType(o) {
  var _t; return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}
标签: 没有评论
   下一页

页面

分类

网志串联

记录

Meta