ПредишенСледващото

В този урок ще научите как да създадете изскачащ панел (popovers) на различни елементи на уеб страници с помощта на Twitter за първоначално зареждане.

Създаване на изскачащи панели с помощта на Twitter за първоначално зареждане

Изскачащ (изскачащи панел) - малък бар, който се намира в горната част на съдържанието на уеб страница, и се използва за показване на допълнителна информация, която се появява, когато щракнете с левия бутон на мишката върху елемента на уеб страница.

Инициализация Popovers (изскачащи панели)

Бутон с изскачащ изскачащ с бутон с изскачащ изскачащ с бутон

Задаване на посока за да се покаже изскачащ (изскачащ панел)

Можете да настроите посоката на дисплея (нагоре, надолу, наляво или надясно) на елемента на уеб страница, която го кара да се изскачащи панел (изскачащ).

Класиране Popovers чрез Data атрибути (атрибут)

За позициониране на бърз панел с помощта на програмен интерфейс за данни, като се използва атрибут за първоначално зареждане на данни разположението. което може да отнеме от следните стойности: най-добре (до), дъно (надолу), наляво (в ляво), право (вдясно).

Изскачащ (нагоре) изскачащ (надолу) изскачащ (вляво) изскачащ (вдясно)

Изскачащ (нагоре) изскачащ (вдясно) изскачащ (надолу) изскачащ (вляво)

Скриване на изскачащ лентата с инструменти (изскачащ), когато щракнете извън уеб страница елемент, който ги управлява

По подразбиране popovers не са скрити, докато не кликнете върху левия бутон на мишката върху дадена уеб страница, елемент, който го управлява, отново.

Можете да използвате данните спусък = "фокус" атрибут. която крие popovers, когато потребителят не кликне върху следващия елемент, който то работи, и извън него.

За да може тази функция да работи правилно в различни браузъри, трябва да бъдат изпълнени следните условия:

Plugin параметри Popovers

В следващата таблица са параметрите, които могат да бъдат настроени за първоначално зареждане метод изскачащ (), за да изберете сменяеми функционалност Popovers на (изскачащи лентата с инструменти).

Тип: Булева. Стойност по подразбиране: вярно. Прилага ефекта избледняване (CSS избледняване) за изскачащ (изскачаща лента с инструменти). Този параметър може да бъде зададена и с помощта на атрибута на данни анимация. Например: данни анимация = "фалшиво".

Тип: Булева. Стойност по подразбиране: невярно. Показател "HTML" е предназначена за вмъкване в изскачащ (изскачащ панел) HTML-код. Ако е фалшива, методът ще бъде използван "текст" JQuery, който ще поставите съдържанието в Object Model Документ (DOM) HTML с. Използвайте този метод, с повишено внимание, тъй като в случай на HTML, можете да показвате на сайта XSS атаки. Този параметър може да бъде зададена и с помощта на атрибута данни в HTML формат. Например: данни HTML = "истинска".

Тип: низ | функция. Стойност по подразбиране: "право". Параметърът "настаняване" се отнася за позициониране изскачащ (изскачащи панел) и взема следните стойности: най-добрите (до), долни (надолу), ляво (в ляво), право (вдясно), автоматичен. Значение автомобил, предназначен за динамично позициониране изскачащ (изскачащи панели). Например, ако даден елемент е зададен като "автомобили наляво", на изскачащ (изскачащи панел) ще бъде показан в ляво на елемента, когато това е възможно, в противен случай тя ще се появи вдясно от елемента. Този параметър може да бъде зададена и с помощта на атрибута на данни за разположение. Например данни разположение = "дъното".

Тип: низ | функция. Стойността по подразбиране е ''. Този параметър определя текст изскачащ заглавната (изскачащи лентата с инструменти). Тази опция може да бъде зададена и с помощта на заглавието атрибут. например: заглавие = "Заглавие бар".

Тип: низ | функция. Стойността по подразбиране е ''. Този параметър определя текстово съдържание изскачащ изскачащ панел. Ако не е посочена стойност или съдържанието на атрибут на данни съдържание, изскачащ на текстово съдържание (изскачащи панел) ще имат стойност по подразбиране, т.е. ''.

Тип: низ. Стойността по подразбиране е: "щрак". Вариант "спусък" определя действията, за които ще бъдат показани или скрити изскачащ (изскачащи панел): кликнете (когато е натиснат), задържане на курсора (Hover), фокус (когато позицията на фокус), ръчен (самостоятелно справка). При използване на няколко стойности на параметрите "спусъка" тях споделят една с друга чрез пространството. Този параметър може да бъде зададена и с помощта на атрибута на данни спусъка. като например: данни спусъка = "клик".

Тип: брой | обект. Стойността по подразбиране е 0. програмирате закъснението за показване и скриване на изскачащи панели (Popovers) в милисекунди. Тази опция не е приложима за стойност тригер параметър с ръчно. При задаване на стойност, закъснение и се прилага за да се покаже и да се скрият. Параметър структура: забавяне: . Този параметър може да бъде зададена и с помощта на атрибута на данни забавяне. Например: данни забавяне = "800".

Приставката методи изскачащ

По-долу са основните методи изскачащ да плъгин.

Здравейте
Може ли да се изясни един момент или да ми изпратите на приблизителната посока?

Има бутон, който показва форма. В това има бутон етикет OnClick, която управлява функция «OneClickForm». Сценарият работи, се генерира формата, но изглежда никъде. Както разбрах по-рано тази форма на «OneClickForm ()» изход чрез изскачащи панел изскачащ на, е включен в Twitter за първоначално зареждане. По-надолу сценария се сблъска с функция, която крие този панел.
Всичко, което трябва да се направи - обвивка, която показва функция OneClickForm () в изскачащ панел изскачащ на.

Данните, които се показва в изскачащ, посочен в етикет на данни съдържание. Функцията се задейства чрез OneClick маркер. Как да се съгласува това? Не намерих в документацията за това. Но аз съм сигурен, че всичко работи по този начин. Виждал съм появата на изскачащи прозорци и мога да твърдя, че точно с помощта на стандартни стилове на изскачащ панел изскачащ, която е част от Twitter за първоначално зареждане.

Здравейте Аз не разбирам описанието. Ето защо, обясни какво трябва да се направи? Т.е. има бутон, който се отваря и затваря изскачащ панел. Този панел се отнася до един бутон или някакъв друг елемент? Ако искате да комбинирате отваряне и затваряне, а след това използвайте бутона за превключване. По-добре е да се напише това, което искате да се изпълнява, а не как се прави.

Добър вечер, Александър.
Аз питам този въпрос ...
Има бутон:
и JS:
Сега основният проблем:
Как да се справим вид анимация панел време и изчезване на панела?!
Или само чрез CSS?
В предварително ви благодаря за вашия отговор.

Добър вечер, Игор.
Настройте броя секунди за анимацията, когато се появи възможност изскачащ от висш клас избледняване:
Вместо 0,15 секунди настроите желаното време.

Ако имате нужда от повече, за да се затвори, а след това най-вероятно ще бъде по-добре да го промените във файла за bootstrap.js (или bootstra.min.js). За този въпрос bootstrap.js файл отговаря Tooltip.TRANSITION_DURATION постоянно в раздел Подсказка. Ако промените стойността му това ще се отрази както на отваряне и затваряне. Ако искате да зададете друга стойност, ще бъде необходимо да се намери в този раздел .emulateTransitionEnd линии (Tooltip.TRANSITION_DURATION) и се поставя в скоби стойности за милисекунди.

Ясно. Благодаря за отговора.

И с помощта на вградената функционалност фърмуера е най-удобно да не ми кажеш?
За да е ясно, искам да кажа, когато панелът е изцяло или частично извън видимостта на страниците. Например, скрит в дясната страна на страницата или на върха и когато кликнете върху него или какво, че избута на съответния бутон и се показва в пълен размер. Има вграден фърмуера функционалност, която ще помогне за изпълнение на

Съжалявам, че не разбирам въпроса ви.

Всички функционалности Twitter за първоначално зареждане е съсредоточена в класове и плъгини, които са предназначени за решаване на най-често срещаните проблеми, пред които са изправени предприемачите. В допълнение, той също съдържа готови компоненти.

Да започнем с това маркирането си блокове. За тяхното изпълнение е необходимо HTML, фърмуера класове и и CSS стилове. Начално зареждане не отрича HTML или CSS, само за да го (с помощта на класа си), можете да го направите малко по-бързо и навсякъде обикновено показва. Т.е. Начално зареждане съдържа класове, компоненти и модули, които работят във всички браузъри и на всички възможни устройства. Какво може да се каже за единиците, че възложителят се създава, защото ги тестваме във всички браузъри и на всички устройства на една или две разработчиците е много трудно. Така че няма гаранция, че всички си сила ще се покаже нормално. Ето защо, може би има смисъл да се опита да пренапише оформлението на тези блокове с помощта на фърмуера класове.

Ситуацията с динамичен компонент на блока означава първоначално зареждане не се реши като този плъгин не е така. Тук можете да използвате JQuery.

В повечето случаи, ако искате да се приложат някои допълнителни функции, вие трябва или за готови решения изглеждат или да ги създадете сами (разбира се с класове и Twitter фърмуера плъгини).

Благодаря ви за подробния отговор. Както оформлението на блокови връзки за обувки, за да се направи, аз разбирам. Това е много по-бързо, отколкото да се наложи. Ами тогава ще свържете JQuery. Просто си помислих, че може би разработчиците трябва да имат предвид тези плъгини, тъй като те вече са доста често срещани.

Ако това не е опция, можете да търсите внедрявания в expo.getbootstrap.com/ и вече на базата на код примери да се копае в правилната посока.

Това определено трябва да бъде един бутон? може изскачащ, например, се случи, когато мишката върху изображението или, да речем, един DIV?
Хареса ми reallygood.co.il/ сайт. има блок с мнение, ние бихме искали да направим нещо подобно, с помощта на връзки за обувки, а след това просто да хванат изскачащ.

Можете да използвате popovers за всеки елемент. Създаване изскачащ направена с помощта на параметри, които са дадени в този урок.

Например, за да се инициализира popovers елементи, които имат данни за превключване = «изскачащ» атрибут.
Т.е. Като се има предвид по-горе сценарий с помощта на вас ще трябва да се инициализира всички елементи, които имат този атрибут:
Изберете елементите, които искате да се инициализира, можете да не само атрибут, и като цяло, колкото искате.

Например, за да се инициализира изскачащ за всички изображения, подредени в контейнер ИД = «коментар»

Благодарим Ви! И след това сложих avesome кръг икона с буквата I, увити в линк, подсказка.
Когато задържите подсказка е малък и че е необходимо да кликнете върху иконата за повече информация. Казаха ми, че хората не са наясно :)

Здравейте Има ли някаква възможност на вътрешните съвети в допълнение към текста, за да се свърже?

Подкрепете проекта - споделете линка, благодаря!