WEB前端开发

腾讯（北京）招聘web设计制作 2人

工作职责：

负责腾讯汽车WEB页面的前台制作及设计

工作要求：

1. 精通html/xhtml、css等网页制作技术，熟悉页面架构和布局
2. 熟悉JavaScript或ActionScript，能有处理一般网页script代码
3. 熟悉Web标准和SEO基本操作模式
4. 对JS的各种特性以及浏览器兼容性有丰富实战经验
5. 熟练使用photoshop等网页设计软件
6. 具有良好的团队和积极主动的沟通意识
7. 具备强烈的进取心和求知欲，勇于挑战
8. 熟悉汽车产品或汽车爱好者优先

请发送简历到：

auto#tencent.com (#换成@)，请在邮件主题中注明“应聘腾讯汽车频道_职位_姓名”字样。

昨天愚人节，逛pinterest.com的时候，发现页面上的有些地方翻转了，着实被愚了一把。

所以在自己的博客上也加了一下效果，具体的实现通过ie滤镜和css3旋转，具体代码：

html{filter:fliph}/*ie fliph(水平翻转滤镜)，还有flipv垂直翻转滤镜*/
body{-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-moz-transform: skew(0deg, 180deg) scale(-1, 1);
-o-transform: skew(0deg, 180deg) scale(-1, 1);}

一个意外的结果是昨天的访问数增加了1000+；

同事啄米鸟推荐了我一个web版firebug，适用大多数浏览器，确实不出，主要可以用于IE的CSS样式调试，因为IE developer toolbar和IE8自带的调试工具太难用了。
 

 
在网页head 部分上面 这个JS 即可使用web版firebug：

“ <script type=”text/javascript” src=”https://getfirebug.com/firebug-lite.js”></script> ”

如果想查看在线的页面元素，版主给了如下方法：

<a href="javascript:(function(){var d=document, s=d.getElementById('firebug-lite');if(s!=null)return;s=d.createElement('script');s.type='text/javascript';s.src='https://getfirebug.com/firebug-lite.js';d.body.appendChild(s);})();void(0);">firebug-lite</a>

运行上面的HTML代码，在 “firebug-lite” 的连接上点右键选择“添加到收藏夹”（这个应该针对IE，chrome右键没有加入收藏），把这个连接添加到收藏夹。然后打开任意一个网页，打开后，在收藏夹中找到刚才添加的这个，点一下，再等一小会儿，你就会看到 网页的右下角有“firebug”的这个工具了。

官网：http://www.getfirebug.com/firebuglite

前段时间领导给我看了一个网站：http://pinterest.com/，
Pinterest 这个名字还算容易理解：「Pin」就是用图钉往墙上钉东西，「interest」就是趣味。

通过 Pinterest ，你可以：
1) 发现有趣的图片——设计、摄影、产品、新闻——并刺激灵感；
2) 将有趣的图片归类——tag、board、category、source——并分享给好友。

一打开Pinterest你会被那些漂亮的图片和网站的杂志风格所吸引。非常强的视觉冲击。
当然今天不是讨论产品的东西，Pinterest的布局非常有意思，按照列排，宽度自适应。正好知道jquery有个叫Masonry的插件,这个插件非常合适做Pinterest类似的布局，而且非常简单。我做了一个简单的类似Pinterest布局的demo，html和css是Pinterest的。

查看demo：http://www.css88.com/demo/jquery-masonery/；

jQuery Masonry插件的参数也很简单：

$('#wrapper').masonry({

  singleMode: false,
  // 禁用测量每个浮动元素的宽度。
  // 如果浮动元素具有相同的宽度，设置为true。
  // 默认： false

  columnWidth: 240,
  // 1列网格的宽度，单位为像素（px）。
  // 默认： 第一个浮动元素外宽度。

  itemSelector: '.box:visible',
  // 附加选择器，用来指定哪些元素包裹的元素会重新排列。

  resizeable: true,
  // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动.
  // 默认：true

  animate: true,
  // 布局重排动画。
  // 默认：false

  animationOptions: {},
  // 一对动画选项，具体参数可以参考jquery .animate()中的options选项，见：http://www.css88.com/jqapi/#p=animate

  appendedContent: $('.new_content'),
  //  附加选择器元素，用来尾部追加内容。
  // 在集成infinitescroll插件的情况下使用。

  saveOptions: true,
  // 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
  // 默认：true

},  function() {}
  // 可选择的回调函数
  // 'this'将指向重排的Masonry适用元素
);

更多关于masonry的demo参见http://desandro.com/resources/jquery-masonry/

今天在tutorialzine上看到一个下拉框美化的jquery插件，非常漂亮，见原文：http://tutorialzine.com/2011/02/converting-jquery-code-plugin/。

当然在ie下您可能要修改一些样式，提高兼容性。

查看demo页面：http://www.css88.com/demo/jquery-tzSelect/

demo下载

今天测试了jquery版本升级，本来想升级到jQuey1.5的，但是结果很悲剧，问题只要几种在json格式的Ajax请求。

大家都知道jQuery1.5重写了Ajax模块，不过还有很多bug，点此查看人家提交的bug：http://bugs.jquery.com/search?q=1.5+ajax&noquickjump=1&ticket=on，

我今天碰到的是类似这个http://bugs.jquery.com/ticket/8302，就是在指定ajax dataType: “json”的时候，将无法正常解析“{“state”:1,”newMsgNum”:1,”newNoticeNum”:0}”，问题很悲剧，我把dataType改成script或者去掉dataType就可以正常解析，以为如果不指定dataType，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。更加悲剧的是，我的json数据的 http://www.sodao.com/message/GetUserMessageData http头信息中的Content-Type明明是 application/json。

慎用jQuery1.5！

弄了一个简单的弹出层dialog效果，满足了基本的需求,不过还没完成，由于最近忙别的事情，所以暂时不做这个了，先分享一下。

基本参数：

本插件自己打印链接中指定的页面，可以通过以下方式和参数传递：

$(select).printPage(
{attr : “href”,//链接的href属性
url : false,//特定的url，
message: “请稍后，真正为您准备文档…” }
);

demo页面：http://www.css88.com/demo/jQuery-printPage-plugin/

注意：在IE下打印页面，背景图片和背景颜色默认不打印
解决方案：
在IE的工具里，Internet选项–>高级–>打印（打印背景颜色和图像）选中即可

在jQ1.4以前我们创建DOM并且添加到DOM树大致是这样的：

var oNewp = $("<p>我测试成功了</p>");
oNewp.addClass("red").appendTo("#target");

或者，稍微复杂一点：

$("<div></div>")
.attr("id","css")
.height(90)
.css("border","1px solid #000")
.html("fuck world!")
.appendTo(document.body);

jQuery1.4带来了一个全新的便捷地清晰的DOM对象创建方法，在 jQuery 1.4中，我们可以传递一个对象作为第二个参数。 这个参数接受一个属性的集合，这些可以传递给.attr() 方法。此外，一些event type（事件类型）能通过， 而且后面的jQuery方法能够调用： val, css, html, text, data, width, height, or offset。详见：http://www.css88.com/jqapi/#p=jQuery

例如，我们创建一个文本框：

$("<input />",{
	"class":"bg-yellow",
	"id":"fuck",
	css:{
		"border":"1px solid #000",
		"font-size":"25px"
	},
	value:"fuck world!",
	focusin:function(){
		$(this).css("border","5px solid #FF3300");
	},
	focusout:function(){
		$(this).css("border","1px solid #000");
	}
}).appendTo(document.body);

例如，我们创建一个容器：

$("<div></div>",{
"class":"bg-yellow",
	"id":"fuckie",
	css:{
		"border":"1px solid #CDCDCD",
		"font-size":"25px"
	},
	html:$("<a>",{
		href: '#',
		html:"hello world!",
	click: function(event) {
			$("#fuckie").css("background-color","#FF3300");
			alert("fuck world!!!!!!!!!!");
			event.preventDefault();
		}
	})
})

}).appendTo(document.body);

参看非常简陋的demo：http://www.css88.com/demo/jqueryCreatDom/