diff --git a/demo/index.html b/demo/index.html index a7cc568..17ffea8 100644 --- a/demo/index.html +++ b/demo/index.html @@ -33,6 +33,7 @@

Примеры для плагина Радиокнопки
  • Поле для выбора файла
  • Поле для ввода чисел
  • +
  • Поле ввода пароля
  • Одиночные селекты
  • Мультиселекты
  • Прочие элементы форм (только CSS)
  • @@ -106,6 +107,23 @@

    Поле для ввода чисел

    +
    + +

    Поле ввода пароля

    + +
    + +
    + +
    +
    + +
    + +
    + +
    +

    Одиночные селекты

    diff --git a/jquery.formstyler.css b/jquery.formstyler.css index 4008d74..032b7ed 100644 --- a/jquery.formstyler.css +++ b/jquery.formstyler.css @@ -230,6 +230,31 @@ } +.jq-password { + position: relative; + display : inline-block; +} + +.jq-password__switch { + position: absolute; + top: 50%; + right: 6px; + -ms-transform : translateY(-50%); + transform : translateY(-50%); + display: inline-block; + border-radius: 2px; + padding: 4px 6px; + background: #EBEBEB; + font-size: 12px; + line-height: 14px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + + .jq-selectbox { vertical-align: middle; cursor: pointer; diff --git a/jquery.formstyler.js b/jquery.formstyler.js index 313ed5b..b78b17d 100644 --- a/jquery.formstyler.js +++ b/jquery.formstyler.js @@ -37,6 +37,9 @@ selectVisibleOptions: 0, singleSelectzIndex: '100', selectSmartPositioning: true, + passwordShow: 'Показать', + passwordHide: 'Скрыть', + passwordSwitchHtml: false, locale: 'ru', locales: { 'en': { @@ -45,7 +48,9 @@ fileNumber: 'Selected files: %s', selectPlaceholder: 'Select...', selectSearchNotFound: 'No matches found', - selectSearchPlaceholder: 'Search...' + selectSearchPlaceholder: 'Search...', + passwordShow: 'Show', + passwordHide: 'Hide', } }, onSelectOpened: function() {}, @@ -448,6 +453,51 @@ // end number + // password + } else if (el.is('input[type="password"]')) { + + var password = + $('
    ' + + '
    ' + + (opt.passwordSwitchHtml || opt.passwordShow) + + '
    ' + + '
    '); + + password.on('click', '.jq-password__switch', function() { + + var switcher = $(this), + wrapper = switcher.closest('.jq-password'), + input = el; + + if (wrapper.hasClass('jq-password_seen')) { + + if (!opt.passwordSwitchHtml) { + switcher.text(opt.passwordShow); + } + + wrapper + .removeClass('jq-password_seen'); + + input.attr('type', 'password'); + + } else { + + if (!opt.passwordSwitchHtml) { + switcher.text(opt.passwordHide); + } + + wrapper + .addClass('jq-password_seen'); + + input.attr('type', 'text'); + } + + }); + + el.after(password).prependTo(password); + + // end password + // select } else if (el.is('select')) {