一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中， […]
jquery
三级（多级）联动自动赋值
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!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> |
测试连接 参考： http://api.jq […]
总结项目，重新封装uploadify插件，省去大量重复代码！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!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> |
[crayon-6004071 […]