2016-06-04 12 views
7

Moim celem jest użycie obrazu jako przycisku w trybie jonowym. Najpierw użyłem tagu-tag do połączenia strony. Ale kiedy kliknąłem na zdjęcie. Brak efektu aktywacji za pomocą przycisku. Więc przełączyć przycisk znacznikaJak używać obrazu jako przycisku w trybie jonowym

Próbowałem, używając

<button class="button button-clear" style="background-image:url('img/myImage.jpg'); background-size:cover"></button> 

ale wysokość przycisk pozostanie taka sama. Więc nie wyświetli obrazu w pełnym rozmiarze. Próbowałem

style="font-size:100px;" 

i

style="line-height:100px;" 

Ale nic nie wydaje się działać.

Próbowałem też dodać własne css

.Test-up { 
    border :none; 
    padding : 0px; 
} 

.Test-down { 
    opacity: 0.5; 
    border:0px; 
    padding: 0px; 
} 

i dodał poniżej kod do mojego index.html

<button ng-mousedown="class='Test-down'" ng-mouseup="class='Test-up'" class="{{class}}" href="#"> 

i poniżej kod do mojego kontrolera

$scope.class = "Test-up"; 

jak próbowałem od http://codepen.io/Leiron/pen/ztawA Ale to nie działa z ios lub androidem. Więc co powinienem zrobić?

Odpowiedz

7

Spróbuj tego.

<img src="img/myImage.jpg" style="width : 100% ; height : 100%" ng-click="nextpage()" > 

ten shoud do triku możesz mieć wysokość i szerokość jako swoje życzenie.

Upewnij się, że podałeś poprawną ścieżkę do pola src.

+0

Próbowałem, ale kliknięcie ng stało się po zwolnieniu palca. Chcę, aby tło obrazu nieco zmieniło jego krycie, gdy dotykałem przycisku. Podobnie jak przy dotykaniu przedmiotu jonowego. Będą zmiany, gdy będę trzymać palec w dół. To jest inne. –

+0

jeśli chcesz jak przedmiot jonowy, to umieść ten obraz w elemencie jonowym, tak aby był taki sam, jak myślisz: '' niech ma tylko jeden element na liście –

0

check to

<button ng-mousedown="class='fb-down'" ng-mouseup="class='fb-up'" class="{{class}}"> <img src="your_image_path" alt="" title="" /> </button>

Jeśli nadal możesz napotkać żadnych problemów w css i anyhting daj mi znać.

Dzięki

1

joński 2

umieścić swoje ikony w www/aktywa/images następnie

<img src="assets/images/icon.png" style="width : 100% ; height : 100%" ng-click="nextpage()" > 
+1

wydaje się, że to działa w trybie jonowym 2 z "(kliknij) "zamiast" ng-click " –

4

Możesz wypróbować w ten sposób -

<button (click)="click()" block> 
    <img src="assets/img/scan_btn.png"> 
</button> 
Powiązane problemy