ФорумПрограммированиеПыхнуть хотите?Готовые решения → Стилизация input[type=file]...

Стилизация input[type=file]...

  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 9 февраля 2011 г. 7:24, спустя 167 дней 22 часа 47 минут

    решил замутить стилизацию интпута с выбором файла)) не гарантирую, что будет ниипаццо круто и будет работать во всех бравзерах, но потестил в ff 2/3, opera 9.2/10.54, ie 7/8, safari/chrome 4/5…
    зачем? - просто от нех делать))
    такие уже есть! - они страшные и генерят всякое говно, а меня это пугает))

    демка – http://keyx.narod.ru/input_file/

    собственно вот так это работает…
    <input type="file" name="" class="file" />


    /* your styles */
    #jinput_file { width:250px; } // ширина всего элемента
    #jinput_file .jinput_input,
    #jinput_file .jinput_input span { height:34px; } // высота элемента
    #jinput_file .jinput_input span { line-height:30px; padding:0 15px 0 10px; margin-left:5px; font-size:13px; font-weight:bold; } // оформление кнопочки
    #jinput_file .jinput_input,
    #jinput_file .jinput_input span,
    #jinput_file .jinput_input:hover,
    #jinput_file .jinput_input:hover span,
    #jinput_file.jinput_disable .jinput_input,
    #jinput_file.jinput_disable .jinput_input span { background:url('img/button.gif') 0 0 no-repeat; } // фон кнопочки
    #jinput_file .jinput_name { line-height:34px; margin:0 10px; } // оформление вывода имени файла

    // остальное не трогаем

    /* default style */
    #jinput_file { overflow:hidden; }
    #jinput_file .jinput_input { position:relative; overflow:hidden; }
    #jinput_file .jinput_input span { display:block; background-position:100% 0; }
    #jinput_file .jinput_input:hover { background-position:0 50%; }
    #jinput_file .jinput_input:hover span { background-position:100% 50%; }
    #jinput_file .jinput_input input { font-size:72px; position:absolute; top:-20px; right:-20px; opacity:0; filter:alpha(opacity=0); cursor:pointer; }
    @-moz-document url-prefix() {#jinput_file .jinput_input input { left:-850px; }}
    #jinput_file .jinput_name { float:left; }
    #jinput_file.jinput_disable .jinput_input input { display:none; }
    #jinput_file.jinput_disable .jinput_input { background-position:0 100%; }
    #jinput_file.jinput_disable .jinput_input span { background-position:100% 100%; color:#666; cursor:default; }

    button.gif прилагается…

    функция…
    $('input.file').jInput({
    buttonLocation : 'right', // расположение кнопки right/left
    buttonText : 'Обзор…', // текст кнопки
    relFormats : ['jpg', 'jpeg', 'gif', 'png'], // массив допустимых форматов
    errFormatText : 'неверный формат', // сообщение об ошибке
    disable : false // активность элемента
    });


    это сам плагин…
    (function($) {
    $.fn.jInput = function(options) {
    var defaults = {
    buttonLocation : 'right',
    buttonText : 'Обзор…',
    relFormats : ['jpg', 'jpeg', 'gif', 'png'],
    errFormatText : 'неверный формат',
    disable : false
    },
    opts = $.extend(defaults, options);

    this.each(function() {
    disable = opts.disable ? ' class="jinput_disable"' : '';
    $(this).wrap('<div id="jinput_file"'+disable+'><div class="jinput_input" style="float:'+opts.buttonLocation+';"></div><span class="jinput_name"></span></div>');
    $(this).parent().append('<span>'+opts.buttonText+'</span>');
    $(this).val('');
    });

    this.change(function() {
    var fileName = $(this).val().replace(/(.+\\)/i,'').replace(/(.{10}).{3,}(.{10})/i,'$1…$2'),
    relFormats = new RegExp('('+opts.relFormats.join('|')+')', 'i');
    a = fileName.split('.');
    fileFormat = a[(a.length-1)];
    if (fileFormat.match(relFormats)) {
    $(this).parent().next().text(fileName);
    } else {
    $(this).parent().next().text(opts.errFormatText);
    $(this).val('');
    }
    });

    };
    })(jQuery);


    собственно всё)) если найдете косяки, постараюсь пофиксить)) если че криво написал, попробую исправить))
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7941 Репутация: N Группа: в ухо

    Spritz 24 августа 2010 г. 18:10, спустя 9 часов 46 минут 7 секунд

    придумай, что мне приделать в блоге на шапку
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 24 августа 2010 г. 18:12, спустя 2 минуты 20 секунд

    не срать!!! >.<
    я тут людям бобро делаю, а ты со всоей блоговской шапкой)))
    Высокоуровневое абстрактное говно
  • krasun

    Сообщения: 1370 Репутация: N Группа: Джедаи

    Spritz 24 августа 2010 г. 18:12, спустя 5 секунд

    Stasovsky, сделай скрин или выложи демо, а то хочу посмотреть, но харит
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 24 августа 2010 г. 18:13, спустя 1 минуту 26 секунд

    да-да, демку)) забыл))
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7941 Репутация: N Группа: в ухо

    Spritz 24 августа 2010 г. 18:24, спустя 10 минут 26 секунд


    не срать!!! >.<
    я тут людям бобро делаю, а ты со всоей блоговской шапкой)))
    это я тебе на заметку, тебе всё-равно делать нечего. с меня пиво)))
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 24 августа 2010 г. 18:24, спустя 13 секунд

    демка в первом посте))
    Sinkler, по поводу блога… могу только пару косяков поправить, а че в шапку пхать - хз, я не дезигнер…
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7941 Репутация: N Группа: в ухо

    Spritz 24 августа 2010 г. 18:26, спустя 1 минуту 43 секунды

    демка в первом посте))

    куль
    Sinkler, по поводу блога… могу только пару косяков поправить, а че в шапку пхать - хз, я не дезигнер…

    ну гуд
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 24 августа 2010 г. 18:29, спустя 2 минуты 53 секунды

    могу какую-нить хрень с букафкаи замутить, а-ля "PHP Cake ololo" и все такое, но думаю будет не айс)) можно еще трафки жахнуть, но она тоже не в тему, за по цвету))
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7941 Репутация: N Группа: в ухо

    Spritz 24 августа 2010 г. 18:38, спустя 8 минут 56 секунд

    можно еще трафки жахнуть

    смотря какой, где и с кем xDDD
  • Sinkler

    Сообщения: 7941 Репутация: N Группа: в ухо

    Spritz 24 августа 2010 г. 18:45, спустя 7 минут 22 секунды

    мне интересно, какого фига хрень от хайтлайтеда показывается в самом вверху справа…
    Спустя 49 сек.
    ну да ладно, всё-равно буду переписывать на версию 1.3.3 и обновлять компоненты…
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 24 августа 2010 г. 18:46, спустя 1 минуту 14 секунд

    из-за position:static !important; в shCore.css - 30я строка
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7941 Репутация: N Группа: в ухо

    Spritz 24 августа 2010 г. 18:48, спустя 2 минуты 8 секунд


    из-за position:static !important; в shCore.css - 30я строка
    странно, но раньше всё гуд было, при этом я воообще там ничего не менял…
  • ivanscm

    Сообщения: 1251 Репутация: N Группа: Джедаи

    Spritz 25 августа 2010 г. 0:36, спустя 5 часов 47 минут 8 секунд

    вот еще http://vremenno.net/design/file-inputs-styling/ , глянь может чего почерпнешь? nice тоже стилизует инпут. ваще боян :))) но за старание +. уважаю таких людей
    С возвращением, Пiха! hyperoff.ru - качественный хостинг php
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 25 августа 2010 г. 6:36, спустя 6 часов 10 секунд

    ivanscm, ну иконочку с форматом я тоже могу плюхнуть))
    Высокоуровневое абстрактное говно

Пожалуйста, авторизуйтесь, чтобы написать комментарий!