jquery.filestyle.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /*
  2. * Style File - jQuery plugin for styling file input elements
  3. *
  4. * Copyright (c) 2007-2008 Mika Tuupola
  5. *
  6. * Licensed under the MIT license:
  7. * http://www.opensource.org/licenses/mit-license.php
  8. *
  9. * Based on work by Shaun Inman
  10. * http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  11. *
  12. * Revision: $Id: jquery.filestyle.js 303 2008-01-30 13:53:24Z tuupola $
  13. *
  14. */
  15. (function($) {
  16. $.fn.filestyle = function(options) {
  17. /* TODO: This should not override CSS. */
  18. var settings = {
  19. width : 250
  20. };
  21. if(options) {
  22. $.extend(settings, options);
  23. };
  24. return this.each(function() {
  25. var self = this;
  26. var wrapper = $("<div>")
  27. .css({
  28. "width": settings.imagewidth + "px",
  29. "height": settings.imageheight + "px",
  30. "background": "url(" + settings.image + ") 0 0 no-repeat",
  31. "background-position": "right",
  32. "display": "inline",
  33. "position": "absolute",
  34. "overflow": "hidden"
  35. });
  36. var filename = $('<input class="file">')
  37. .addClass($(self).attr("class"))
  38. .css({
  39. "display": "inline",
  40. "width": settings.width + "px"
  41. });
  42. $(self).before(filename);
  43. $(self).wrap(wrapper);
  44. $(self).css({
  45. "position": "relative",
  46. "height": settings.imageheight + "px",
  47. "width": settings.width + "px",
  48. "display": "inline",
  49. "cursor": "pointer",
  50. "opacity": "0.0"
  51. });
  52. if ($.browser.mozilla) {
  53. if (/Win/.test(navigator.platform)) {
  54. $(self).css("margin-left", "-142px");
  55. } else {
  56. $(self).css("margin-left", "-168px");
  57. };
  58. } else {
  59. $(self).css("margin-left", settings.imagewidth - settings.width + "px");
  60. };
  61. $(self).bind("change", function() {
  62. filename.val($(self).val());
  63. });
  64. });
  65. };
  66. })(jQuery);