WEB前端开发

收集的一些轻量级非常实用的前端开发小工具：
CSS3相关

1. CSS3样式生成器：http://www.css88.com/tool/css3Preview/
2. CSS3渐变样式生成器，类似Photoshop中的渐变界面：http://www.colorzilla.com/gradient-editor/
3. CSS3动画制作工具Sencha Animator：http://www.sencha.com/products/animator/
4. 背景色alpha透明工具：http://www.linxz.de/demo/hex_change.html（IE滤镜须是在一个有宽高设置的容器中，或者激活haslayout的属性。具体介绍：http://blog.linxz.de/ie_filter_css3_rgba/）–2011-01-18更新

Data URI

1. Encode Data URL(舜子开发的)http://www.css88.com/tool/DataURL/

转码工具

1. unicode转换工具：http://www.css88.com/archives/2093
2. encode转换工具：http://labs.pufen.net/views/convert_encoding.php | http://www.css88.com/tool/encode/convert_encoding.php（2011-05-24更新）

继续阅读：前端开发小工具集合（2011-05-24更新）»

在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。

IE下可以通过document.selection.createRange();获取光标位置，代码也很简单：

if (document.selection) {
    pos = document.selection.createRange();
    pos.text = "要插入的字符串";
}

Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。

if (obj.selectionStart || obj.selectionStart == '0') { //obj是文本框对象
    var startPos = obj.selectionStart;
    var endPos = obj.selectionEnd;
    obj.value = obj.value.substring(0, startPos) + "要插入的字符串" + obj.value.substring(endPos, obj.value.length);
    obj.selectionStart = startPos + myValue.length;
    obj.selectionEnd = startPos + myValue.length;
} else {
    obj.value += "要插入的字符串";
}

这些可以查看Javascript在光标位置插入内容；

现在微博很火，我们可以尝试一下插入话题，你点击话题，在光标位置就会插入：#请在这里输入自定义话题#，注意，“请在这里输入自定义话题”这几文字是被选中，你可以直接敲打键盘编辑文本。
在火狐下先对比较简单，我们只要在上面的代码中插入一句就可以了：
obj.setSelectionRange(startPos-t,obj.selectionEnd+t);
t是根据数值选中插入文本内容两边的边界数值，如：0是表示插入文字全部选择，-1表示插入文字两边各少选中一个字符。 继续阅读：【jQuery插件】insertContent-在文本框光标位置插入内容并选中»

工作职责：

负责医道网及旗下微博、文库、调研等子站的前端代码实现。

工作要求：

1. 熟练编写结构良好各浏览器兼容的CSS，语义化的符合W3C标准的HTML；
2. 熟练使用jQuery编写高性能的交互效果；
3. 注重用户体验，喜欢不断地重构，对可访问性有所了解；
4. 了解HTML5和CSS3，能够并乐于把它们优雅降级地运用在实际项目中；
5. 逻辑分析能力强，有良好的团队合作精神。

加分项：

1. 喜欢微博，并且在 Twitter 或 Weibo.com 上是一个话痨；
2. 你是一位MAC党，Steve Jobs是你的偶像，因此你能够做iOS开发；
3. 有后端技术的基础，如Ruby、Python。

公司名称、宣传片：

上海翼多（eDoctor）信息咨询有限公司: http://v.youku.com/v_show/id_XMjY2MjQ3MzM2.html

关于我们：

eDoctor is an innovative healthcare communication agency.We are building a continually improving online community of the top-ranking doctors.We believe that our site has the potential to become the largest sources of high-quality information available anywhere and the best tool for sharing and acquiring medicinal knowledge.eDoctor is revolutionizing the way doctors collaborate across China.

We’re looking for people to help us achieve our vision.We are committed to building a cutting-edge technology company where people love to work and can be as productive as possible.We also have a culture of optimizing for learning and growth as we strive to continually improve as individuals and as a team.

简历投递：job[a]edoctor1.com （请把“[a]”换成“@”）

PS:此插件存在性能问题，请慎用！敬请期待新插件，预计6月发布！

项目中有一个类似于新浪腾讯微博文本域字符数判断，就是想腾讯微博和新浪微博那样，判断文本框中最多嫩输入140个字，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。如果超出就提示！并且实时提示可是输入的文字数。

去年也曾经写过类似一个脚本（http://www.css88.com/archives/2027），只是将上次的代码封装成了jquery插件，做了一点点的性能优化，主要是在文本域获取焦点的时候触发setInterval，文本域失去焦点就clearInterval。
调用方式： 继续阅读：【jQuery插件】chackTextarea-类似于新浪腾讯微博文本域字符数判断»

工作职责：

负责这里网（zheli.com）的WEB页面的制作及设计

工作要求：

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

公司名称：北京群熠创想信息技术有限公司

网址：http://www.zheli.com

联系方式
请将简历发到：

Bryan#zheli.com[#换成@]

Gtalk: zhaozuoyang#gmail.com[#换成@]

QQ: 17335553

在web开发在获取图片宽高是很正常的事情，图片在加载完成前是获取不到图片的宽高的，在加载完成后才可以获取图片本身的宽高，例如：

var img = new Image();
img.src = "loading.gif";
img.onload = function(){
alert ( img.width );
};

var img = new Image();
img.onload = function(){
alert ( img.width );
};
img.src = "loading.gif";

要求：

学历专科以上
相关岗位工作经验一年以上

优先招聘：

技术深广度具备
文档能力
沟通能力
授课能力 继续阅读：腾讯深圳互联网用户体验设计部 招聘 前端开发工程师»

公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果，例如：

这个在很早以前其实已经写过，请移步：http://www.css88.com/archives/1943

当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了，position：fixed，可以在IE7+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，使用position：absolute属性代替，重新计算top值。

具体代码如下：

/**
 * @author 愚人码头
 * 类似于新浪微博新消息提示的定位框
 * 更多http://www.css88.com/archives/3515
 */
(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);

        var FixedFun = function(element) {
            var top = opts.top;
            var right = ($(window).width()-opts.pageWidth)/2+opts.right;
            element.css({
                "right":right,
                "top":top
            });
            $(window).resize(function(){
                var right = ($(window).width()-opts.pageWidth)/2+opts.right;
                element.css({
                    "right":right
                });
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {

                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
	right : 100,//相对于页面宽度的右边定位
        top:100,
        pageWidth : 960
	};
})(jQuery)

调用：

$("#float").capacityFixed({
	right : 100,//相对于页面宽度的右边定位
        top:100,
        pageWidth : 960
	});

查看demo：http://www.css88.com/demo/capacityFixed/

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

工作职责：

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

工作要求：

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

请发送简历到：

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