【jQuery插件】Twitter Search

由 愚人码头 撰写  |  2010/04/11 22:31 发表在 JS与RIA, 前端框架  |  评论 (2)

前几天网上看到一个Twitter Search的jQuery插件。

比如我们要列出Twitter上的关于“jQuery”的条目我们可以使用：

$(‘#id’).twitterSearch(‘jQuery’);

当然你还可以设置一些参数，比如：


$('#twitter-jQuery').twitterSearch({

term:'jQuery',

title:'jQuery Chatter',

titleLink:'http://www.jquery.com',

birdLink:'http://twitter.com/jquery',

css:{

img: {width: '30px', height: '30px' }

}
});

还可以设置设置一些动画等效果：


$('#twitter3').twitterSearch({
term:   'Butler basketball',
// no fade
animOut: { opacity: 1 },
avatar:  false,
anchors: false,
bird:    false,
colorExterior: '#ddd',
colorInterior: 'white',
pause:   true,
time:    false,
timeout: 2000
});

demo：http://www.css88.com/demo/jquery_twitter/

官方网站：http://jquery.malsup.com/twitter/

该日志被浏览1568次 标签：:, | 阅读全文

【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG（2010年3月30日更新）

由 愚人码头 撰写  |  2010/03/30 18:58 发表在 (x)html+css, 前端名博  |  评论 (23)

在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。

在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。

未标题-1

目前解决办法，使用csshack,_left针对ie6进行重设。

另：IE6 BUG大全： http://www.css88.com/archives/579

===========================以下内容2010年3月30日更新=============================

今天收到robertsky123的留言（见留言区）：

一些样例请测试好再传，会误导读者的，还有ie与其他主流浏览器的盒模式是一样的，不是ie定了width在加padding就不会改变宽度也是改变的， 网上有些东西很容易误导读者，请博主对读者负责啊！

非常感谢robertsky123的留言和建议！由于robertsky123当头棒喝使我重新对该问题进行了测试。

确实该问题还有其他的解决：不过这些方案很和实际项目有关，比如这个父级容器是否顶宽定高等其他原因。

首先看问题的产生,HTML和CSS如下：


<div style="position:relative; padding:20px; border:2px solid #F00;">

<div style="position:absolute; top:0; left:0; border:1px solid #690;">test box</div>

</div>

显示如图：

Read More »

该日志被浏览6511次 标签：:, | 阅读全文

js获取隐藏元素(display:none)的尺寸

由 愚人码头 撰写  |  2010/03/25 21:13 发表在 JS与RIA  |  评论 (3)

js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：


function getDefaultStyle(obj,attribute){ //  返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
return  obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

具体可以查看：http://www.css88.com/archives/625

但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没有物理尺寸的！ 悲剧就这样发生了！

幸好css中还有visibility:hidden，不可见属性，他和display:none最大的区别就是visibility:hidden有物理尺寸。有物理尺寸就可以通过上面的方法获取尺寸，但是将display:none改成visibility:hidden后页面就有一块空白在那里，即使在你获取尺寸后在马上将visibility:hidden改成display:none页面那部分还是会抖动一下。那么最好的办法就是将这个隐藏的元素移出屏幕或者脱离文档流（ position: absolute）。这样似乎非常完美了，但是悲剧又发生了，如果你要再显示这个元素的时侯这个元素是不可见的，位置也不对，因为这是这个元素visibility:hidden;position: absolute。所以在获取尺寸后还要将样式还原回去。就是将position和visibility属性设回原来的样式。 Read More »

该日志被浏览1790次 标签：:, | 阅读全文

删除了一批友情链接，如有误删请联系我

由 愚人码头 撰写  |  2010/03/13 16:43 发表在 前端观察  |  评论 (3)

删除了一批友情链接，主要是由于这些站点删除了我的链接或者站点打不开了，或者网站换了性质！

您可以通过该页查找链接是否被我删除：http://www.css88.com/links

如有误删请联系我！feiwen8772[a]gmail.com或者给我留言，我会尽快恢复链接。

重申一下本博客友情链接要求：

1.前端开发相关的网站和博客；

2.必须放在首页上；

3.如果删除本站链接请告知本人（谢谢配合）；

该日志被浏览1193次 标签： | 阅读全文

Transform Matrix(矩阵变形)-Css3演示

由 愚人码头 撰写  |  2010/03/13 15:37 发表在 未分类  |  评论 (3)
transform: matrix矩阵变形的几点说明：
  • Matrix是transform的一个子集，基本语法transform: matrix(a, c, b, d, tx, ty);
  • a, c, b, d是一个二维矩阵: 
       ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   tx, ty就是就是基于X和Y 坐标重新定位元素。
  • tx, ty参数值在各个浏览器下有差异：
    • firefox下tx, ty除了0值之外必须只用长度单位值（“px”，“em”等）或者使用百分数
    • webkit和opera下tx, ty的值部门加单位或者百分数，他们就是一个数值，默认单位是px；
  • IE有对应的滤镜： filter: progid:DXImageTransform.Microsoft.Matrix ,本例中可以设置M11，M12，M21，M22这四个值在ie下的效果

Transform  Matrix(矩阵变形)演示地址：http://www.css88.com/tool/css3Preview/Transform-Matrix.html

该日志被浏览1484次 标签：:, , , , | 阅读全文

南京科泰信息科技有限公司急聘前端开发工程师

由 愚人码头 撰写  |  2010/03/12 19:56 发表在 前端招聘  |  评论 (0)
必要技能
1. 精通CSS，能编写结构良好，各浏览器兼容的CSS
2. 精通HTML，能编写结构良好，语义化的符合W3C标准HTML
3. 掌握javascript，以及常用框架如 jQuery
4. 需要要有一定的设计基础，会用ps等设计工具
5. 对用户体验，可用性有深刻理解
6. 至少一年相关经验
附加技能
1. 有一定的编程基础，能看懂 ruby on rails 代码
2. 有一定的actionscript基础，了解flex
3. 有一定的SEO经验
工作地点：南京
此职位暂时不考虑没有相关经验的应聘者
请中英文简历发到zhh-1220@hotmail.com，
邮件名称写“姓名+应聘职位+信息来源”。
该日志被浏览1155次 标签：: | 阅读全文

transform(变形)和transform-origin(变形原点)-Css3演示

由 愚人码头 撰写  |  2010/03/12 18:19 发表在 (x)html+css, html5+css3  |  评论 (2)
transform(变形)和transform-origin(变形原点)的说明：
  • 目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为 -webkit-transform，-moz-transform，-o-transform;
  • transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
    • 语法：-moz-transform-origin: [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | bottom ] ?
    • transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;
    • top left | left top 等价于 0 0；
    • top | top center | center top 等价于 50% 0
    • right top | top right 等价于 100% 0
    • left | left center | center left 等价于 0 50%
    • center | center center 等价于 50% 50%（默认值）
    • right | right center | center right 等价于 100% 50%
    • bottom left | left bottom 等价于 0 100%
    • bottom | bottom center | center bottom 等价于 50% 100%
    • bottom right | right bottom 等价于 100% 100%
  • transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ，他有几个属性值参数：
    • rotate(旋转)允许你通过传递一个度数值来转动一个对象；
    • scale是一个缩放功能，可以让任一元素变的更大。它使用一个或者两个正数和负数以及小数作为参数；当使用一个参数时表示X轴和Y轴的缩放相同；
    • translate就是基于X和Y 坐标重新定位元素，当使用一个参数时表示X轴和Y轴的参数相同；
    • skew倾斜（ps中的斜切），参数是度数，当使用一个参数时表示X轴和Y轴的参数相同；
    • matrix矩阵变换，就是基于X和Y 坐标重新定位元素，它使用6个参数 ，本例中未涉及；

transform(变形)和transform-origin(变形原点)演示地址：http://www.css88.com/tool/css3Preview/Transform.html

该日志被浏览1723次 标签：:, , , | 阅读全文

Firefox的Linear Gradients (线性渐变) -Css3演示

由 愚人码头 撰写  |  2010/03/11 21:54 发表在 (x)html+css, html5+css3  |  评论 (2)
Firefox的Linear Gradients (线性渐变)的几点说明：
  • Firefox的Linear Gradients (线性渐变) 基本语法：background-image:-moz-linear-gradient([<point> | | <angle>，] , 开始颜色值,结束颜色值, [(停靠颜色值,偏移量百分数),...] );
  • -moz-linear-gradient是background的一个属性值；
  • 第一组参数<角度位置>为非常灵活，他的基本组成点位 <point> （ 渐变的出发点 ）和角度；
    • <point> 渐变的出发点: 它可以被指定为一个百分比，像素，或使用“left”，“center”或“right”的水平和“top”，“center”，或“buttom”的垂 直定位。 位置从最受影响的元素左上角。
    • 如果只在水平渐变的话，只要设置：“left center”或“right center”，如果垂直渐变的话设置“center top”或者“center buttom”。Firefox下可以省略掉 “center”，也就是如果只在水平渐变的话，只要设置：“left”或“right”，如果垂直渐变的话设置“top”或者“buttom”。（查看例子）
    • 如果这两个值是百分比的值的话，那么第一个是水平渐变位置，第一个是垂直渐变位置，这个时候还需要一个角度值，比如 “90deg”；这个可以看本页的例子；
    • 还可以是只有一个角度值。（查看例子）
  • (开始颜色值),(结束颜色值)是两个渐变颜色值；
  • [(停靠颜色值,偏移量百分数),...]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移 量必须为0%~100%；
  • webkit内核的safari、 Chrome下的Linear Gradients (线性渐变) 请参阅：http://www.css88.com/archives/2154
  • ie下可以使用渐变滤镜，请参阅： http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx

Firefox的Linear Gradients (线性渐变)的演示：http://www.css88.com/tool/css3Preview/Linear-Gradients-moz.html

该日志被浏览1451次 标签：:, , , | 阅读全文

webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示

由 愚人码头 撰写  |  2010/03/08 16:35 发表在 (x)html+css, html5+css3  |  评论 (3)
webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示：
  • webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
  • -webkit-gradient是background的一个属性值；
  • webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）为 linear；
  • 第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%，当x1,x2,y1,y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），,y1和y2可以取值top（或0%）或bottom（或100%）；
    • 当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
    • 当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
    • 当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
    • 当x1等于x2，y1等于y2，实现没有渐变，取from色，即“ from(颜色值) ”；
  • 实现垂直渐变和水平渐变渐变时，x1和x2可以最简单的取值是left（或0%）或right（或100%）,y1和y2可以最简单的取值是top（或0%）或bottom（或100%）；
  • from(开始颜色值),to(结束颜色值)是两个渐变颜色值；
  • [color-stop(偏移量<小数>,停靠颜色值),...]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移量必须为小数，如果偏移量>=1,那么该color-stop相当于无效；
  • firefox下的Linear Gradients (线性渐变) 请参阅：
  • ie下可以使用渐变滤镜，请参阅： http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
webkit内核的safari、 Chrome的Linear Gradients (线性渐变)演示地址：http://www.css88.com/tool/css3Preview/Linear-Gradients.html
该日志被浏览1685次 标签：:, , , | 阅读全文

border-radius(圆角)-css3演示

由 愚人码头 撰写  |  2010/03/06 00:06 发表在 (x)html+css, html5+css3  |  评论 (2)
border-radius(圆角)的几点说明：
  • border-radius:长度
  • Firefox支持border-radius(圆角)：-moz-border-radius:2px;
  • webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;
  • Opera支持border-radius(圆角)：border-radius:2px;
  • IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera（css3）、中的具体书写格式如下：
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圆角)还有其他一些用法，Firefox、webkit内核的Safari和Chrome和opera（css3）其他写法有些略微的差异，具体可以查看以下网址：https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

演示地址：http://www.css88.com/tool/css3Preview/Border-Radius.html

该日志被浏览1667次 标签：:, | 阅读全文