JS實用插件

時間 2019-11-13

原文原文鏈接

1. jQuery鼠標滾輪事件插件Mouse Wheeljavascript

　　下載連接：https://github.com/brandonaaron/jquery-mousewheel/css

　　使用方法：html

// 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，它響應滾輪的方向，當爲負數時表示向下滾動，爲正則表示向上滾動。java

2. javascript路由插件jquery

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

　　推薦Crossroads.js 使用詳情google或百度github

3. 複製到剪切板插件 zeroclipboard json

　　下載地址：http://zeroclipboard.org/
canvas

　　使用方法：　api

<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( $("#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

八、number插件，只容許輸入數字

　　下載地址 https://github.com/teamdf/jquery-number