Share
Dit is het derde en laatste deel van de serie over Audero Audiospeler. In dit artikel zal ik de resterende bestanden bespreken, zodat u het project kunt voltooien en er mee kunt spelen.
jQuery Mobile doet veel werk voor u door de elementen van pagina's voor apparaten met kleinere schermen te verbeteren. Er zijn er echter enkele waar ik niet om geef, en we zullen deze aanpassen in onze style.css het dossier. Dit wordt ook gebruikt om de markup van de speler te stylen.
Standaard, zelfs als u geen knoppen in de koptekst of in de voettekst van een pagina hebt, behoudt het framework nog steeds enige ruimte aan beide zijden van de elementen en worden lange titels afgekapt. Dit gedrag wordt ook toegepast op andere elementen. We kunnen het eenvoudig veranderen door de regel toe te passen witruimte: normaal! belangrijk; naar onze gerichte elementen als .ui-titel.
De bron van het stylesheet wordt hier getoond:
Accentsconagua
.ui-header .ui-title, .ui-footer .ui-title, .ui-btn-inner * white-space: normaal! belangrijk; .photo text-align: center; # player-play, # player-stop display: inline-block; breedte: 48 px; hoogte: 48 px; # player-play background-image: url ('... /images/play.png'); # player-stop background-image: url ('... /images/stop.png'); # time-slider display: none; div.ui-slider-track margin: 0; breedte: 100%; jQuery Mobile heeft een standaardconfiguratie die goed genoeg moet zijn voor de meeste projecten met eenvoudige vereisten. Er zullen echter momenten zijn waarop u een bepaald standaardgedrag wilt wijzigen of beheersen. U kunt dit bereiken door een configuratiebestand te schrijven. Het bestand jquery.mobile.config.js is precies waar we de configuratie zullen hebben. Houd er rekening mee dat u het configuratiebestand moet opnemen voor de jQuery Mobile-bestanden. Wanneer jQuery Mobile start, wordt het mobileinit gebeurtenis, die degene is die u moet binden om de standaardinstellingen te overschrijven.
We zullen de wijziging aanbrengen door waarden toe te wijzen aan de eigenschappen van de $ .mobiele voorwerp. Ik zal niet veel eigenschappen veranderen. Ik zal in plaats daarvan de optie wijzigen om de tekst getoond te krijgen in de widget voor de pagina-lader en het thema.
De volledige bron van het bestand staat hieronder:
$ (document) .on ('mobileinit', function () // Page Loader Widget $ .mobile.loader.prototype.options.text = 'Bezig met laden ...'; $ .mobile.loader.prototype.options.textVisible = true ; // Theme $ .mobile.page.prototype.options.theme = 'a'; $ .mobile.page.prototype.options.headerTheme = 'a'; $ .mobile.page.prototype.options.contentTheme = 'a '; $ .mobile.page.prototype.options.footerTheme =' a '; $ .mobile.page.prototype.options.backBtnTheme =' a ';); De Adobe PhoneGap Build-service biedt u de mogelijkheid om de metagegevens van een toepassing, zoals de auteur en beschrijving, op te geven met behulp van een configuratiebestand. Dit bestand wordt genoemd config.xml. Het uitleggen van het formaat in de diepte valt buiten het bereik van deze serie, maar ik zal u een kort overzicht geven. Als u meer over dit onderwerp wilt lezen, bekijkt u de officiële documentatiepagina.
De config.xml bestand volgt de W3C widget-specificatie en moet binnen de root van de app blijven, op hetzelfde niveau van de index.html het dossier. De eerste regel is de XML-verklaring en de hoofdmap van het document is een ID kaart (de unieke ID voor uw project), en versie (die de versie van de applicatie specificeert). Binnen in de
naam en waarde. Er zijn veel voorkeuren die u kunt definiëren, maar de belangrijkste is naar mijn mening het specificeren van de gebruikte Cordova-versie.De biedt uw app toegang tot bronnen in andere domeinen - met name kan uw app pagina's laden van externe domeinen die uw volledige webview kunnen overnemen.
Herinnerend aan wat we in de sectie hebben besproken Externe links beheren van de vorige post, om de externe links in de Cordova WebView te openen, moeten we ze toevoegen aan de witte lijst van de app. Omdat onze applicatie geen links van externe en onveilige bronnen kan ophalen, kunnen we het proces verkorten zodat elke externe bron met behulp van de * speciaal karakter. Bijvoorbeeld:
Ik heb gewezen op de belangrijkste punten van het formaat, en nu kun je de bron van het configuratiebestand begrijpen. Het volledige bestand is hieronder:
