Bienvenue dans la référence de l’API Mobiscroll. Trouvez ici les informations les plus récentes sur l’utilisation et les options de personnalisation.

Nécessite jQuery 1.7 ou plus récent

Plates-formes prises en charge – Android 4.1+, y compris Android 11, iOS 7+, y compris iOS 14, et tous les principaux navigateurs de bureau, y compris Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+ et Internet Explorer 10+.

Avoir des problèmes? demander Aider.

Mobiscroll est une collection de composants d’interface utilisateur qui aident à fournir de superbes applications mobiles, des sites Web offrant une excellente expérience utilisateur et des notes cinq étoiles dans l’App Store. Les contrôles suivent les directives UX de la plate-forme et peuvent être stylisés avec le générateur de thèmes pour un ajustement parfait.

Pour commencer, suivez simplement ces étapes simples.

1. Téléchargez Mobiscroll

Lors de la création de votre package, sélectionnez les composants requis sur le Télécharger la page.

2. Téléchargez les scripts requis

Nécessite jQuery 1.7 ou plus récent

<!-- Include jQuery -->
<script src="https://docs.mobiscroll.com/jquery-2.2.2.min.js"></script>
<!-- Include Mobiscroll -->
<script src="js/mobiscroll.jquery.min.js"></script>
<link href="css/mobiscroll.jquery.min.css" rel="stylesheet" type="text/css">

3. Ajoutez une entrée à votre balisage HTML

<input id="scroller" />

4a. Initialisez votre composant (jQuery)

Sélecteur de date standard

$(function () {
    // create a datepicker with default settings
    $("#scroller").mobiscroll().date();
});

Sélection de l’heure standard

$(function () {
    // create a timepicker with default settings
    $("#scroller").mobiscroll().time();
});

Sélecteur de date / heure standard

$(function () {
    // create a datetimepicker with default settings
    $("#scroller").mobiscroll().datetime();
});

4b. Initialisez votre composant (jQuery Mobile)

L’une des premières choses que les gens apprennent dans jQuery est comment utiliser le $(document).ready() (ou $(function() { }) ) Fonction pour exécuter du code spécifique au DOM dès que le DOM est prêt (ce qui se produit souvent bien avant l’événement onload). Cependant, dans les sites et applications jQuery Mobile, les pages sont demandées et placées dans le même DOM dans lequel l’utilisateur navigue. Par conséquent, l’événement DOM-Ready n’est pas très utile car il ne s’exécute que pour la première page. Pour exécuter du code lorsqu’une nouvelle page est chargée et créée dans jQuery Mobile, vous pouvez vous lier au pageinit Événement.

Sélecteur de date standard

$(document).on('pageinit', '#testPage', function () {
    // create a datepicker with default settings
    $("#scroller").mobiscroll().date();
});

D’autres exemples peuvent être trouvés dans le démo Page.

Utiliser le chargeur de module

Mobiscroll peut également être chargé en tant que module. Il implémente le modèle UMD (Universal Module Definition), ce qui signifie qu’il peut être utilisé avec des cœurs de module qui utilisent la syntaxe AMD (Asynchronous Module Definition) (par exemple, RequireJS, Webpack, SystemJS) ou CommonJS (par exemple, Browserify, Webpack, SystemJS).

Pour charger Mobiscroll en tant que module, Télécharger le package mobiscroll et utilisez-le comme n’importe quel autre module:

Exemple CommonJS

var $ = require('jquery');
var mobiscroll = require('path/to/mobiscroll/js/mobiscroll.jquery.min');

$(function () {
    $('#test').mobiscroll().date();
});

Exemple AMD

require(['jquery', 'path/to/mobiscroll/js/mobiscroll.jquery.min'], function ($) {
    $('#test').mobiscroll().date();
});

Paramètres globaux

mobiscroll.settings

la description

L’objet global Mobiscroll est l’endroit où vous pouvez définir toutes les options dont vous avez besoin pour votre application ou page. Il doit contenir les paramètres qui doivent être les mêmes pour tous les composants.

Exemple

// Sets the theme to iOS and localization to German
mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'
};



Source link

Recent Posts