Bootstrap 3 - pop-up panel (popover), IT vezető

Ebben a leckében megtanuljuk, hogyan lehet létrehozni egy pop-up panel (popovers) különböző elemeit használó weboldalak Twitter Bootstrap.

Felugró panelek segítségével Twitter Bootstrap

Popover (pop-up panel) - egy kis sáv, amely tetején található a tartalmát egy web oldalt, és megjelenítésére kiegészítő információ jelenik meg, ha az egér bal gombjával a weboldal elem.

Inicializálása Popovers (pop-up panel)

Gomb Gomb popover popover a gomb popover popover gombbal

Beállítása az irányba, hogy megjelenítse Popover (pop-up panel)

Akkor az irányt a kijelző (fel, le, balra vagy jobbra) a weboldalon elem, ami azt okozza, hogy a pop-up panel (popover).

Ranglista Popovers keresztül adatattribútumok (attribútum)

Elhelyezése a gyors panel segítségével Data API használatával attribútum Bootstrap adat elhelyezését. amely a következő értékeket: top (up), alja (lefelé), balra (balra), a jobb (jobb).

Popover (emelkedő) Popover (le) Popover (balra) Popover (jobbra)

Popover (emelkedő) Popover (jobbra) Popover (le) Popover (balra)

Elrejti a pop-up eszköztár (Popover), ha rákattint kívül a weboldal elem, amely irányítja őket

Alapértelmezett popovers nincsenek elrejtve, amíg nem kattint a bal egérgombbal egy weblapon elem, amely szabályozza azt, újra.

Használhatja az adatokat reagált = „fókusz” attribútummal. amely elrejti popovers, ha a felhasználó nem kattint a következő tételt, amelyben működik, és azon túl.

Annak érdekében, hogy ezt a funkciót a megfelelő működéshez különböző böngészőkben, a következő feltételeknek kell teljesülniük:

Plugin paraméterek Popovers

Az alábbi táblázat felsorolja azokat a paramétereket, be lehet állítani bootstrap popover () beállítani a plug-in alkalmassága Popovers (pop-up eszköztár).

Típus: logikai. Alapértelmezett érték: igaz. Alkalmazza a gyengülő hatása (CSS úsztatás) a Popover (előugró eszköztár). Ez a paraméter is beállítható attribútumadatokkal-animáció. Például: adat-animáció = "false".

Típus: logikai. Alapértelmezett érték: false. Paraméter "html" célja a behelyezés Popover (pop-up panel) HTML-kódot. Ha false, a módszert fogják alkalmazni „szöveg” jQuery, amely beilleszti a tartalmát a Document Object Model (DOM) HTML. Ezzel a módszerrel óvatosan, mint abban az esetben, HTML, akkor tegye a webhely XSS támadások. Ez a paraméter is beállítható attribútumadatokkal-html. Például: adat-html = "true".

Típus: sztring | funkciót. Alapértelmezett érték: „helyes”. Paraméter "elhelyezés" kifejezés a helymeghatározás Popover (pop-up panel), és azon a következő értékeket: a felső (max), alsó (lefelé), balra (balra), jobbra (jobbra), auto. Jelentés auto szánt dinamikus elhelyezése Popover (pop-up panelek). Például, ha egy tétel van állítva a „auto balra”, a Popover (pop-up panel) jelenik meg a bal oldalon az elem, ha lehetséges, különben nem fog megjelenni a megfelelő elem. Ez a paraméter is beállítható attribútumadatokkal-elhelyezést. Például: adatok-elhelyezési = „lefelé”.

Típus: sztring | funkciót. Az alapértelmezett érték „”. Ez a paraméter határozza meg a fejléc Popover (pop-up eszköztár). Ez az opció is beállítható a cím attribútummal. például: title = "Cím bar".

Típus: sztring | funkciót. Az alapértelmezett érték „”. Ez a paraméter a szöveges tartalmat Popover felugró panel. Ha az érték vagy tartalma az attribútum adattartalom nincs megadva, a szöveges tartalmat Popover (pop-up panel) lesz az alapértelmezett érték, azaz ''.

Típus: string. Az alapértelmezett érték: „click”. Option "trigger" határozza meg azon tevékenységek Popover (pop-up panel) jelenik meg, vagy rejtett: kattintson (megnyomva), lebeg (hover), fókusz (ha az elem fókuszban), kézi (self-referencia). Ha több paraméter értékek „trigger” megoszthatja azokat egymással keresztül teret. Ez a paraméter is beállítható attribútumadatokkal-ravaszt. mint például: adatok trigger = "click".

Típus: szám | objektumot. Az alapértelmezett érték 0. Állítsa be a késleltetési idő megjelenítésére és elrejtésére a pop-up panel (Popovers) ezredmásodperc. Ez a lehetőség nem alkalmazható a ravaszt paraméter értéket utasítás. Ha megad egy értéket, a késleltetési idő és az alkalmazott megjelenítéséhez és elrejteni. Paraméter szerkezete: késleltetés: . Ez a paraméter is beállítható attribútumadatokkal késleltetés. Például: adat-delay = "800".

Plugin módszerek Popover

Az alábbiakban az alapvető módszerek Popover a plugin.

Helló
Tud tisztázni egy pont vagy küldjenek a hozzávetőleges irányt?

Van egy gomb, amely megjeleníti a formában. Ebben van egy gomb onclick tag, azaz a függvény «OneClickForm». A script működik, a forma keletkezik, de úgy tűnik, sehol. Amint megtudtam korábban ebben a formában a «OneClickForm ()» kimeneteket a pop-up panel Popover, benne van a Twitter Bootstrap. Lejjebb a forgatókönyvet ütközött egy függvény, amely elrejti a panelen.
Mindössze annyit kell tennie, hogy - pakolás, amely megjeleníti a funkció OneClickForm () a pop-up panel Popover.

Az adatok megjelennek a popover, a címkével megadva adattartalom. A függvény váltja át oneclick tag. Hogyan egyeztethető össze ez? Nem találja a dokumentációban e. De biztos vagyok benne, hogy minden így működik. Láttam a megjelenése pop-up ablakokat, és én is pontosan azt állítják, hogy a szokásos stílusok pop-up panel Popover, amely része a Twitter Bootstrap.

Helló Nem egészen értem a leírást. Ezért megmagyarázni, mi a teendő? Ie van egy gomb, amely nyitja és zárja a pop-up panel. Ez a panel utal egy gombot, vagy valamilyen más elem? Ha azt szeretnénk, hogy összekapcsolják nyitó és záró, majd a kampós. Sokkal jobb, hogy írjon, hogy mit szeretne megvalósítani, és nem így történt.

Jó estét, Alexander.
Azt fel ezt a kérdést ...
Van egy gomb:
és js:
Most a kritikus pontja az ügyet:
Hogyan kell kezelni idejű animációs panel megjelenése és eltűnése a panel?!
Vagy csak a css?
Előre köszönöm a választ.

Jó estét, Igor.
Állítsa be a másodpercek számát az animációt, amikor popover megjelenik lehetséges nyomós osztály elhalványul:
Ahelyett, 0.15 mp állítsa be a kívánt időt.

Ha több kell zárni, akkor valószínűleg jobban változtatni a bootstrap.js fájlt (vagy bootstra.min.js). Mert ebben a kérdésben bootstrap.js fájl megfelel Tooltip.TRANSITION_DURATION állandó Tooltip listájában. Ha megváltoztatja az értékét ez hatással lesz mind a nyitó és záró. Ha azt szeretnénk, hogy hozzanak egy másik érték, akkor lesz szükség, hogy ez a rész .emulateTransitionEnd vonalak (Tooltip.TRANSITION_DURATION) és állítsa zárójelben értékek ezredmásodperc.

Tiszta. Köszönöm a választ.

És segítségével a beépített bootstrap alkalmassága legkényelmesebben ne mondd?
Ahhoz, hogy tiszta, úgy értem, ha a panel teljes egészében vagy részben az oldal láthatóságát. Például elrejtve a jobb oldalán vagy a tetején, és ha rákattint, vagy mi, hogy megnyomta a megfelelő gombot, és megjelenik a teljes. Van egy beépített bootstrap funkcionalitás, ami elősegítené a

Sajnálom, hogy nem egészen értem a kérdést.

Minden Twitter Bootstrap alkalmassága koncentrálódik osztályok és plug-inek, amelyek célja, hogy megoldja a leggyakoribb problémák a fejlesztők. Ezen túlmenően, ez is tartalmaz egy kész alkatrészeket.

Először is a jelölést blokkokat. Azok végrehajtásának szükség HTML, Bootstrap osztályok is, és CSS stílusokat. Bootstrap nem teszi semmissé a HTML vagy CSS, csak azért, hogy neki (a óráit), meg tudod csinálni egy kicsit gyorsabb és mindenütt általában megjelenik. Ie Bootstrap osztályokat tartalmazza, alkatrészek és plug-inek, hogy működik minden böngészőben és minden lehetséges eszközt. Mi mondható el az egységeket, hogy a fejlesztő létrehoz magának, mert tesztelni minden böngészővel és az összes eszköz egy vagy két fejlesztő nagyon nehéz. Tehát nincs garancia arra, hogy minden erő jelenik meg rendesen. Ezért érdemes lehet megpróbálni újraírni az elrendezés ezeket a blokkokat a Bootstrap osztályok.

A helyzet a dinamikus eleme a blokk azt Bootstrap nem határoz Ez a bővítmény nem. Itt tudod használni jQuery.

A legtöbb esetben, ha azt akarjuk, hogy végre néhány további funkciók, akkor sem kell keresni a kész megoldásokat, vagy hozza létre őket (természetesen az osztályok és a Twitter Bootstrap plugins).

Köszönöm a részletes választ. Mivel az elrendezés a blokk bootstrap csinálni, értem. Ez sokkal gyorsabb, mint előírni. Hát akkor én összekapcsolja JQuery. Csak azt gondoltam, hogy a fejlesztők figyelembe kell vennie ezeket a bővítményeket, mint ők most elég gyakori.

Ha ez nem lehetséges, akkor kereshet megvalósítások expo.getbootstrap.com/ és már alapján kódpéldákat ásni a helyes irányba.

Határozottan kell egy gombot? lehet popover, például akkor, ha lebeg a kép fölé, vagy, mondjuk, egy div?
Tetszett a hely reallygood.co.il/. van egy blokk, értékelje, szeretnénk, hogy valami hasonlót, a bootstrap, majd csak fogott popover.

Használhatja a popovers bármely elem. Beállítás popover készült paramétereket, amelyeket az ebben a leckében.

Például, inicializálni popovers elemek, amelyeknek van adatok-kapcsoló = «popover» attribútum.
Ie Tekintettel a fenti forgatókönyv segítségével meg kell inicializálni mindazokat az elemeket, az attribútummal:
Válassza ki a kívánt elemeket inicializálni, akkor nem csak tulajdonítani, és általában, ahogy tetszik.

Például inicializálni Popover összes kép elrendezése egy tartályban id = «comment»

Köszönjük! Aztán tettem avesome ikon kerek ikon a levél, amit, csomagolva egy linket, kihúzva.
Amikor az egérrel tooltip kicsi és szükség van az ikonra kattintva további információkat. Azt mondták, hogy az emberek nincsenek tisztában :)

Helló Van-e lehetősége belül tippeket mellett a szöveges link?