File Style Plugin for jQuery
2010-10-30 22:46
501 查看
Mika Tuupola
Technology guy with passion for advertising.weblog
projects
cv
File Style Plugin for jQuery
22 October 2007
Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.
This plugin is inspired by work of Shaun Inman.
Want to see how it works? Check the demo page.
How does it work?
Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.How to use?
File Style depends on jQuery. Include both in your header:<script src="jquery.js" type="text/javascript"></script> <script src="jquery.filestyle.js" type="text/javascript"></script>
You will also need button image such as one below.
Then in your code do something like:
$("input[type=file]").filestyle({ image: "choose-file.gif", imageheight : 22, imagewidth : 82, width : 250 });
Download
Latest source or minified.相关文章推荐
- tipsy - Facebook-style tooltip plugin for jQuery
- MvvmCross for WPF File Plugin
- XMLDOM Extension Plugin for jQuery
- bootstrap style for jQuery UI Dialog
- ionic cordova-plugin-file-transfer插件 Skipping 'cordova-plugin-file' for android
- 在ASP.NET中实现多文件上传(三)---jQuery Multiple File Upload Plugin
- Jquery PlugIn for lazy loading items.
- No embedded stylesheet instruction for file
- jQuery File Upload Plugin 出现uid is 503或者没有图片缩略图
- jquery的延迟加载插件Lazy Load Plugin for jQuery
- no rule to process file 'xxx/.../jquery.js' of type sourcecode.javascript for architecture i386
- Jquery for table plugin
- [Plugin] JQuery.uploadify上传文件插件的使用详解For ASP.NET
- 网页图片延迟加载的jQuery插件-Lazy Load Plugin for JQuery
- jquery multiple file upload plugin
- Nivo Slider for jquery and wordpress plugin
- Eclipse报错"No embedded stylesheet instruction for file"的解决方法
- No embedded stylesheet instruction for file:奇怪的错误
- DataTables plugin for jquery and click event
- jquery multiple file upload plugin