Так как в примере DevilPrado есть прозрачная пустота между кнопкой и рамкой, а в Вашем примере этого не будет, то дополню Ваш ответ ещё вот таким вариантом:
Вдруг кому подойдёт больше.
Из минусов - не скруглены внутренние углы. (Можно скруглить, увеличив количество точек у внутреннего контура. Лучшего варианта пока не придумал)
Ширина градиентной границы регулируется в clip-path. В данном примере 10px.
fronttrty, Хорошо.
Если честно, песочница максимально не удобная. Фиг пойми как включить дебаг. Либо форкать либо слать запрос Вам на редактирование. А регаться там ради одного вопроса на тостере не охото. Поэтому я копирнул Ваш код себе в песочницу, но код очень.. запутанный и награмождённый. Что-то в конце рабочего дня не осилил. Если не решите, может по позже ещё гляну.
Что то новенькое) из js в jq :-)
А что вы тут сокращать собрались?
И еще, Вы же знаете что jq это и есть js? Таким образом, кода станет только больше. Даже если в этом файле его станет меньше
Nimbus1996, Да. Вы делаете вёрстку для того, чтобы бэкендер потом взял её в качестве шаблона. А в места, где контент разный, например, разное название товара, цена, и тд, выводить данные из переменных.
Например, вёрстка которую Вы отдаёте, такая: <h1>Бананы</h1>
Когда бэкендер обработает вёрстку, то у него в коде это будет выглядеть примерно так: <h1>{{ $productName }}</h1>
В итоге, когда пользователь запрашивает определённую страницу, сервер идёт в базу данных, извлекает из неё нужное, а потом подставляет вместо переменных соответствующие значения.
И тогда, когда пользователь перейдёт на страницу http://shop/bananas
Ему выдаст соответствующую разметку <h1>Бананы</h1>
А, если, скажем так: http://shop/apples
То выдаст такую разметку <h1>Яблоки</h1>
Зависит от того, какой у Вас сайт.
Если классическое - то каждая ссылка, это, например, отдельная страница, где id пользователя - название страницы. Но как понимаете на большой сервис не очень практично. Поэтому подход примерно такой же как и ниже. Только разметку сервер отдаёт, не строится на клиенте.
Если SPA - то страница может быть одна, просто в зависимости от параметра урла js достаёт инфу о конкретном пользователе и отображает именно её.
Vladislav, хорошо. Тогда не понимаю почему Вы решили что я Вас не понял.
Создали объект с нужными языками, в функии инициализации скрипта принимаете аргумент lang, по его значению достаёт из обьекта соответствующий массив значений лэйблов. Профит. Календарь отобоазится в том языке, который указали в коде.
- Не нужно искать других плагинов где это сделали за Вас, так как сделать это 5 минут максимум. Искать - несколькократно дольше. Даже вопрос на тостере создать было как минимум столь же времязатратно.
- календарь не тащит в своем коде языки, которыми Вы не воспользуетесь.
- максимальный контроль над текстом,а не такой, каким его решил определить создатель плагина.
Vladislav, Давайте резюмирую: пользователь заходит на сайт, видит поле с календарём или сам календарь. И если календарь поддерживает более одного языка, то пользователь может, скажем, открыть выпадающий список в элементе календаря и поменять язык? Это?
Vladislav, Если хотите сделать хорошо - просто не будет.
Вы хотите чтобы плагин тянул в себе все языки, а Вы использовали бы только 1-2. Зачем Вам ещё 10?
Ну и по поводу сложности. Создать объект, где ключи будут названия языка, а значения - массив названий - это уже очень сложно вдруг стало? Типа так:
var langs = {
en: ['Week', 'Day', 'Month'],
ru: ['Неделя', 'День', 'Месяц'],
}
Вдруг кому подойдёт больше.
Из минусов - не скруглены внутренние углы. (Можно скруглить, увеличив количество точек у внутреннего контура. Лучшего варианта пока не придумал)
Ширина градиентной границы регулируется в clip-path. В данном примере 10px.