表单/表格
Filestyle - 实用表单文件域美化jQuery插件
PetitQ
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'});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
