创建jquery widget工厂应用实例

2013-09-06 00:00:00 by 【6yang】, 922 visits, 收藏 | 返回

Demo:
http://www.6yang.net/myjavascriptlib/widgetdemo

源码分享：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Easy create factory widget for jQuery </title>
<style type="text/css">

</style>
</head>

<body>
<h1 style="display:none">Easy create factory widget for jQuery 工厂应用实例</h1>
<div class="label"><input type="text" name="t1" id="test1" class="test" /></div>
<div class="label"><input type="text" name="t2" id="test2" class="test" /></div>
<div class="label"><input type="text" name="t3" id="test3" class="test" /></div>
</body>
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery-ui/jquery-ui-1.10.3.min.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
$(function(){
   //创建实例UF
   var UF = UF || {};
   UF.extend = function(first, second){
       for (var prop in second){
           first[prop] = second[prop];
       }
   };
   UF.FileUploaderBasic = function(o){
       this._options = {
           // set to true to see the server response
           debug: false,
           action: '/server/upload',
           params: {},
           button: null,
           multiple: true,
           maxConnections: 3
       }
       UF.extend(this._options, o);
       this._handler = this._createUploadHandler();
   };
   UF.FileUploaderBasic.prototype = {
       setParams: function(params){
           this._options.params = params;
       },
       _uploadFile: function(input){
       },
       _createUploadHandler: function(){
           var that = this, options = that._options,
               ele = options.element;
           ele.after('<button type="button" class="btn" >Display</button>');
           ele.next().bind('click', function(){
               ele.val(options.action).addClass(options.className)
           })
           return that;
       }
   };
   UF.FileUploader = function(o){
       UF.FileUploaderBasic.apply(this, arguments);
       UF.extend(this._options, {
           element: null,
           // if set, will be used instead of UF-upload-list in template
             listElement: null
       });
       UF.extend(this._options, o);
       this._element = this._options.element;
   };
   UF.extend(UF.FileUploader.prototype, UF.FileUploaderBasic.prototype);
   UF.extend(UF.FileUploader.prototype, {

   });

   var _superUploadFile = UF.FileUploader.prototype._uploadFile;
   UF.FileUploader.prototype._uploadFile = function(file) {
       _superUploadFile.call(this, file);
   }

   //以下是widget 扩展实例调用

   $.widget('ace.fileuploader', {
       options: {
           request: '',
           data: {},
           extensions: ['jpg', 'jpeg', 'png', 'gif'],
           sizeLimit: 0,
           // width x height: ['100x100', '200x100']
           imageSizes: [],
           'className': '',
           'keyword': ''
       },

       _create: function() {
           var that = this,
               ele = that.element,
               options = that.options,
               // remain the original class name 'fileuploader-container', the new class name has the 'ace' namespace

               buttonWrapper, button;
           that.uploader = new UF.FileUploader({
               element: ele,
               action: this.options.request,
               params: this.options.data,
               allowedExtensions: this.options.extensions,
               imageSizes: this.options.imageSizes,
               multiple: false,
               sizeLimit: this.options.sizeLimit,
               onSubmit: function(id, filename) {
               }
           });
           //console.log(options.className)
           //console.log(options.className)

           //
       },
       _setOption: function(key, value) {
           var keys = {
               'request': 'action',
               'data': 'params',
               'extensions': 'allowedExtensions',
               'imageSizes': 'imageSizes',
               'className': 'className',
               'keyword': 'keyword'
           };
           this.uploader._options[keys[key]] = value;
           this._super(key, value);
           //console.log(this)
       }
   });
});



</script>
<script type="text/javascript">
//Easy create factory widget for jQuery

//这里可以直接调用方法
       $(function(){
           $(".test").fileuploader({
               'request': 'test.php',
               'keyword': 'Please input keyword.'
           });
           $('#test1').fileuploader('option', {
               'extensions': 'allowedExtensions',
               'request': 'test1.php',
               'keyword': 'Please input keyword test1.',
               'className': 't1'
           }) ;
           $('#test2').fileuploader('option', {
               'extensions': 'allowedExtensions',
               'request': 'test2.php',
               'keyword': 'Please input keyword test2.',
               'className': 't2'
           }) ;
           $('#test3').fileuploader('option', {
               'extensions': 'allowedExtensions',
               'request': 'test3.php',
               'keyword': 'Please input keyword test3.',
               'className': 't3'
           }) ;
       })

   </script>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=1310&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

创建jquery widget工厂应用实例

图片原图