iPhone: Mimic Cocoa UIKit i Webkit
Ved hjelp av WebKit i iPhone /iPod touch programutvikling er en vanlig praksis. Men å hoppe fra kakao til WebKit og tilbake kan være forvirrende for brukeren. Her er et par enkle tips for theming WebKit å ligne Cocoa er UIKit rammeverk.
Konkret hva jeg emulere her er en UITableView.
Så her er et eksempel fra en av våre kommende programmer. Vi bruker WebKit her for å gi oss økt fleksibilitet. Men vi ønsket å opprettholde Cocoa UIKit preg:
Bakgrunn:
Den iphone program grå /hvit stripete bakgrunn er allestedsnærværende. Føl deg fri til å stjele den herfra:
For å gjenta denne bakgrunn i WebKit, bruke noe sånt som dette:
body {background-image: url ('iphone_back.png'); background-repeat: repeat; -webkit-user-select: none; -webkit-tekst-size-adjust: none; margin: 0;}
Preget Topptekst:
iphone bruker ofte preget header teksten på denne grå strippet bakgrunn. Bruke safari tekst-shadow, er dette ganske enkelt kopieres. Jeg ringte denne overskriften klassen. Vikle din tekst i en klasse med følgende css:
.header {font-weight: bold; font-size: large; color: # 4c566c; text-shadow: 0px 1.5px 0px hvit;}
Avrundede Bokser
Selvfølgelig, avrundet boksene er overalt i iPhone GUI. Her har jeg kalt min divs kurve. Safari -webkit-border-radius er et flott verktøy for dette. Her er et eksempel på css som vil gi denne effekten
#curve {-webkit-border-radius: .5em; border:. 1px solid grå; margin: 5px; padding: 5px 0px 5px 0px; background-color: #fff}
Hvis det er interesse, vil jeg legge flere eksempler senere. Ta gjerne dele dine egne i kommentarfeltet nedenfor. Anmeldelser