Checkboxen Iphone Stil

[agodesign]

Hi an alle,

Ich bin momentan dabei eine kleine Bilderfilterungsseite für meine Firma zu schrieben, das ganze soll am Ende über Phonegap in ein Ipad app gewandelt werden.

Hier der Link: jQuery Checkbox Filter Test

Damit das ganze auch nach einem App aussieht möchte ich die Checkboxen im Iphone Style haben, jedoch funktioniert das noch nicht wirklich.

Momentan liegen diese nämlich unter dem Anfangsbuchstaben der jeweiligen Beschreibung.

Das Script für den Iphone Style habe ich von hier:
Introducing iPhone-style Checkboxes « Thomas Reynolds

Bräuchte dringend Hilfe :)

Grüße Daniel

 

[supertobs]

ich weiß nicht, ob dir das etwas hilf,aber diese Seite erklärt, wie man checkboxen anders aussehen lassen kann:
Styling Checkboxes and Radio Buttons With CSS and JavaScript

Generell funktioniert das ganze so, dass man die Checkbox durch ein bild ersetzt und die richtige checkbox unsichtbar macht.
Dieses sieht dann so aus wie die checkbox.
damit das ganze auch noch funktioniert, muss man per javascript, wenn man auf die bild checkbox klickt, die richtige aktiviert werden und per javascript dann das bild entsprechend angepasst werden. das ganze kann dann nach belieben mit hover effekten etc weiterentickelt werden.


Hoffe ich konnte dir helfen:

Tobias

 

[agodesign]

danke für die schnelle antwort aber die Seite hab ich auch schon gesehen. :)

Die Sache ist eben die, dass die Iphone buttons perfekt wären weil die normalen Checkboxen auf dem Ipad einfach ungeeignet sind, da Menschen mit großen Fingern oder Sehgeschwächte Leute wahrscheinlich Probleme damit haben könnten.

http://blog.skyowner.com/2011/03/25/stylish-check-boxes-with-jquery-and-css/

Diese Seite habe ich mal ausprobiert, die Sache ist nur die, die Buttons verändern wieder nichts, jedoch wird auch diesmal die Schrift zum auslöser... warum auch immer

 

[supertobs]

Schau dir nocheinmal den Code auf der Wesite an.
Das ganze funktioniert nur mit JQuery und dem JQuery Addon, dass man dort auf der Website downloaden kann (runterscrollen).
Dann musst du noch den Jquery Code hinzufügen, der die Checkboxen zum funktionieren bringt (auch auf der website). ;)
Dazu möchte ich noch erwähnen, dass das beispiel von dir HTML 5 verwendet. dabei sind einige standarts enthallten, die bis jetzt noch nicht in Safari auf dem iPad funktionieren. ;)

das prinzip für dein problem , mit dem alle anderen beispiele auch arbeiten ist folgendes:
man nimmt einen div container.(hällt das ganze zusammen)
darin einen weiteren div container.(schiebeteil)
darin setzt mann 3 span objekte nebeneinander (jeweils als on, off und handel).
Dieser zweite div container werden dann per Javascript hin und her geschoben, indem man das margin-left attribut ändert.
die 1. div box darf also nur so breit sein, dass jeweils eine hälfte des inneren angezeigt werden soll.
ist verwirrend ich weiß, aber anders kann ichs auch nicht erklären ;)

 

[agodesign]

Ok den Code hab ich ja schon eingefügt und alle so weit fertig gehabt, das ding ist bloß, ich hab festgestellt dass das aktivieren der Checkbox über das label ausgelöst wird (warum auch immer) das Label ist ja die Beschreibung die nebendran steh, wie kann ich das ändern, dass es durch den klick auf den button aktviert wird?

Hier nochmals der Link:
Stylish Check Boxes with jQuery and CSS | Skyowner.com Blog

Würde es funktionieren wenn ich im script überall "label" durch "type" ersetze? weil type ist ja die Checkbox ("type=checkbox")