Dojo Bootstrap Modal, kdo potřebuje vyskakovací okna

ReneRubalcava

<\/HEAD>

<\/P>

Před časem jsem napsal příspěvek na svém vlastním blogu<\/A> o použití Dojo Bootstrap s ArcGIS API pro JavaScript<\/A>. Ukázal jsem, jak ho můžete začlenit pro automatické dokončování vyhledávání, které funguje docela dobře a vypadá hezky. Použil jsem Dojo Bootstrap<\/A> poměrně rozsáhle ve svém vývoji aplikací a našel jsem několik zvláštností<\/EM>, které vyžadují trochu práce z mé strany. Pokud si rozvrhnete svůj HTML s atributy vlastností a načtete knihovnu, neměli byste mít žádné skutečné problémy kromě malé křivky učení. Zjistil jsem, že jsem musel udělat pár obcházek<\/EM>, když jsem chtěl programově vytvářet prvky jako widgety. Snadná ukázka toho je při vytváření Modalu<\/A>.<\/P>

<\/P>

Modaly, po svém<\/H2>Obvykle chci zacházet se svými Modal popupy jako s widgetem, což znamená, že možná budu chtít trochu přizpůsobit vzhled Modalu. V ukázce, kterou ukážu, je to šablona, kterou používám pro widget.<\/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>Hodně z toho je docela standardní, ale chtěl jsem dynamicky nastavit title<\/STRONG> a přidat bodyNode<\/STRONG> attach-point, do kterého bych mohl přidat obsah. Místo přímé interakce s modulem Modal ho obaluji do samostatného widgetu, který mi umožňuje dělat věci jako nastavit titul a aktualizovat obsah. Tento vlastní widget pro Modal vypadá takto.<\/P>var Popup = declare([_WidgetBase, _TemplatedMixin, Evented], {
  templateString: tpl,
  loaded: false,
  constructor: function() {
    this.set('content', '');
    this.set('title', 'Popup Window');
  },
  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>Takže co se zde děje je to, že vytvoříte nový Modal pomocí domNode<\/STRONG> widgetu jako cíle. Nastavíte watcher<\/A>, který sleduje skrytí Modalu a propaguje tuto událost nahoru z widgetu. To vyžadovalo podívat se na testy Modalu<\/A>, aby se našly názvy událostí, protože některé dokumentace jsou stále aktualizovány. Pak nastavíte watchery pro titul a obsah, přičemž ten druhý je převeden na DOM element<\/A> a přidán do bodyNode<\/STRONG> widgetu.<\/P><\/P>Výsledek bude vypadat podobně jako toto.<\/P><\/P>K demonstraci jsem vzal existující ukázku InfoWindow a upravil ji v tomto JSBin.<\/P>Ukázka Dojo Bootstrap<\/A><\/P>

<\/P>

V tom okně Modalu se toho moc neděje, ale zamyslete se nad tím, co byste mohli dělat s tímto volným místem. Můžete

zobrazit přílohy obrázků<\A>, nebo poskytnout pěkně formátované detaily dat nebo související tabulková data<\A>. Měli byste prostor dokonce přidat další widgety pro zobrazení pěkných grafů v okně. Používám to k poskytování plných editačních formulářů s pěkně velkými tlačítky a dokonce i dalšími Modal popupy jako výběrovými seznamy. Moc je ve vašich rukou<\EM>.<\P><\P>

Hack and slash<\H2><\P>Toto nemusí být průlomová práce, ale přidání malých detailů jako přesunutí obsahu InfoWindow do Modal popupu jsou typy věcí, které dodávají vašim aplikacím trochu šmrnc. Můžete také použít dijit/Dialog<\A> a upravit stylování podle potřeby, myšlenkou je vyzkoušet tento typ interakce a zjistit, zda poskytuje plynulejší zážitek pro vaše uživatele. Můžete dokonce stylovat Modal popupy tak, aby zabíraly celou stránku a poskytovaly hezké přechody na mobilním zařízení. Píšete kód vy sami. Velké díky patří Tom Wayson<\A> za pomoc při pronikání do nitra Dojo Bootstrap k dosažení výsledků.<\P><\P>Dále pro více tipů a triků geodev navštivte můj blog<\A> a hackněte své mapy.<\BODY><\HTML>

MichaelJenkins

Cool idea, I  like it!