Dojo Bootstrap Modal, wer braucht Popups

ReneRubalcava

<\/HEAD>

<\/P>

Vor einiger Zeit habe ich einen Beitrag auf meinem eigenen Blog<\/A> über die Verwendung von Dojo Bootstrap mit der ArcGIS API for JavaScript<\/A> geschrieben. Ich habe gezeigt, wie man es einbinden kann, um eine Autocomplete-Suche zu machen, die ziemlich gut funktioniert und gut aussieht. Ich habe Dojo Bootstrap<\/A> ziemlich umfangreich in meiner App-Entwicklung verwendet und einige Eigenheiten<\/EM> gefunden, die ein wenig Arbeit meinerseits erfordern. Wenn Sie Ihr HTML mit den Property-Attribut-Tags layouten und die Bibliothek laden, sollten Sie keine wirklichen Probleme haben außer einer kleinen Lernkurve. Ich habe festgestellt, dass ich ein paar Workarounds<\/EM> machen musste, wenn ich Elemente programmatisch als Widgets erstellen wollte. Eine einfache Demonstration davon sieht man beim Erstellen eines Modal<\/A>.<\/P>

<\/P>

Modals, dein eigener Weg<\/H2>Normalerweise möchte ich meine Modal-Popups als Widget behandeln, und das bedeutet, dass ich das Aussehen des Modals ein wenig anpassen möchte. Im Beispiel zeige ich die Vorlage, die ich für das Widget verwende.<\/P>var tpl = [
  '<div class="modal fade popup-container" id="myModal" tabindex="-1" role="dialog"',
  'data-dojo-type="Modal" data-dojo-props="header:My Modal, modalClass: fade"',
  'aria-labelledby="myModalLabel" aria-hidden="true" data-dojo-attach-point="modalNode">',
  '<div class="modal-dialog">',
    '<div class="modal-content" data-dojo-attach-point="contentNode">',
      '<div class="modal-header">',
        '<h4 id="myModalLabel"><\/h4>',
        '<span data-dojo-attach-point="labelNode">${title}<\/span>',
        '<a href="javascript:void(0)" class="glyphicon glyphicon-remove pull-right popup-close" data-dismiss="modal" aria-hidden="true"><\/a>',
      '<\/div>',
      '<div data-dojo-attach-point="bodyNode" class="modal-body">',
      '<\/div>',
    '<\/div>',
  '\/div>',
'<\/div>'
].join("");<\/PRE><\/P>Vieles davon ist ziemlich Standard, aber ich wollte den Titel<\/STRONG> dynamisch setzen und einen bodyNode<\/STRONG>-Attach-Punkt hinzufügen, dem ich den Inhalt hinzufügen kann. Anstatt direkt mit dem Modal-Modul zu interagieren, kapsle ich es in einem separaten Widget ein, das mir erlaubt, Dinge wie das Setzen des Titels und das Aktualisieren des Inhalts zu tun. Dieses benutzerdefinierte Widget für das Modal sieht so aus.<\/P>var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
  templateString: tpl,
  loaded: false,
  constructor: function() {
    this.set('content', '');
    this.set('title', 'Popup-Fenster');
  },
  postCreate: function() {
    this.modal = new Modal(this.domNode);
    var watchContent = this.watch('content', function(_, __, value) {
      domConstruct.empty(this.bodyNode);
      this.bodyNode.appendChild(domConstruct.toDom(value));
    }.bind(this));
    var watchTitle = this.watch('title', function(_, __, value) {
      this.labelNode.innerHTML = value;
    }.bind(this));
    var onHide = on(this.modal.domNode, 'hide.bs.modal', function() {
      this.emit('hide', {});
    }.bind(this));
    this.own(watchContent, watchTitle, onHide);
    this._init();
  },
  show: function() {
    this.modal.show();
  },
  hide: function() {
    this.modal.hide();
  },
  _init: function() {
    this.set('loaded', true);
    this.emit('loaded', true);
  }
});<\/PRE><\/P>Was hier passiert ist also, dass Sie ein neues Modal mit dem domNode<\/STRONG> des Widgets als Ziel erstellen. Sie richten einen Watcher<\/A> ein für den Fall, dass das Modal verborgen wird und geben dieses Ereignis vom Widget weiter. Das erforderte einen Blick in die Tests für das Modal<\/A>, um Ereignisnamen zu finden, da einige der Dokumentation noch aktualisiert werden. Dann richten Sie Watcher für den Titel und den Inhalt ein, wobei letzterer in ein DOM-Element konvertiert wird<\/A> und zum bodyNode<\/STRONG> des Widgets hinzugefügt wird.<\/P><\/P>Das Ergebnis sieht ungefähr so aus.<\/P><\/P>Um dies zu demonstrieren, habe ich einfach ein bestehendes InfoWindow-Beispiel genommen und es in diesem JSBin modifiziert.<\/P>Dojo Bootstrap Beispiel<\/A><\/P>

<\/P>

In diesem Modal-Fenster passiert nicht viel, aber denken Sie darüber nach, was Sie mit diesem zusätzlichen Platz machen könnten. Sie könnten

Bildanhänge anzeigen<\/A>, oder schön formatierte Details der Daten oder verwandte Tabellendaten<\/A> bereitstellen. Sie hätten sogar Platz, um andere Widgets hinzuzufügen, um schöne Diagramme im Fenster anzuzeigen. Ich benutze dies, um vollständige Bearbeitungsformulare mit schönen großen Schaltflächen und sogar anderen Modal-Popups als Auswahllisten bereitzustellen. Die Macht liegt in Ihren Händen<\/EM>.<\/P><\\/P>

Hack and slash<\\/H2>Dies mag hier keine bahnbrechende Arbeit sein, aber kleine Akzente wie das Verschieben von InfoWindow-Inhalten in ein Modal-Popup sind die Art von Dingen, die Ihren Anwendungen etwas Flair verleihen. Sie könnten auch dijit/Dialog<\\/A> verwenden und bei Bedarf das Styling anpassen. Die Idee ist es, diese Art von Interaktion auszuprobieren und zu sehen, ob sie eine flüssigere Erfahrung für Ihre Benutzer bietet. Sie könnten die Modal-Popups sogar so stylen, dass sie die ganze Seite einnehmen und auf einem mobilen Gerät schöne Übergänge bieten. Sie schreiben den Code – machen Sie ihn zu Ihrem eigenen. Ein großes Dankeschön an Tom Wayson<\\/A>00c dafür, dass er mir geholfen hat, tief in die Dojo Bootstrap-Strukturen einzutauchen und Dinge erledigt zu bekommen.<\\/P>

<\\/P>

Für mehr geodev Tipps und Tricks besuchen Sie

meinen Blog<\\/A> und hacken Sie Ihre Karten.<\\/BODY><\\/HTML>

MichaelJenkins

Cool idea, I  like it!