jQuery Mobile -siirtymät

jQuery Mobile sisältää CSS-vaikutuksia, jotka mahdollistavat sivun avauksen valinnan.

jQuery Mobile -siirtymävaikutukset

jQuery Mobile:lla on sarja vaikutuksia, jotka auttavat sinua siirtymään yhdestä sivusta seuraavaan.

Huomautus:Jos haluat toteuttaa siirtymäefektejä, selaimen on tuettava CSS3 3D-muunnoksia:

Selaimen tuki

  • Internet Explorer 10 tukee 3D-muunnoksia (vanhemmat versiot eivät tue)
  • Opera ei edelleen tue 3D-muunnoksia

Siirtymäefektit voidaan soveltaa mihin tahansa linkkiin tai lomakkeen lähetykseen, joka tehdään data-transition-ominaisuuksilla:

<a href="#anylink" data-transition="slide">siirry sivulle kaksi</a>

Seuraava taulukko näyttää kaikki过渡可用过渡,jotka voidaan käyttää yhdessä data-transition-ominaisuuden kanssa:

siirtymä kuvaus 测试
fade oletus. Pehmeä häipyminen ja häipyminen seuraavaan sivulle. 测试
flip kiertää takaisin ja siirtyä seuraavaan sivulle. 测试
flow heittää nykyisen sivun pois ja tuo seuraavan sivun. 测试
pop siirry seuraavaan sivulle kuin ponnahdusikkunana. 测试
slide liu'uta oikealta vasemmalle ja siirry seuraavaan sivulle. 测试
slidefade liu'uta oikealta vasemmalle ja pehmeästi häipyminen seuraavaan sivulle. 测试
slideup liu'uta ylös ja siirry seuraavaan sivulle. 测试
slidedown liu'uta alas ja siirry seuraavaan sivulle. 测试
turn siirry seuraavaan sivulle. 测试
none ei siirtymäefektiä. 测试

Vinkki:jQuery Mobile:ssä pehmeä häipyminen ja häipyminen kaikkiin linkkeihin on oletusarvoista (jos selain tukee sitä).

Vinkki:Kaikki edellä mainitut vaikutukset tukevat myös päinvastaista toimintaa, esimerkiksi, jos haluat sivun liikkuvan vasemmalta oikealle eikä oikealta vasemmalle, käytä arvolla "reverse" data-direction-ominaisuutta. Tämä on oletusarvo后退按钮上。

Esimerkki

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Liukus

Kokeile itse