Перейти к публикации

Jacob™Ande®son мысли вслух

  • записей
    5
  • комментариев
    20
  • просмотра
    2 564

Оформление checkbox в dle на jquery

Jacob™Ande®son

906 просмотров

Не знаю как вам, а мне давно наскучило все что в dle стандартное, в том числе и checkbox. Хмм, вы скажете, просто галочка в квадратике, так везде, но я привык обращать внимание на мелочи, и когда дизайн сайта не похож на стандартные, это говорит о серьезности проекта, т.к. я когда регистрируюсь на очередном сайте, сделанном на dle и вижу, что страница профиля и регистрации как в стандартном шаблоне- я понимаю, что многое ожидать от этого сайта не стоит.

Рассмотрим пример изменения checkbox в dle на основе userinfo (т.к. для всего сайта необходимо делать небольшие правки в php) в дефолтном шаблоне дле, да, может не очень подходящее оформление checkbox для такого шаблона, но кто понимает в css тот быстренько сможет сам изменить цвета и т.п.

 

И так, что я предлагаю: ​blogentry-4034-0-19079700-1368469557_thumb.png

 

Этот Jquery скрипт как утверждает его автор работает даже в IE6 :ebat::O: , не проверял, не знаю, давайте приступим к установке.

 

 

1) Заливаем все файлы к себе на сервер по указанным папкам себе в шаблон.

skript.zip

Надеюсь в этот раз архив не битый создался, что-то архиватор у меня умирает

 

2) В любой css файл, подключенный в main.tpl вставляем это:

 

.tzCheckBox{background:url('../images/background.png') no-repeat right bottom;display:inline-block;min-width:60px;height:33px;white-space:nowrap;position:relative;cursor:pointer;margin-left:14px;}.tzCheckBox.checked{background-position:top left;margin:0 14px 0 0;}.tzCheckBox .tzCBContent{color: white;line-height: 31px;padding-right: 38px;text-align: right;}.tzCheckBox.checked .tzCBContent{text-align:left;padding:0 0 0 38px;}.tzCBPart{background:url('../images/background.png') no-repeat left bottom;width:14px;position:absolute;top:0;left:-14px;height:33px;overflow: hidden;}.tzCheckBox.checked .tzCBPart{background-position:top right;left:auto;right:-14px;}

blogentry-4034-0-43478500-1368471651_thumb.png

 

3) В самое начало userinfo.tpl вставляем это:

 <script src="{THEME}/js/jquery.tzCheckbox.js"></script><script>$(document).ready(function(){		$('input[type=checkbox]').tzCheckbox({labels:['Да','Нет']});});</script>

Когда плагин будет вызван, он по циклу пройдет по всем чекбоксам и вставит html код (см. выше) после каждого, одновременно скрывая оригинал. Класс проверки (checked) определяет стилизацию чекбокса (в состоянии вкл или выкл)

 

 

Здесь стоит пояснить, что 'Да','Нет' надписи будут выводиться для тех checkbox, для которых не заданы data-on="Зеленый текст" data-off="Красный текст"

 

Для примера возьмем chekbox от "Отписаться от всех новостей", стандартно он выводится так:

<input type="checkbox" id="subscribe" name="subscribe" value="1" /> <label for="subscribe">Отписаться от подписанных новостей</label>

И в этом случае, мы увидим checkbox таким: blogentry-4034-0-24835800-1368470763_thumb.png

 

А теперь добавим в input data-on="Зеленый" data-off="Красный"

<input data-on="Зеленый" data-off="Красный" type="checkbox" id="subscribe" name="subscribe" value="1" /> <label for="subscribe">Отписаться от подписанных новостей</label>

И увидим вот такое: blogentry-4034-0-75593700-1368470941_thumb.png, надеюсь вы поняли принцип его работы.

 

Всем спасибо за прочтение, данную статью именно для dle писал сам, первый раз такое делаю, строго не судите :) специально для nevex.pw :inevex:


7 комментариев


Рекомендованные комментарии

Полезная статья! Многим наверное понадобится)

 

Мелочь, но приятно  :)

Поделиться комментарием


Ссылка на комментарий

Неплохо, от части оригинально и необычно)) 

Поделиться комментарием


Ссылка на комментарий

Спасибо) Был бы портал..эх)
​Буду подобное периодически в блог постить, пока свой сайт разрабатываю :) 

Поделиться комментарием


Ссылка на комментарий

makoк сожалению еще очень долго,хотя скрипты многие почти готовы, но вот шаблона нет :(
Я рисую как могу но все не нравится, думаю может через месяц заказать если не получится.. 

Поделиться комментарием


Ссылка на комментарий

Jacob™Ande®son , ты как дорисуешь покажи людям в среднем размере и они скажут что да как. Потому что трудно одному решить такой вопрос.

Поделиться комментарием


Ссылка на комментарий

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
×
×
  • Создать...