|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
22.04.2014, 17:03 | #1 |
Пользователь
Регистрация: 17.05.2011
Сообщений: 55
|
Отображение переключателя iphone
Добрый вечер, подскажите как можно переключатель iphone уменьшить в размере, немного не получается
У меня подключена библиотека jquery-1.3.2.js iphone-style-checkboxes.js Код HTML:
(function($){ $.iphoneStyle = { defaults: { checkedLabel: 'ON', uncheckedLabel: 'OFF', background: '#fff' } } $.fn.iphoneStyle = function(options) { options = $.extend($.iphoneStyle.defaults, options); return this.each(function() { var elem = $(this); if (!elem.is(':checkbox')) return; elem.css({ opacity: 0 }); elem.wrap('<div class="container" />'); elem.after('<div class="handle"><div class="bg" style="background: ' + options.background + '"/><div class="slider" /></div>') .after('<label class="off">'+ options.uncheckedLabel + '</label>') .after('<label class="on">' + options.checkedLabel + '</label>'); var handle = elem.siblings('.handle'), handlebg = handle.children('.bg'), offlabel = elem.siblings('.off'), onlabel = elem.siblings('.on'), container = elem.parent('.container'), rightside = container.width() - 39; container.click(function() { var is_onstate = (handle.position().left <= 0); new_left = (is_onstate) ? rightside : 0, bgleft = (is_onstate) ? 34 : 0; handlebg.hide(); handle.animate({ left: new_left }, 100, function() { handlebg.css({ left: bgleft }).show(); }); if (is_onstate) { offlabel.animate({ opacity: 0 }, 200); onlabel.animate({ opacity: 1 }, 200); } else { offlabel.animate({ opacity: 1 }, 200); onlabel.animate({ opacity: 0 }, 200); } elem.attr('checked', !is_onstate); return false; }); // initial load if (elem.is(':checked')) { offlabel.css({ opacity: 0 }); onlabel.css({ opacity: 1 }); handle.css({ left: rightside }); handlebg.css({ left: 34 }); } }); }; })(jQuery); Код HTML:
.container { position: relative; width: 85px; height: 27px; cursor: pointer; overflow: hidden; } .container input { position: absolute; top: 5px; left: 30px; } .handle { display: block; height: 27px; width: 39px; cursor: pointer; position: absolute; top: 0; left: 0; } .handle .bg { position: absolute; width: 5px; height: 100%; top: 0; left: 0; z-index: 1; } .handle .slider { position: absolute; top: 0; left: 0; height: 27px; width: 39px; background: url(images/slider.png) no-repeat; z-index: 2; } label.on, label.off { font-size: 17px; line-height: 17px; font-weight: bold; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; text-transform: uppercase; cursor: pointer; display: block; height: 22px; position: absolute; width: 52px; top: 0; } label.on { color: #fff; background: url(images/on.png) no-repeat; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); left: 0; padding: 5px 0 0 8px; } label.off { color: #8B8B8B; background: url(images/off.png) no-repeat right 0; text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6); text-align: right; right: 0; padding: 5px 8px 0 0; } Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>iPhone Style Radios Demo</title> <script src="jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script> <script src="iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" /> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(':checkbox').iphoneStyle(); }); </script> </head> <body> <h2>Выключено по умолчанию</h2> <input type="checkbox" /> <h2>Включено по умолчанию</h2> <input type="checkbox" checked="checked" /> </body> </html> Подскажите как уменьшить размер переключателя, где то в два раза. |
23.04.2014, 10:41 | #2 |
Пользователь
Регистрация: 04.03.2008
Сообщений: 75
|
Добрый день.
Нужно уменьшить размеры изображений до необходимых и в css сделать соответствующие изменения размеров) Могу посоветовать для отладки http://jsfiddle.net/eV4ny/ |
23.04.2014, 14:34 | #3 |
Пользователь
Регистрация: 17.05.2011
Сообщений: 55
|
Я понимаю, что сначала нужно уменьшить картинки и затем внести изменения в css, но я вношу изменения, но у меня получается переключатель не очень корректно отображается, если сможете, подскажите мне как уменьшить размер
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
VBasic Зависимость флажка от переключателя | Lioness | Помощь студентам | 4 | 02.11.2011 14:59 |
Автовставка даты при значении переключателя | SevereK20 | Microsoft Office Access | 3 | 25.10.2010 13:54 |
Юзать два 2-х ступенчетых переключателя как один 4-х ступенчетый | Altera | Свободное общение | 25 | 07.08.2009 21:31 |
Запомнить положение переключателя | StasSv | Microsoft Office Excel | 2 | 03.01.2008 10:57 |