PageRenderTime 23ms CodeModel.GetById 17ms RepoModel.GetById 0ms app.codeStats 0ms

/gallery/form/1.1/demo/form/uploader/extra-config.html

https://github.com/akecn/kissy-gallery
HTML | 99 lines | 92 code | 3 blank | 4 comment | 0 complexity | 5e6444461d23f8d469d33b0d42e77498 MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8"/>
    5. 

  5. <title>使用额外配置的示例</title>
    6. 

  6. <link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
    7. 

  7. <link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
    8. 

  8. <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11. <article id="doc">
    12. 

  12.     <h4>使用额外配置的示例</h4>
    13. 

  13.     <p>data-config的配置主要是针对Uploader类（有部分是传给Button的，比如参数name），可以满足基础需求。但有些场景你需要有个通道可以把参数直接传给Button或Theme，这时该如何处理呢？</p>
    14. 

  14.     <p>RenderUploader支持通过增加伪属性的方式，额外给子类（Button、Queue）传递参数。</p>
    15. 

  15.     <p>比如你要给Button传递参数，可以增加data-button-config='{}'。</p>
    16. 

  16.     <p>来看下面的demo：</p>
    17. 

  17.     <!-- 上传按钮，组件配置请写在data-config内 -->
    18. 

  18.     <a id="J_UploaderBtn" class="g-u uploader-button"
    19. 

  19.        data-config='{"type" : "ajax",
    20. 

  20.                     "autoUpload" : false,
    21. 

  21.                     "serverConfig":{"action":"upload.php","data":{"dir":"files/"},"dataType" : "json"},
    22. 

  22.                     "name":"fileInput",
    23. 

  23.                     "urlsInputName":"fileUrls"}'
    24. 

  24.        data-button-config='{"disabled":true,"name":"Filedata","multiple":false}'
    25. 

  25.        data-theme-config='{"elUploadFiles":"#J_UploadAll"}'
    26. 

  26.        href="#">
    27. 

  27.         选择要上传的文件
    28. 

  28.     </a>
    29. 

  29.     <!-- 文件上传队列 -->
    30. 

  30.     <ul id="J_UploaderQueue" data-queue-config='{"duration":0.5}'>
    31. 

  31. 

  32.     </ul>
    33. 

  33.     <div class="btn-wrapper">
    34. 

  34.         <input id="J_Disabled" name="disabled" type="checkbox" value="1" checked />
    35. 

  35.         <label for="disabled">禁用按钮</label>
    36. 

  36.         <input id="J_Multiple" name="multiple" type="checkbox" value="1" />
    37. 

  37.         <label for="multiple">开启多选</label>
    38. 

  38.         <input id="J_UploadAll" type="button" value="上传所有等待的文件">
    39. 

  39.     </div>
    40. 

  40.     <h4>data-button-config</h4>
    41. 

  41.     <p>给选择上传按钮增加几个配置：禁用按钮、文件上传域名为Filedata、禁用多选。</p>
    42. 

  42.     <pre class='brush: xml;'>
    43. 

  43.         data-button-config='{"disabled":true,"name":"Filedata","multiple":false}'
    44. 

  44.     </pre>
    45. 

  45.     <h4>data-theme-config</h4>
    46. 

  46.     <p>传递参数给模板，有些模板有可定制的参数，比如一些按钮的钩子之类的，看下面的代码：</p>
    47. 

  47.     <pre class='brush: xml;'>
    48. 

  48.         data-theme-config='{"elUploadFiles":"#J_UploadAll"}'
    49. 

  49.     </pre>
    50. 

  50.     留意：在demo代码中，并没有给id为J_UploadAll的按钮绑定事件，但依旧可以触发文件批量上传，那是因为，默认模板会监测elUploadFiles参数是否存在，在存在的情况下会自动绑定事件。
    51. 

  51.     <h4>data-queue-config</h4>
    52. 

  52.     <p>留意：这个属性是加在queue对应的目标元素上，比如demo中加在id="J_UploaderQueue"的ul上。</p>
    53. 

  53.     <pre class='brush: xml;'>
    54. 

  54.         <ul id="J_UploaderQueue" data-queue-config='{"duration":0.5}'>
    55. 

  55. 

  56.         </ul>
    57. 

  57.     </pre>
    58. 

  58.     <p>demo中配置很简单，修改下queue添加和删除文件时动画速度。</p>
    59. 

  59.     <p>留意：queue有个参数名为statusConfig，通过传递这个参数，可以控制Status类的配置。</p>
    60. 

  60. </article>
    61. 

  61. <script>
    62. 

  62.     var S = KISSY,$ = S.Node.all;
    63. 

  63.     S.config({
    64. 

  64.         packages:[
    65. 

  65.             {
    66. 

  66.                 name:"gallery",
    67. 

  67.                 path:"../../../../../../",
    68. 

  68.                 charset:"utf-8"
    69. 

  69.             }
    70. 

  70.         ]
    71. 

  71.     });
    72. 

  72.     //加载上传组件入口文件
    73. 

  73.     KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
    74. 

  74.         //第一个参数：按钮元素钩子，第二个参数：队列元素钩子
    75. 

  75.         var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
    76. 

  76.         //对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
    77. 

  77.         ru.on("init", function (ev) {
    78. 

  78.             var uploader = ev.uploader,
    79. 

  79.                 //上传按钮实例
    80. 

  80.                 button = uploader.get('button');
    81. 

  81.             $('#J_Disabled').on('change',function(ev){
    82. 

  82.                 var isChecked = $(ev.target).prop('checked');
    83. 

  83.                 button.set('disabled',isChecked);
    84. 

  84.             });
    85. 

  85.             $('#J_Multiple').on('change',function(ev){
    86. 

  86.                 var isChecked = $(ev.target).prop('checked');
    87. 

  87.                 button.set('multiple',isChecked);
    88. 

  88.             });
    89. 

  89.         })
    90. 

  90.     })
    91. 

  91. </script>
    92. 

  92. 

  93. <!-- 代码高亮 START  -->
    94. 

  94. <link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
    95. 

  95. <script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
    96. 

  96. <script type="text/javascript">SyntaxHighlighter.all();</script>
    97. 

  97. <!-- 代码高亮 END  -->
    98. 

  98. </body>
    99. 

  99. </html>
    100. 

  100.