码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实用美化input 上传组建

时间:2017-05-16 23:07:01      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:图标   控制文件   hold   war   清空   bsp   查找文件   nload   下载   

 
 
 
简要教程

jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件。该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式。它提供了大量的data属性来控制文件上传域的样式,可以自定义按钮文本和图标等。

 使用方法

使用该表单文件上传域美化插件需要引入jquery,jquery-filestyle.min.css和jquery-filestyle.min.js文件。

<link href="css/jquery-filestyle.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-filestyle.min.js"></script>               
 HTML结构

最简单的使用方法是在<input>元素中使用data属性来直接转换文件上传域。

<input type="file" class="jfilestyle" data-theme="blue" data-input="false">       

 应用举例

 将input元素进行转换

将一个普通的<input>元素进行美化。

javascript方法:

$(":file").jfilestyle({input: false});               

通过data属性:

<input type="file" class="jfilestyle" data-input="false">              
 按钮文本

改变按钮上的文本。默认值为:"Choose file"。

javascript方法:

$(":file").jfilestyle({buttonText: "查找文件"});              

通过data属性:

<input type="file" class="jfilestyle" data-buttonText="查找文件">              
 禁用状态

设置文件选择为禁用状态。

javascript方法:

$(":file").jfilestyle({disabled: true});             

通过data属性:

<input type="file" class="jfilestyle" data-disabled="true">              
 禁用状态

选择文件按钮在输入框的前面。

javascript方法:

$(":file").jfilestyle({buttonBefore: true});             

通过data属性:

<input type="file" class="jfilestyle" data-buttonBefore="true">              
 输入框的尺寸

设置文件选择域的尺寸。使用CSS测量单位,默认值为200px。

javascript方法:

$(":file").jfilestyle({inputSize: "350px"});           

通过data属性:

<input type="file" class="jfilestyle" data-inputSize="400px">              
 文本占位

设置输入框的文本占位。

javascript方法:

$(":file").jfilestyle({placeholder: "My place holder"});           

通过data属性:

<input type="file" class="jfilestyle" data-placeholder="文本占位字符">              
 使用图标

javascript方法:

$(":file").jfilestyle({buttonText: "<span class=‘glyphicon glyphicon-folder-open‘></span>"});          

通过data属性:

<input type="file" class="jfilestyle" data-buttonText="<span class=‘glyphicon glyphicon-folder-open‘></span>">             

 方法

  • clear:清空选择的文件。
    $(":file").jfilestyle(‘clear‘);               
  • destroy:销毁对象实例。
    $(":file").jfilestyle(‘destroy‘);
  • input:设置或获取输入域的内容。
    // 获取
    $(":file").jfilestyle(‘input‘);
    // 设置
    $(":file").jfilestyle({‘input‘: false}); 
  • buttonText:设置或获取按钮上的文本。
    // 获取
    $(":file").jfilestyle(‘buttonText‘);
    // 设置
    $(":file").jfilestyle({‘buttonText‘: ‘My text‘});
  • disabled:设置按钮为不可用或获取按钮状态是否为不可用。
    // 获取
    $(":file").jfilestyle(‘disabled‘);
    // 设置
    $(":file").jfilestyle({‘disabled‘: true}); 
  • buttonBefore:设置按钮在输入框前面或获取按钮的位置。
    // 获取
    $(":file").jfilestyle(‘buttonBefore‘);
    // 设置
    $(":file").jfilestyle({‘buttonBefore‘: true});
  • inputSize:设置或获取输入框的尺寸。
    // 获取
    $(":file").jfilestyle(‘inputSize‘);
    // 设置
    $(":file").jfilestyle({‘inputSize‘: ‘400px‘});
  • placeholder:设置或获取占位文本。
    // 获取
    $(":file").jfilestyle(‘placeholder‘);
    // 设置
    $(":file").jfilestyle({‘placeholder‘: ‘My text placeholder‘});

jQuery实用美化input 上传组建

标签:图标   控制文件   hold   war   清空   bsp   查找文件   nload   下载   

原文地址:http://www.cnblogs.com/qinweizhi/p/6863777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!