Share
Ceci est la troisième et dernière partie de la série sur Audero Audio Player. Dans cet article, je vais passer en revue les fichiers restants afin que vous puissiez terminer le projet et jouer avec..
jQuery Mobile fait beaucoup pour vous en améliorant les éléments des pages pour les appareils dotés d'écrans plus petits. Cependant, il y en a que je n’aime pas, et nous les ajusterons dans notre style.css fichier. Ceci est également utilisé pour styler la balise du joueur.
Par défaut, même si vous ne disposez pas de boutons dans l'en-tête ou le pied de page, le cadre réserve toujours de l'espace des deux côtés des éléments et tronque les titres longs. Ce comportement est également appliqué à d'autres éléments. Nous pouvons le changer simplement en appliquant la règle espace blanc: normal! important; à nos éléments ciblés comme .titre ui.
La source de la feuille de style est montrée ici:
Accentsconagua
.ui-header .ui-title, .ui-footer .ui-title, .ui-btn-inner * white-space: normal! important; .photo text-align: center; # player-play, # player-stop display: inline-block; largeur: 48px; hauteur: 48px; # 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; largeur: 100%; jQuery Mobile a une configuration par défaut qui devrait être suffisante pour la plupart des projets avec des exigences simples. Cependant, vous voudrez parfois modifier ou prendre le contrôle de certains comportements par défaut. Vous pouvez y parvenir en écrivant un fichier de configuration. Le fichier jquery.mobile.config.js est exactement où nous aurons la configuration. Veuillez noter que vous devez inclure le fichier de configuration. avant les fichiers jQuery Mobile. Lorsque jQuery Mobile démarre, il déclenche le mobileinit événement, qui est celui que vous devez lier pour remplacer les paramètres par défaut.
Nous allons faire le changement en attribuant des valeurs aux propriétés de la $ .mobile objet. Je ne changerai pas beaucoup de propriétés. Je vais plutôt changer l'option pour que le texte soit affiché sur le widget chargeur de page et le thème.
La source complète du fichier est listée ci-dessous:
$ (document) .on ('mobileinit', function () // Widget Page Loader $ .mobile.loader.prototype.options.text = 'Chargement…'; $ .mobile.loader.prototype.options.textVisible = true ; // Thème $ .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 ';); Le service Adobe PhoneGap Build vous permet de spécifier les métadonnées d'une application, telles que l'auteur et la description, à l'aide d'un fichier de configuration. Ce fichier s'appelle config.xml. Expliquer le format en profondeur dépasse le cadre de cette série, mais je vais vous donner un bref aperçu. Si vous voulez en savoir plus sur ce sujet, consultez la page de documentation officielle.
le config.xml Le fichier suit la spécification du widget W3C et doit rester à la racine de l'application, au même niveau que le index.html fichier. Sa première ligne est la déclaration XML et la racine du document est un identifiant (identifiant unique de votre projet), et version (qui spécifie la version de l'application). À l'intérieur de
prénom et valeur. Vous pouvez définir de nombreuses préférences, mais la plus importante à mon avis est de spécifier la version de Cordova utilisée..le fournit à votre application un accès à des ressources sur d'autres domaines - en particulier, elle permet de charger des pages de domaines externes pouvant prendre en charge l'intégralité de votre affichage Web.
Rappelant ce que nous avons discuté dans la section Gestion des liens externes à partir du message précédent, pour ouvrir les liens externes dans Cordova WebView, nous devons les ajouter à la liste blanche de l'application. Étant donné que notre application ne récupère pas les liens de sources externes non sécurisées, nous pouvons raccourcir le processus pour autoriser l'utilisation de toute ressource externe * Caractère spécial. Par exemple:
J'ai souligné les points clés du format et vous pouvez maintenant comprendre la source du fichier de configuration. Le fichier complet est ci-dessous:
