Пользовательский кликабельный ('флажок') значок - PullRequest
Новая
       0

Пользовательский кликабельный ('флажок') значок

1 голос
/ 10 августа 2011

Я пытаюсь создать мобильное изображение «iPhone icon like», которое будет вести себя как флажок.Я хочу, чтобы на мобильном устройстве можно было щелкать значок (поэтому события нажатия в этом случае не работают).Я использую jquery mobile в качестве своей платформы, но хочу создавать эти иконки без стилизации.Код, который у меня есть (отключен от stackoverflow), работает в браузере компьютера, но не работает на мобильных «сенсорных» устройствах.Я понимаю, как использовать все инструменты CSS и чтобы изображения выглядели по-разному, когда включен или выключен флажок.Проблема в том, что я не знаю, какой тип события использовать, чтобы оно работало на основе касания с мобильным устройством.Есть ли у кого-то пример или какие-либо предложения, которые они могли бы предложить?

Спасибо 

<style>
input[type=checkbox] {
      display:none;
}

 input[type=checkbox] + label
 {
  background-image: url('pictures/wheelChair.png');
  height: 130px;
  width: 130px;
  display:inline-block;
  padding: 0 0 0 0px;
 }

 input[type=checkbox]:checked + label
  {
  background-image: url('pictures/wheelChair2.png');
  height: 130px;
  width: 130px;
  display:inline-block;
  padding: 0 0 0 0px;
   }

      </style>

 </head>
 <body>

 <p>
 <input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"> </label>

1 Ответ

0 голосов
/ 10 августа 2011

Таким образом, чтобы люди не продолжали снимать очки и оценки, я сделал новое решение, более ясное и более ниндзя CSS.Проверьте пример ЗДЕСЬ 

input[type="checkbox"]{
  display:none;
}
input[type="checkbox"]+label{
  cursor:pointer;
  text-indent:22px;
  display:block;
  height:22px;
  position:relative;
}
input[type="checkbox"] + label:after{
  background: url('http://www.dailycoding.com/Uploads/2008/12/CheckBox.png') no-repeat -21px 0px;
  display:block;
  width:21px;
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  height:21px;
}
input[type="checkbox"]:checked+label:after{
    background-position:0px 0px;
}

FOR 

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing">Something</label> 

<input type='checkbox' name='thing1' value='valuable' id="thing1"/><label for="thing1"></label>
...