Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.04.2014, 17:03   #1
Елена_05
Пользователь
 
Регистрация: 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);
Стиль style.css

Код 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>
А так же картинки

Подскажите как уменьшить размер переключателя, где то в два раза.
Изображения
Тип файла: png off.png (2.1 Кб, 56 просмотров)
Тип файла: png off-end.png (894 байт, 57 просмотров)
Тип файла: png on.png (2.1 Кб, 63 просмотров)
Тип файла: png on-end.png (842 байт, 61 просмотров)
Тип файла: png slider.png (1.2 Кб, 64 просмотров)
Елена_05 вне форума Ответить с цитированием
Старый 23.04.2014, 10:41   #2
byte916
Пользователь
 
Регистрация: 04.03.2008
Сообщений: 75
По умолчанию

Добрый день.
Нужно уменьшить размеры изображений до необходимых и в css сделать соответствующие изменения размеров)
Могу посоветовать для отладки http://jsfiddle.net/eV4ny/
byte916 вне форума Ответить с цитированием
Старый 23.04.2014, 14:34   #3
Елена_05
Пользователь
 
Регистрация: 17.05.2011
Сообщений: 55
По умолчанию

Я понимаю, что сначала нужно уменьшить картинки и затем внести изменения в css, но я вношу изменения, но у меня получается переключатель не очень корректно отображается, если сможете, подскажите мне как уменьшить размер
Елена_05 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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