【西安】求贤令:智讯互动渴求UI设计师一名

——听说你跳槽了?回西安了?
——恩。
——薪水很高吗?
——跟原来差不多。
——那你去那儿干啥?
——购买力增强三倍。
再次求贤,我们急需一名UI设计师!
基本要求:
·了解网站前端界面设计,对用户体验有深入理解;
·美术感好,有很强视觉表现力;
·对Flash、Photoshop、Illustrator等相关工具应用自如;
·美术、设计或相关专业
·痴迷于创意,热心于品牌视觉设计,善于把握潮流动向;
如有以下技能,狠狠加分!
·熟悉HTML语言,掌握Dreamweaver等制作工具;
·熟悉XHTML+CSS网页布局;
·熟悉Flash ActionScript 动画设计;
·有传统广告公司经验,或有成熟平面设计作品;
·有手绘功底。
薪资:
能力决定薪水!我们提供高于西安同行业的薪资。
公司介绍:
智讯互动,西安首家整合互动营销机构,已搞定西安最优质的客户,万事具备,只欠猛人。
我们提供与京广沪相同水平的薪水,在西安这座很有味道的城市,大家可以过上更体面的生活。
热切欢迎业内的西安游子回来。
我们的人才理念很简单:
·我们诚挚的邀请优秀的人才加盟,并为他们创造尽量宽松、愉快的工作环境。
·我们推崇专注而高效的工作,轻松开放的沟通,用创造性的想法解决问题。
·我们提供高于同城行业标准的薪水,能让你在这个城市里体面、有尊严的生活。
在我们的团队中,有艺术生、文科生、理科生、退学生;
有人热衷相声表演,有人钻研佛教文化,也有人喜欢泡淘宝和豆瓣;
有人是手持设备技术发烧友,有人是游戏狂人,霸占公司那台Wii;
我们鼓励背景各异的人在此互相分享,激荡创造力。
投递:
cnbluebird#gmail.com(非诚勿扰)

文本域光标操作(选、添、删、取)的jQuery扩展

最近的项目中,好几次用到操作文本域的方法,比如光标位置、删除光标前字符等。每次都是查阅资料(这部分操作涉及到的js方法都比较生僻),费时费事。于是就封装了一个jQuery扩展。
该针对文本域的扩展实现的功能及使用方法:
1、获取光标位置:$(elem).iGetFieldPos()
2、设置光标位置:$(elem).iSelectField(start)
3、选中指定位置内的字符:$(elem).iSelectField(start,end)
4、选中指定的字符:$(elem).iSelectStr(str)
5、在光标之后插入字符串:$(elem).iAdd(str)
6、删除光标前面(-n)或者后面(n)的n个字符:$(elem).iDel(n)
jQuery扩展代码:

;(function($){
    /*
     * 文本域光标操作(选、添、删、取)的jQuery扩展 @Mr.Think http://mrthink.net/text-field-jquery-extend/
     */
    $.fn.extend({
        /*
         * 获取光标所在位置
         */
        iGetFieldPos:function(){
            var field=this.get(0);
            if(document.selection){
                //IE
                $(this).focus();
                var sel=document.selection;
                var range=sel.createRange();
                var dupRange=range.duplicate();
                dupRange.moveToElementText(field);
                dupRange.setEndPoint('EndToEnd',range);
                field.selectionStart=dupRange.text.length-range.text.length;
                field.selectionEnd=field.selectionStart+ range.text.length;
            }
            return field.selectionStart;
        },
        /*
         * 选中指定位置内字符 || 设置光标位置
         * --- 从start起选中(含第start个),到第end结束(不含第end个)
         * --- 若不输入end值,即为设置光标的位置(第start字符后)
         */
        iSelectField:function(start,end){
            var field=this.get(0);
            //end未定义,则为设置光标位置
            if(arguments[1]==undefined){
                end=start;
            }
            if(document.selection){
                //IE
                var range = field.createTextRange();
                range.moveEnd('character',-$(this).val().length);
                range.moveEnd('character',end);
                range.moveStart('character',start);
                range.select();
            }else{
                //非IE
                field.setSelectionRange(start,end);
                $(this).focus();
            }
        },
        /*
         * 选中指定字符串
         */
        iSelectStr:function(str){
            var field=this.get(0);
            var i=$(this).val().indexOf(str);
            i != -1 ? $(this).iSelectField(i,i+str.length) : false;
        },
        /*
         * 在光标之后插入字符串
         */
        iAddField:function(str){
            var field=this.get(0);
            var v=$(this).val();
            var len=$(this).val().length;
            if(document.selection){
                //IE
                $(this).focus()
                document.selection.createRange().text=str;
            }else{
                //非IE
                var selPos=field.selectionStart;
                $(this).val($(this).val().slice(0,field.selectionStart)+str+$(this).val().slice(field.selectionStart,len));
                this.iSelectField(selPos+str.length);
            };
        },
        /*
         * 删除光标前面(-)或者后面(+)的n个字符
         */
        iDelField:function(n){
            var field=this.get(0);
            var pos=$(this).iGetFieldPos();
            var v=$(this).val();
            //大于0则删除后面,小于0则删除前面
            $(this).val(n>0 ? v.slice(0,pos-n)+v.slice(pos) : v.slice(0,pos)+v.slice(pos-n));
            $(this).iSelectField(pos-(n<0 ? 0 : n));
        }
    });
})(jQuery);

具体使用方法就不详述了,加载于扩展代码,然后根据扩展中的方法名调用即可。

基于jQuery的简易手风琴切换插件

最近确实忙碌。
正好接下来的工作中可能需要一个手风琴效果,就动手写了一个。其实有多个现成的jQuery手风琴插件可以用,但对比了一下,总感觉有些笨重,还是自己写的脉络自己最清楚,扩展起来也更容易些。
可用于图片或者容器,使用与常规jQuery插件调用方式无异。实现原理也不难理解,都在代码注释中。想研究的可以看下面的代码,或者样例演示。
jQuery代码:点此查看样列

;(function($){
    /*
     * 基于jQuery的简易手风琴切换插件@Mr.Think(http://mrthink.net/)
     */
    $.fn.iAccordion=function(iSet){
        var self=this;
        iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
        /*
         * Type: 鼠标事件类型,mouseover,click,mouseleave等
         * Select: 选择器,用以获取需要切换的元素集合
         * Cur: 默认展开元素的索引
         * InitInterval: 初始化手风琴效果动画间隔时间
         * Interval: 鼠标事件动画间隔时间
         * Easing: 动画效果,需要jQuery.easing支持,参数可参考jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
         */
        var item,boxW,selectW,animateW,sIndex,animateL;
        $(self).each(function(){
            //初始化容器样式
            $(this).css({'position':'relative','overflow':'hidden'});
            item=$(this).find(iSet.Select);
            //初始化切换元素样式
            item.css({'position':'absolute','left':0,'top':0});
            boxW=$(this).outerWidth();
            selectW=item.outerWidth();
            animateW=(boxW-selectW)/(item.size()-1);
            //初始化元素排列并为元素data一个索引值
            item.each(function(i){
                $(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing);
                $(this).data('index',i);
            }).on(iSet.Type,function(e){//绑定鼠标事件
                //获取当前元素索引值
                sIndex=$(this).data('index');
                    //鼠标事件动画,通过判断元素索引值与当前元素索引值的大小关系动画显示当前元素并动画排列
                    item.each(function(n){
                        n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n;
                        $(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing);
                    });
            }).eq(iSet.Cur).trigger(iSet.Type);
        });
    }
})(jQuery);

如何调用?
1、在页面中引入上面的插件代码;
2、$(selectmain).iAccordion({…});
3、相关参数及功能,请参考插件中的注释说明。

小小的提示,若需要定义Easing,需要导入jQuery.easing插件,Easing的参数即jQuery.easing的方法名称,如easeOutBounce、easeOutQuint等。

统一下拉列表样式并实现select样式高度自定义的jQuery插件

好像很久没有更新过博客了,哈~
发布一款最近写的jQuery小插件,用于统一下拉表样式并实现select样式高度自定义。select样式如同input[type=file]一样,各系统平台各浏览器显示的都不一样,特别是ie~一切影响美感的东西较真的UI设计狮们是不会妥协的。兵来将挡,水来土淹,为了保持最近一个公司项目中部分下拉列表的美观统一,用一种变通的方式为select穿上一套标准的新衣:不论平台不论浏览器样式统一、样式高度自定义、不破坏select原有结构与功能(这意味着后端程序仍可像调用普通select那样取值)。

原理无须多讲,在需要改变样式的select后插入一个div容器,同时隐藏掉select。然后把select的相关信息(optgroup/option/value/selected等)取出来用dl展现,如此一来,改变div容器中元素样式即可。记得前年写过一个用input[type=hidden]存值,用dl模拟下拉列表的插件。两者原理差不多,只是本文中的可能更人性化,使用起来更方便些。
jQuery代码:点此查看样列

;(function($){
    /*
     * 统一select样式并实现样式高度自定义的jQuery插件@Mr.Think(http://mrthink.net/)
     */
    $.fn.iSimulateSelect=function(iSet){
        iSet=$.extend({
            selectBoxCls:'i_selectbox', //string类型,外围class名
            curSCls:'i_currentselected',//string类型,默认显示class名
            optionCls:'i_selectoption',//string类型,下拉列表class名
            selectedCls:'selected',//string类型,当前选中class名
            width:222,//number类型,模拟select的宽度
            height:300,//number类型,模拟select的最大高度
            zindex:20//层级顺序
        },iSet||{});
        this.hide();
        return this.each(function(){
           var self=this;
           var thisCurVal,thisSelect,cIndex=0;
           //计算模拟select宽度
           if(iSet.width==0){
              iSet.width=$(self).width();
           }
           var html='<div class="'+iSet.selectBoxCls+'" style="z-index:'+iSet.zindex+'"><div class="'+iSet.curSCls+'" style="width:'+iSet.width+'px">'+$(self).find('option:selected').text()+'</div><dl class="'+iSet.optionCls+'" style="display:none;width:'+iSet.width+'px">';
           //判断select中是否有optgroup
           //用dt替代optgroup,用dd替代option
           if($(self).find('optgroup').size()>0){
               $(this).find('optgroup').each(function(){
                   html+='<dt>'+$(this).attr('label')+'</dt>';
                   $(this).find('option').each(function(){
                        if($(this).is(':selected')){
                          html+='<dd class="'+iSet.selectedCls+'">'+$(this).text()+'</dd>';
                       }else{
                          html+='<dd>'+$(this).text()+'</dd>';
                       }
                   });
               });
           }else{
               $(this).find('option').each(function(){
                   if($(this).is(':selected')){
                      html+='<dd class="'+iSet.selectedCls+'">'+$(this).text()+'</dd>';
                   }else{
                      html+='<dd>'+$(this).text()+'</dd>';
                   }
               });
           }
           //将模拟dl插入到select后面
           $(self).after(html);
           //当前模拟select外围box元素
           thisBox=$(self).next('.'+iSet.selectBoxCls);
           //当前模拟select初始值元素
           thisCurVal=thisBox.find('.'+iSet.curSCls);
           //当前模拟select列表
           thisSelect=thisBox.find('.'+iSet.optionCls);
           /*
           若同页面还有其他原生select,请前往https://github.com/brandonaaron/bgiframe下载bgiframe,同时在此处调用thisSelect.bgiframe()
            */
           //thisSelect.bgiframe();

           //弹出模拟下拉列表
           thisCurVal.click(function(){
              $('.'+iSet.optionCls).hide();
              $('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
              $(self).next('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex+1);
              thisSelect.show();
           });
           //若模拟select高度超出限定高度,则自动overflow-y:auto
           if(thisSelect.height()>iSet.height){
               thisSelect.height(iSet.height);
           }
           //模拟列表点击事件-赋值-改变y坐标位置-...
           thisSelect.find('dd').click(function(){
               $(this).addClass(iSet.selectedCls).siblings().removeClass(iSet.selectedCls);
               cIndex=thisSelect.find('dd').index(this);
               thisCurVal.text($(this).text());
               $(self).find('option').eq(cIndex).attr('selected','selected');
               $('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
               thisSelect.hide();
           });
           //非模拟列表处点击隐藏模拟列表
           //$(document)点击事件不兼容部分移动设备
           $('html,body').click(function(e){
                if(e.target.className.indexOf(iSet.curSCls)==-1){
                  thisSelect.hide();
                  $('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
              }
           });
           //取消模块列表处取消默认事件
           thisSelect.click(function(e){
              e.stopPropagation();
           });
        });
    }
})(jQuery);

如何调用?
1、在页面中引入上面的插件代码;
2、$(select).iSimulateSelect({…});
3、相关参数及功能,请参考插件中的注释说明。

若在ie6下,同页面中有未调用插件元素,为避免被原生select遮盖,请下载bgiframe插件,并在代码中关于bgiframe调用的公位置取消注释。另外,在调用插件的select后面插入的是一个相对定位元素,如果select前后还有其他行内元素,尽量使用float定位,或者给select外围加一个容器再进行绝对定位。

【上海】急募前端攻城师一名

帮朋友公司招的,偏开发,公司前景和发展状况都不错。
一些要求:
1、不拘泥于学历经验男女老少,但一定要专注专业;
2、熟练掌握并运用前端各项必备技能,诸如xhtml、css、js等;
3、如果你对上面的要求不知所云,也不清楚前端攻城师的职责,那说明你不适合这个职位,请绕行。

联系及薪资
薪资:实力决定报酬,5000起,上不封顶,外加资金福利。
欢迎投送简历:cnbluebird#gmail.com 或 306779974#qq.com


渔夫科技