Хаки и Скрипты Next Generation CMS : Интерфейс, html, JS : FileInput - плагин заменяющий стандартный input type="file"

irbees2008 Опубликовано - 15 - марта Интерфейс

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

Представляю плагин FileInput заменяющий стандартный input type="file".

1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с шаблоном.
2.Запишем input для загрузки файлов:

Код:

<input type="file" name="file1" >

2.Добавляем стили

Код:

/* Container for 2 child elements (button & filename) */
.fileUpload {
    background: #fff;
    border: 0;
    display: block;
    margin: 2% 0 5% 0;
    width: 100%;
    /* border radius */
    -o-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
/* The button */
.fileUpload .fileBtn {
    background: #2C88D6;
    cursor: pointer;
    float: left;
    font-size: 1em;
    font-weight: bold;
    padding: 3% 0;
    text-align: center;
    width: 33%;
    /* border radius */
    -o-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    -webkit-border-radius: 6px 0 0 6px;
    border-radius: 6px 0 0 6px;
}
.fileUpload .fileBtn:hover {
    background: #2C4356;
}
/* Where the input-name will be filled in */
.fileUpload .fileName {
    float: right;
    overflow: hidden;
    white-space: nowrap;
    width: 67%;
    text-align: center;
    color: #000;
    padding: 3% 0;
}
/* Animation (hover) */
.fileUpload .fileBtn:hover {
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: background;
    -moz-transition-duration: 0.4s;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: background;
    -o-transition-duration: 0.4s;
    -o-transition-timing-function: ease-in;
    -ms-transition-property: background;
    -ms-transition-duration: 0.4s;
    -ms-transition-timing-function: ease-in;
    transition-property: background;
    transition-duration: 0.4s;
    transition-timing-function: ease-in;
}
/* Clear input-parent, due to child-floats */
.fileUpload:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

3.Подключаем jquery и скрипт плагина:

Код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/fileinput.js"></script>

4.Вызываем плагин:

Код:

<script>
    $(document).ready(function() {
        fileInput();
    });
</script>

5.В js файле:
Параметры
Название класса для оболочки содержащей кнопку и название файла:
fi_container_class = fi_container_class || 'fileUpload';

Название класса для кнопки:
fi_button_class = fi_button_class || 'fileBtn';

Название класса для элемента содержащего текст:
fi_filename_class = fi_filename_class || 'fileName';

Текст внутри кнопки:
fi_button_text = fi_button_text || 'Обзор...';

Можешь почитать и вот эту статейку "Полезности для тех кто работает с Twitter Bootstrap"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.