• 在 input textarea 光标处 插入文本

    发表于 2017-03-24 13:05:29   |   下载附件
    inputtextarea光标位置插入文本
    // 在 input textarea 光标处 插入文本
    insertAtCaret:function(obj,str) {
        if (document.selection) {
            obj.focus();
            var sel = document.selection.createRange();
            sel.text = str;
            sel.select();  
        } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
            var startPos = obj.selectionStart,
                endPos = obj.selectionEnd,
                cursorPos = startPos,
                tmpStr = obj.value;
            obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
            cursorPos += str.length;
            obj.selectionStart = obj.selectionEnd = cursorPos;
            alert(2);
        } else {
        	alert(3);
            obj.value += str;
        }
    }
  • input placeholder 样式设置

    发表于 2017-03-09 17:57:29   |   下载附件
    inputplaceholdercss样式

    全局 input placeholder 样式设置

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    :-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    :-moz-placeholder { /* Firefox 18- */
      color: pink;
    }



    某一元素 input placeholder 样式设置

    input[type="email"].big-dog::-webkit-input-placeholder {
      color: orange;
    }
  • JavaScript hasOwnProperty() 函数详解

    发表于 2017-02-28 14:53:31   |   下载附件
    hasOwnPropertyhas对象是否含有该属性

    JavaScript hasOwnProperty() 函数详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false。

    该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。IE 5.5+、FireFox、Chrome、Safari、Opera等主流浏览器均支持该函数。

    object.hasOwnProperty("name")

  • 一套绝佳的图标字体库和CSS框架

    发表于 2017-02-21 11:08:27   |   下载附件
    图标字体css字体Font Awesome

    一套绝佳的图标字体库和CSS框架 http://fontawesome.dashgame.com/

    阿里巴巴矢量图标库 http://www.iconfont.cn/

  • js之事件冒泡和事件捕获详细介绍

    发表于 2017-02-20 11:55:41   |   下载附件
    事件冒泡事件捕获stopPropagationpreventDefault

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

    IE 5.5: div -> body -> document

    IE 6.0: div -> body -> html -> document

    Mozilla 1.0: div -> body -> html -> document -> window

    (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

    (3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

  • 手机端图片滑动切换效果

    发表于 2017-02-20 11:08:34   |   下载附件
    手机端图片滑动切换效果banner图片切换

    最近在研究手机端页面,其中有个简单的图片滑动效果,折腾了半天,于是我写了个小的demo。

    大概功能:自定义是否切换,支持滑动切换,循环切换等等,具体可以拿demo代码自己本地试试

    大概思路:把当前张显示,上一张定位在最前面,下一张定义在最后面,其他隐藏,通过touchstart、touchmove、touchend 三个事件加上css3的transition变

    化效果配合,实现滑动切换图片,效果类似于手机版京东的banner

    开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作符即可。

    下面是该效果的源码,明白思路的朋友可以自己封装成小插件注意:只支持手机端哦

  • css3 选择器备忘摘要

    发表于 2017-02-17 10:04:58   |   下载附件
    css3 选择器

    记心不好,偶尔想用某一个选择器时,可以查看这里:

  • CSS3动画的回调处理

    发表于 2017-02-17 09:51:04   |   下载附件
    css3动画结束回调事件transitionendmozTransitionEndwebkitTransitionEndwebkitAnimationEndanimationEndmozAnimationEnd

    我们在做js动画的时候,很多时候都需要做回调处理,如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等,但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢?

    CSS3动画也是可以做回调处理的,这里分为两个属性,一个是transition,另外一个是animation。


    1、transition

    对于transition,可以监听transitionend事件,当动画完成时触发,可以这样使用:

    2、animation

    对于animation我们可以监听animationend事件,示例代码如下:


  • 移动端下拉刷新、上拉加载更多的插件

    发表于 2017-02-16 16:56:35   |   下载附件
    下拉刷新、上拉加载HTML5touchstarttouchmove

    项目地址:https://github.com/jasonandjay/dropload


    a javascript implementation of pull to refresh and up to loadmore
    移动端下拉刷新、上拉加载更多插件


    背景介绍 (introduce):年前把tab例子加上来让群友测试,果然群众的力量是伟大的!立马就检测出来bug,我当即修复好,只是用法比较复杂,暂时还想不出更方便的办法。顺便把上个版本的dropReload() API删掉,功能集成到之前resetload()里。另外还修复一个朋友发现的只调用下拉刷新,代码判断bug。

  • 手机端实现多图片上传

    发表于 2017-02-16 15:16:17   |   下载附件
    手机端实现多图片上传
每页显示10条,当前为第8页,总页数为18页