jquery – 老陈是一个普通的文艺二逼青年

jQuery.Deferred对象

一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中， […]

三级（多级）联动自动赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <select name="one" id="one">
    </select>
    <select name="two" id="two">
    </select>
    <select name="three" id="three">
    </select>
    <script src="./jquery-1.11.1.js"></script>
    <script>

        function clear( obj ) {
            obj.length = 0;
        }

        function make( obj, data ) {
            for( var i in data ) {
                obj.options.add( new Option( data[i], i ) );
            }
        }

        function ajax( url, obj, val ) {
            var dfd = $.Deferred();
            obj = $('#'+obj).get(0);
            $.ajax(url,{cache:false}).done(function(rss) {
                clear( obj );
                make( obj, rss );
                obj.value = val;
                dfd.resolve();
            });
            return dfd.promise();
        }

        var arr = [
                    {"url":"data_1.json","obj":"one","val":"021"},
                    {"url":"data_2.json","obj":"two","val":"2"},
                    {"url":"data_3.json","obj":"three","val":"3"}
                ];

        function r( arr ) {
            var a = arr.shift();
            ajax( a.url, a.obj, a.val ).done(function() {
                if( arr.length ) r( arr );
            });
        }

        r(arr);

        // 方法二
        var onv = '021', twv = '2', thv = '3';
        // $.ajax( "data_1.json" ).then(function( rss ) {
        //     clear( one );
        //     make( one, rss );
        //     one.value = onv;
        //     return $.ajax( "data_2.json" );
        // }).then(function( rss ) {
        //     clear( two );
        //     make( two, rss );
        //     two.value = twv;
        //     return $.ajax( "data_3.json" );
        // }).then(function( rss ) {
        //     clear( three );
        //     make( three, rss );
        //     three.value = thv;
        // });

        // 方法三
        // $.when( 
        //     $.ajax( "data_1.json" ),
        //     $.ajax( "data_2.json" ),
        //     $.ajax( "data_3.json" )
        // ).then( function( a, b, c ) {
        //     clear( one ); clear( two ); clear( three );
        //     make( one, a[0] ); make( two, b[0] ); make( three, c[0] );
        //     one.value = onv; two.value = twv; three.value = thv;
        // } );

    </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</select>

</select>

</select>

function clear( obj ) {

obj.length = 0;

}

function make( obj, data ) {

for( var i in data ) {

obj.options.add( new Option( data[i], i ) );

}

function ajax( url, obj, val ) {

var dfd = $.Deferred();

obj = $('#'+obj).get(0);

$.ajax(url,{cache:false}).done(function(rss) {

clear( obj );

make( obj, rss );

obj.value = val;

dfd.resolve();

});

return dfd.promise();

}

var arr = [

{"url":"data_1.json","obj":"one","val":"021"},

{"url":"data_2.json","obj":"two","val":"2"},

{"url":"data_3.json","obj":"three","val":"3"}

];

function r( arr ) {

var a = arr.shift();

ajax( a.url, a.obj, a.val ).done(function() {

if( arr.length ) r( arr );

});

}

r(arr);

// 方法二

var onv = '021', twv = '2', thv = '3';

// $.ajax( "data_1.json" ).then(function( rss ) {

// clear( one );

// make( one, rss );

// one.value = onv;

// return $.ajax( "data_2.json" );

// }).then(function( rss ) {

// clear( two );

// make( two, rss );

// two.value = twv;

// return $.ajax( "data_3.json" );

// }).then(function( rss ) {

// clear( three );

// make( three, rss );

// three.value = thv;

// });

// 方法三

// $.when(

// $.ajax( "data_1.json" ),

// $.ajax( "data_2.json" ),

// $.ajax( "data_3.json" )

// ).then( function( a, b, c ) {

// clear( one ); clear( two ); clear( three );

// make( one, a[0] ); make( two, b[0] ); make( three, c[0] );

// one.value = onv; two.value = twv; three.value = thv;

// } );

</script>

</body>

</html>

测试连接参考： http://api.jq […]

总结项目，重新封装uploadify插件，省去大量重复代码！

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>cc-plugin-uploadify</title>
    <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">
</head>
<body>
    <form>
        <div id="queue"></div>
        <input data-toggle="uploadify" data-multi='true' type="file" >
        <input data-toggle="uploadify" data-multi='true' type="file" >
        <input data-toggle="uploadify" data-multi='true' type="file" >
    </form>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/uploadify/jquery.uploadify.js"></script>
    <script>
        +function ($) {
            'use strict';
            var defaultParam = ['auto','buttonClass','buttonCursor','buttonImage','buttonText','checkExisting','debug','fileObjName','fileSizeLimit','fileTypeDesc','fileTypeExts',
                'height','itemTemplate','method','multi','formData','preventCaching','progressData','queueID','queueSizeLimit','removeCompleted','removeTimeout','requeueErrors',
                'successTimeout','uploadLimit','width'],
                MyUploadify = function( element, options ) {
                this.$element  = $( element );
                if( !this.$element.attr( 'id' ) ) {
                    this.$id = 'MyUploadify_' + new Date().getTime() + '_' + Math.ceil( Math.random() * 100000 );
                    this.$element.attr( 'id', this.$id );
                }
                if( !options ) {
                    for( var i in defaultParam ) {
                        if( typeof this.$element.data( defaultParam[i] ) != 'undefined'  ) {
                            options = options || {};
                            options[defaultParam[i]] = this.$element.data( defaultParam[i] );
                        }
                    }
                    if( !options.formData ) {
                        options.formData = {};
                    }
                    options.formData.id = options.formData.id || this.$id;
                }
                this.options   = $.extend( {}, MyUploadify.DEFAULTS, options );
            };

            MyUploadify.DEFAULTS = {
                swf      : 'js/uploadify/uploadify.swf',
                uploader : 'uploadify.php',
                auto: true,
                multi: false,
                fileTypeExts: '*.jpg;*.png;*.gif',
                buttonText: '上传',
                uploadLimit: 999,
                queueSizeLimit: 1,
                onUploadSuccess: function( file, data, response ) {
                    // data = eval( '(' + data + ')' );
                    console.log( data );
                }
            };

            MyUploadify.prototype.init = function() {
                $( '#'+this.$id ).uploadify( this.options );
            }

            var old = $.fn.myUploadify;

            $.fn.myUploadify = function (option) {
                return this.each(function () {
                    var $this   = $(this);
                    var data    = $this.data('cc.myUploadify');
                    var options = typeof option == 'object' && option

                    if (!data) $this.data('cc.myUploadify', (data = new MyUploadify(this, options)))

                    data.init();
                })
            }

            $.fn.myUploadify.Constructor = MyUploadify

            $.fn.myUploadify.noConflict = function () {
                $.fn.myUploadify = old;
                return this;
            }

            $( function() {
                $( 'input[type=file][data-toggle=uploadify]' ).myUploadify();
            } );

        }(jQuery);

    </script>
</body>
</html>

<!doctype html>

<head>

<title>cc-plugin-uploadify</title>

</head>

<body>

<form>

</form>

+function ($) {

'use strict';

var defaultParam = ['auto','buttonClass','buttonCursor','buttonImage','buttonText','checkExisting','debug','fileObjName','fileSizeLimit','fileTypeDesc','fileTypeExts',

'height','itemTemplate','method','multi','formData','preventCaching','progressData','queueID','queueSizeLimit','removeCompleted','removeTimeout','requeueErrors',

'successTimeout','uploadLimit','width'],

MyUploadify = function( element, options ) {

this.$element = $( element );

if( !this.$element.attr( 'id' ) ) {

this.$id = 'MyUploadify_' + new Date().getTime() + '_' + Math.ceil( Math.random() * 100000 );

this.$element.attr( 'id', this.$id );

}

if( !options ) {

for( var i in defaultParam ) {

if( typeof this.$element.data( defaultParam[i] ) != 'undefined' ) {

options = options || {};

options[defaultParam[i]] = this.$element.data( defaultParam[i] );

}

if( !options.formData ) {

options.formData = {};

}

options.formData.id = options.formData.id || this.$id;

}

this.options = $.extend( {}, MyUploadify.DEFAULTS, options );

};

MyUploadify.DEFAULTS = {

swf : 'js/uploadify/uploadify.swf',

uploader : 'uploadify.php',

auto: true,

multi: false,

fileTypeExts: '*.jpg;*.png;*.gif',

buttonText: '上传',

uploadLimit: 999,

queueSizeLimit: 1,

onUploadSuccess: function( file, data, response ) {

// data = eval( '(' + data + ')' );

console.log( data );

}

};

MyUploadify.prototype.init = function() {

$( '#'+this.$id ).uploadify( this.options );

}

var old = $.fn.myUploadify;

$.fn.myUploadify = function (option) {

return this.each(function () {

var $this = $(this);

var data = $this.data('cc.myUploadify');

var options = typeof option == 'object' && option

if (!data) $this.data('cc.myUploadify', (data = new MyUploadify(this, options)))

data.init();

})

}

$.fn.myUploadify.Constructor = MyUploadify

$.fn.myUploadify.noConflict = function () {

$.fn.myUploadify = old;

return this;

}

$( function() {

$( 'input[type=file][data-toggle=uploadify]' ).myUploadify();

} );

}(jQuery);

</script>

</body>

</html>

[crayon-5db00a9 […]

模仿bootstrap开发基于jquery的插件

春节期间闲来无事，想学习一下如何开发基于jquery的插件。所以网上查了些资料，然后模仿bootstrap写了 […]