JS实用插件

浏览数：51 / 时间：2015年06月09日

1. jQuery鼠标滚轮事件插件Mouse Wheel

　　下载链接：https://github.com/brandonaaron/jquery-mousewheel/

　　使用方法：

// using bind
$(‘#my_elem‘).bind(‘mousewheel‘, function(event, delta) {
console.log(delta);
});

// using the event helper
$(‘#my_elem‘).mousewheel(function(event, delta) {
console.log(delta);
});

　　要注意的是回调函数的第二个参数delta，它响应滚轮的方向，当为负数时表示向下滚动，为正则表示向上滚动。

2. javascript路由插件

　　Crossroads.js, Director.js或是Sammy.js

　　推荐Crossroads.js 使用详情google或百度

3. 复制到剪切板插件 zeroclipboard

　　下载地址：http://zeroclipboard.org/

　　使用方法：　

<div id="click" data-clipboard-text="111111111111">点我复制</div>

if($.browser.msie){
     $("#click").click(function(){
                var text = $("#click").attr("data-clipboard-text");
                clipboardData.setData("Text",text);
      });
}else{
    window.client = new ZeroClipboard( $("#query_sql_click"));
}

4. jQuery 实现标点内容自动保存插件sisyphus.js

　　下载地址：http://sisyphus-js.herokuapp.com/

　　实用方法：$(‘form‘).sisyphus();　

　　设置选项，用户可随意进行设置：

　　customKeyPrefix：自定义本地存储文件头

　　timeout：间隔多长时间对数据进行自动保存。如果设置为0,那么所以字段更改都将被自动保存

　　onSave：每次数据自动保存到本地存储将触发的函数。

　　onRestore：如果数据从本地存储被恢复，触发的函数。

　　onBeforeRestore：数据从本地存储恢复之前被触发。该函数只触发一次

　　onRelease：本地存储清空之前将触发该函数。

　　autoRelease：设置本地自动保存的表单数据是否在表单提交或者重置的时候自动清空。如果设置为false，为自己手动擦除本地存储的数据，插件专门提供了　　　　manuallyReleaseData方法进行擦除。

　　excludeFields：从选定的表单中排除指定的字段。如$( "textarea, :text" )

　　name：表单的识别部分。sisyphus本地存储表单文件的名称。默认情况下为当前页面URL地址，是一个确定值。如果一个页面有多个地址，为了获取一致的数据，请设置一个唯一的name值。

　　例如：下面的代码将对当前页面所有表单每5秒自动进行数据保存：

　　$(‘form‘).sisyphus({timeout: 5});

5. placeholder插件

　　百度很多这个插件有的ie不管用下面这个是ie有用的

/*! http://mths.be/placeholder v2.0.8 by @mathias */
;(function(window, document, $) {

    // Opera Mini v7 doesn’t support placeholder although its DOM seems to indicate so
    var isOperaMini = Object.prototype.toString.call(window.operamini) == ‘[object OperaMini]‘;
    var isInputSupported = ‘placeholder‘ in document.createElement(‘input‘) && !isOperaMini;
    var isTextareaSupported = ‘placeholder‘ in document.createElement(‘textarea‘) && !isOperaMini;
    var prototype = $.fn;
    var valHooks = $.valHooks;
    var propHooks = $.propHooks;
    var hooks;
    var placeholder;

    if (isInputSupported && isTextareaSupported) {

        placeholder = prototype.placeholder = function() {
            return this;
        };

        placeholder.input = placeholder.textarea = true;

    } else {

        placeholder = prototype.placeholder = function() {
            var $this = this;
            $this
                .filter((isInputSupported ? ‘textarea‘ : ‘:input‘) + ‘[placeholder]‘)
                .not(‘.placeholder‘)
                .bind({
                    ‘focus.placeholder‘: clearPlaceholder,
                    ‘blur.placeholder‘: setPlaceholder
                })
                .data(‘placeholder-enabled‘, true)
                .trigger(‘blur.placeholder‘);
            return $this;
        };

        placeholder.input = isInputSupported;
        placeholder.textarea = isTextareaSupported;

        hooks = {
            ‘get‘: function(element) {
                var $element = $(element);

                var $passwordInput = $element.data(‘placeholder-password‘);
                if ($passwordInput) {
                    return $passwordInput[0].value;
                }

                return $element.data(‘placeholder-enabled‘) && $element.hasClass(‘placeholder‘) ? ‘‘ : element.value;
            },
            ‘set‘: function(element, value) {
                var $element = $(element);

                var $passwordInput = $element.data(‘placeholder-password‘);
                if ($passwordInput) {
                    return $passwordInput[0].value = value;
                }

                if (!$element.data(‘placeholder-enabled‘)) {
                    return element.value = value;
                }
                if (value == ‘‘) {
                    element.value = value;
                    // Issue #56: Setting the placeholder causes problems if the element continues to have focus.
                    if (element != safeActiveElement()) {
                        // We can‘t use `triggerHandler` here because of dummy text/password inputs :(
                        setPlaceholder.call(element);
                    }
                } else if ($element.hasClass(‘placeholder‘)) {
                    clearPlaceholder.call(element, true, value) || (element.value = value);
                } else {
                    element.value = value;
                }
                // `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
                return $element;
            }
        };

        if (!isInputSupported) {
            valHooks.input = hooks;
            propHooks.value = hooks;
        }
        if (!isTextareaSupported) {
            valHooks.textarea = hooks;
            propHooks.value = hooks;
        }

        $(function() {
            // Look for forms
            $(document).delegate(‘form‘, ‘submit.placeholder‘, function() {
                // Clear the placeholder values so they don‘t get submitted
                var $inputs = $(‘.placeholder‘, this).each(clearPlaceholder);
                setTimeout(function() {
                    $inputs.each(setPlaceholder);
                }, 10);
            });
        });

        // Clear placeholder values upon page reload
        $(window).bind(‘beforeunload.placeholder‘, function() {
            $(‘.placeholder‘).each(function() {
                this.value = ‘‘;
            });
        });

    }

    function args(elem) {
        // Return an object of element attributes
        var newAttrs = {};
        var rinlinejQuery = /^jQuery\d+$/;
        $.each(elem.attributes, function(i, attr) {
            if (attr.specified && !rinlinejQuery.test(attr.name)) {
                newAttrs[attr.name] = attr.value;
            }
        });
        return newAttrs;
    }

    function clearPlaceholder(event, value) {
        var input = this;
        var $input = $(input);
        if (input.value == $input.attr(‘placeholder‘) && $input.hasClass(‘placeholder‘)) {
            if ($input.data(‘placeholder-password‘)) {
                $input = $input.hide().next().show().attr(‘id‘, $input.removeAttr(‘id‘).data(‘placeholder-id‘));
                // If `clearPlaceholder` was called from `$.valHooks.input.set`
                if (event === true) {
                    return $input[0].value = value;
                }
                $input.focus();
            } else {
                input.value = ‘‘;
                $input.removeClass(‘placeholder‘);
                input == safeActiveElement() && input.select();
            }
        }
    }

    function setPlaceholder() {
        var $replacement;
        var input = this;
        var $input = $(input);
        var id = this.id;
        if (input.value == ‘‘) {
            if (input.type == ‘password‘) {
                if (!$input.data(‘placeholder-textinput‘)) {
                    try {
                        $replacement = $input.clone().attr({ ‘type‘: ‘text‘ });
                    } catch(e) {
                        $replacement = $(‘<input>‘).attr($.extend(args(this), { ‘type‘: ‘text‘ }));
                    }
                    $replacement
                        .removeAttr(‘name‘)
                        .data({
                            ‘placeholder-password‘: $input,
                            ‘placeholder-id‘: id
                        })
                        .bind(‘focus.placeholder‘, clearPlaceholder);
                    $input
                        .data({
                            ‘placeholder-textinput‘: $replacement,
                            ‘placeholder-id‘: id
                        })
                        .before($replacement);
                }
                $input = $input.removeAttr(‘id‘).hide().prev().attr(‘id‘, id).show();
                // Note: `$input[0] != input` now!
            }
            $input.addClass(‘placeholder‘);
            $input[0].value = $input.attr(‘placeholder‘);
        } else {
            $input.removeClass(‘placeholder‘);
        }
    }

    function safeActiveElement() {
        // Avoid IE9 `document.activeElement` of death
        // https://github.com/mathiasbynens/jquery-placeholder/pull/99
        try {
            return document.activeElement;
        } catch (exception) {}
    }

}(this, document, jQuery));

placeholder.js

　　使用方法：

　　添加css样式： .placeholder { color: #aaa; }

　　js代码：　　$(‘input, textarea‘).placeholder();

6. js获取系统时间　

　　代码：

/**
 * get current time form the servers
 * @example
 * var time=new sysDate()
 * time.done(function(timeStamp){
 * console.log(timeStamp);
 * })
 */
(function(root, factory) {
    ‘use strict‘;
    var sysDate = function() {
        return sysDate.init.apply(sysDate, arguments);
    };
    factory(sysDate);
    if (typeof define === ‘function‘ && (define.amd || define.cmd)) {
        define(function( /*require, exports*/ ) {
            return sysDate;
        });
    } else {
        root.sysDate = sysDate;
    }
})(this, function(exp) {
    ‘use strict‘;
    exp.config = {
        url: ‘/‘
    };
    exp.init = function() {
        //the first arouments can be:
        //{url:‘/xxx‘}
        var arg = arguments[0];
        if (typeof(arg) == ‘object‘) {
            for (var i in arg) {
                exp.config[i] = arg[i];
            }
        }
        exp.get();
        return exp;
    };
    exp.get = function() {
        //use xmlhttp to get data form the server
        //save to config.lastDate
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                var sysD = xmlhttp.getResponseHeader(‘Date‘);
                sysD = new Date(sysD);
                sysD = Date.parse(sysD);
                if (exp.doneFn) {
                    exp.doneFn(sysD);
                }
                exp.config.lastDate = sysD;
            }
        };
        exp.done = function(fn) {
            if (exp.config.lastDate) {
                if (fn) fn(exp.config.lastDate);
            } else {
                exp.doneFn = fn;
            }
        };
        xmlhttp.open(‘GET‘, exp.config.url, true);
        xmlhttp.send();
    };
});

sysDate

　　使用方法：

var a=sysDate(option); // 可选字段option， {‘url‘:‘/getDate‘} 
a.done(function(data){ console.log(‘done‘,data); // 服务器时间 data 1385003673000‘ });

　　详细介绍请看：http://www.zhuwenlong.com/blog/53a9475819a5a13617000001

7. 实现网页截屏html2canvas

　　下载地址：https://github.com/niklasvh/html2canvas

　　使用方法：

<script type="text/javascript">
　　　　function howuse(){
　　　　　　html2canvas(document.getElementById(‘email_content‘), {
 　　　　　　　　onrendered: function(canvas){
            var html_canvas = canvas.toDataURL();
            $.post(‘/report/send_rep_submit‘, {html_canvas:html_canvas}, function(json){
                }, ‘json‘);
            }
        });
　　　　}
　　</script>

　　可以这样查看图片：利用canvas.toDataURL();得到的是base64图片数据

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

View Code

JS实用插件,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS实用插件