Úpravy CSS pro Esri Slider

ReneRubalcava

<\/HEAD>

<\/P>

Takže jste vytvořili skvělou webovou mapu. Vaše webová mapa vyniká a dělá dojem<\/EM>. Možná máte nějaké pěkně vypadající vlastní nástroje. Třeba jste vytvořili vlastní vyhledávací nástroj nebo pěkné zobrazení vašich atributových dat. Ale začnete si myslet, hmm, rád bych celé své aplikaci dal téma<\/EM>. Možná je zaměřena na nějaké vodní zdroje nebo provádí analýzu hustoty lesa. Ale jedna věc vypadá stejně na všech vašich mapách... váš zoom slider.<\/P><\/P>Hmm. Nevypadá to špatně, ale mohlo by to vypadat lépe.<\/P><\/P>CSS třídy<\/SPAN><\/H2>Existuje několik věcí, které můžete poměrně snadno přizpůsobit pomocí CSS u slideru. Nevyžaduje to moc práce, ale může to vaší aplikaci dodat ten správný šmrnc.<\/P>Zde je seznam tříd spojených se sliderem, které se vám budou hodit.<\/P>.esriSimpleSlider<\/SPAN><\/LI>.esriSimpleSlider div<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderIncrementButton<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderHorizontal .esriSimpleSliderIncrementButton<\/SPAN><\/LI> .esriSimpleSliderHorizontal .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:hover,.esriSimpleSliderIncrementButton:hover<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:active,.esriSimpleSliderIncrementButton:active<\/SPAN><\/LI>.esriSimpleSliderDisabledButton,.esriSimpleSliderDisabledButton:active,.esriSimpleSliderDisabledButton:hover<\/SPAN><\/LI><\/UL><\/P>Může se to zdát jako dlouhý seznam, ale nemusíte upravovat všechny, toto jsou jen ty, které jsou popsány v defaultním css ArcGIS JS API. Existují i další týkající se posunů podle umístění slideru na stránce. Můžete začít experimentovat s CSS v nástrojích pro vývojáře prohlížeče, jako jsou Chrome Dev Tools<\/A>. Je to snadný způsob, jak si pohrát s vaší aplikací.<\/P>

<\/P>

Vyzkoušejte si to<\/H2>Několik zajímavých věcí, které můžete udělat, je přidat stín boxu, odstranit rámeček a zvětšit tlačítka pro pohodlnější ovládání na mobilních zařízeních.<\/P>.esriSimpleSlider {
  border: 0 solid #57585A;
  \/\*shadow*\/
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.12), 5px 5px 5px rgba(0, 0, 0, 0.12);
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
}<\/PRE><\/P>Výsledek vypadá takto.<\/P>**Tip: Pokud změníte velikost tlačítka, změňte také line-height, aby bylo +\/- vycentrováno.<\/EM><\/SPAN><\/P>Není to velký rozdíl, docela nenápadné, ale odlišuje vaši aplikaci od ostatních. Můžete vidět demo zde<\/A>. Nebo možná chcete aktualizovat barvu tak, aby odpovídala celkovému tématu vaší aplikace. CSS můžete upravit takto.<\/P>

.esriSimpleSlider {
  border: 0 solid #57585A;
  background-color: #02a7f8;
  color: #FFF;
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

.esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
  border-bottom: 0 solid #57585A; \/\*nastavením na 0 odstraníte oddělovač*\/
}<\/PRE><\/P>Výsledek vypadá takto.<\/P> **Tip: Všimněte si, jak jsem nastavil border na 0 pro odstranění oddělovače mezi tlačítky.<\/EM><\/SPAN><\/P>Možná budete chtít něco takového udělat, pokud je vaše aplikace vložena do jiné aplikace a chcete uživatelský zážitek více plynulý. Můžete vidět 

demo zde<\/A>.<\/P>

<\/P>

Posuňte ho<\/H2>Nezapomeňte, že konstruktor mapy má také možnosti<\/A>, jak posunout slider jinam. Můžete použít sliderOrientation & sliderPosition, abyste změnili slider podle svých potřeb. Umístěte ho do levého dolního rohu nebo pravého horního a horizontálně. Vyzkoušejte si to. Můžete vidět malé demo zde<\/A>.<\/P>

Tak si pohrávejte s CSS a přidejte trochu šmrncu do méně dotčených oblastí vaší mapové aplikace. To vám může pomoci vytvořit celkové téma vaší mapy a aplikace, které ji trochu odliší od ostatních.