4 Stimmen

Keine Reaktion auf meine HTML-Schaltflächen in phonegap

Ich habe drei HTML-Schaltflächen, und wenn ich sie anklicke, leuchten sie nicht auf und tun nichts.

Ich habe auch versucht, sie zu gestalten, aber sie bleiben im Standarddesign. Ich habe nur gewöhnlichen Code verwendet ich habe einfach keine Ahnung, was mit ihnen falsch ist

<input type="button" value="Proceed">
<input type="button" value="Cancel">

0 Stimmen

Nun, anhand des angegebenen Codes ist es ziemlich schwer zu sagen.

3voto

Tony Lukasavage Punkte 1897

Verwenden Sie nicht , sondern erstellen Sie Ihre Schaltflächen mit CSS, damit sie auf Berührung reagieren. Dazu ist etwas Javascript erforderlich, da selbst die meisten mobilen Browser Touch-Ereignisse nicht richtig der CSS-Pseudoklasse :active zuordnen.

Ihr "Knopf":

<a class="button" id="yourButton">Button</a>

Einige sehr einfache CSS, um die Hintergrund- und Textfarbe bei Berührung umzuschalten:

a.button {
    color:#fff;
    border:0px;
    padding:5px;
    background:#000;
}

a.button-active {
    background:#fff;
    color:#000;
}

Und hier ist das Javascript, das Sie in Ihrem onload auf deviceready Handler aufrufen würden. Ich verwende xuijs hier (xuijs.com), aber Sie können jQuery oder jedes andere Javascript verwenden, um Klassen hinzuzufügen und zu entfernen:

x$('.button').on('touchstart', function(e) { 
    x$(e.currentTarget).addClass('button-active'); 
} );
x$('.button').on('touchend', function(e) { 
    x$(e.currentTarget).removeClass('button-active'); 
} );

Dies ist ein sehr einfaches Beispiel. Sobald Sie dies alles eingerichtet haben, können Sie beliebige Änderungen an der CSS vornehmen, um festzulegen, wie die Schaltfläche aussehen soll, wenn sie aktiv und inaktiv ist.

0voto

Mon Noval Punkte 280

Hmmm Deine Frage ist nicht so klar. Aber wenn du nur ein Leuchten in deinen Knöpfen haben willst, kannst du dir anschauen, wie Formalisieren Sie tut es.

Hier ist eine Seite zeigt den Leuchteffekt der Taste (wenn sie gedrückt wird).

Aktualisierung: Oooops, sorry, ich habe den "PhoneGap"-Teil übersehen. Die Lösung, die ich oben gegeben habe, ist nur für normale HTML-Formulare, ich habe keine Erfahrung mit der Verwendung von PhoneGap noch. prost :)

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X