Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Реализация всплывающих подсказок с выводом контента в dle

Реализация всплывающих подсказок с выводом контента в dle


     01.10.2012    Общие вопросы по вёрстке    4758

вопрос
Здравствуйте! Сейчас на многих сайтах можно увидеть всплывающие подсказки в которых выводится картинка и описание новости. Вот и мне захотелось такое реализовать на своем сайте. Проанализировав исходный код пару сайтов где стоят такие подсказки, я понял что за это отвечает плагин BetterTip для jQuery. Ну я сразу же погуглил и нашел его с нормальным описанием вот здесь. Как мне стало понятно скрипт подгружает специально созданную html страницу и выводит ее в подсказке.
Реализация всплывающих подсказок с выводом контента в dle

Я хочу подключить данный плагин к блоку "популярные новости".
Вопрос заключается в том, как вывести в подсказку tpl страницу с поддержкой тегa {image-x} и доп. полей. ?
Смотрел как сделано на других сайтах но так и не понял как они это реализовали. Подскажите пожалуйста как можно сие чудо сотворить.

Ответа пока нет


Комментарии пользователей (22)

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 1 октября 2012 21:02 - Админ

Не обязательно это делать через тот плагин, тут например это реализовано на bootstrap popover (<< рабочий пример)

Каков вопрос - таков и ответ. Просто помните об этом.

Prowockator
58 | 48

Prowockator - 2 октября 2012 17:31 - Юзер

Спасибо плагин я нашел, но нифига не пойму как его подключить там документация вся на енглише. Может быть Вы мне подскажете как им правильно пользоваться ??

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 2 октября 2012 17:35 - Админ

Ну так там же пример есть, скопируйте исх код. и скачайте кастомизированный bootstrap.js (там галочками можно отмечать нужные плагины) - вам нужно tooltip и popover

Каков вопрос - таков и ответ. Просто помните об этом.

Prowockator
58 | 48

Prowockator - 2 октября 2012 22:15 - Юзер

Скачал я архив в нем файл bootstrap.js и bootstrap.css. Подключил к шаблону оба файла. А теперь не могу ето все собрать до кучи. Помогите написать правильную html разметку и как активировать сам плагин.
Я прописал это:
<script type="text/javascript">
       $(function(){
           $('#element').popover('show')
        });
    </script>

и это:
<a href="#" id="element" rel="popover"data-content="тра-ля-ля">hover over me</a>

и ничерта не произошло ) просто я маловато в этом понимаю.

Prowockator
58 | 48

Prowockator - 3 октября 2012 14:12 - Юзер

ПафНутиЙ,
Ну так поможете или нет ?

Mr. Hyde
5

181 | 183

Mr. Hyde - 3 октября 2012 14:58 - Юзер

<a href="/" rel="popover" data-placement="top" title="text" data-content="text">Dle Code</a>

Prowockator
58 | 48

Prowockator - 3 октября 2012 15:57 - Юзер

Ну так у меня тоже самое кроме data-placement="top" Что ето?

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 3 октября 2012 17:06 - Админ

адрес сайта в студию.

Каков вопрос - таков и ответ. Просто помните об этом.

Prowockator
58 | 48

Prowockator - 3 октября 2012 17:52 - Юзер

ПафНутиЙ, я этот плагин пока только на денвер устанавливал.

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 3 октября 2012 20:00 - Админ

ну тогда я бессилен.

Каков вопрос - таков и ответ. Просто помните об этом.

Prowockator
58 | 48

Prowockator - 4 октября 2012 12:47 - Юзер

ПафНутиЙ, С выводом подсказки разобрался: data-original-title - это заголовок подсказки, а data-content - это сама подсказка. Но мне нужно чтобы эта подсказка подгружалась во время когда на ссылку наводят курсор, а не сразу со всей страницей. Вот в вашем коде на этой странице непонятно от куда она берется:
<div id='comm-id-7608'>Не обязательно это делать через тот плагин, тут например это реализовано на <cite class="wtf">bootstrap popover</cite> (&lt;&lt; рабочий пример)</div>                
            </div>

Как Вы это реализовали ??

nowheremany
192

1659 | 1292

nowheremany - 4 октября 2012 13:26 - Эксперт

Трудно почитать документацию?
http://twitter.github.com/bootstrap/javascript.html#popovers

Благодарность принимаю тут Связь

Prowockator
58 | 48

Prowockator - 4 октября 2012 13:35 - Юзер

nowheremany, 404 - There isn't a GitHub Page hosted here, sorry.

nowheremany
192

1659 | 1292

nowheremany - 4 октября 2012 14:08 - Эксперт

конечно скопировать ссылку сложновато в url

Благодарность принимаю тут Связь

Prowockator
58 | 48

Prowockator - 4 октября 2012 14:37 - Юзер

nowheremany, Нет не сложно, но там это не описано !!!!!

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 4 октября 2012 14:05 - Админ

Яваскриптом. Текст, ссылка и картинка вставляются через js-обработчик

Каков вопрос - таков и ответ. Просто помните об этом.

Prowockator
58 | 48

Prowockator - 4 октября 2012 14:41 - Юзер

ПафНутиЙ, Ясно, это для меня сложно. Прийдется отказаться от данной затеи.((

kovalenko3331
3

129 | 88

kovalenko3331 - 3 октября 2012 18:56 - Юзер

ПафНутиЙ, прикольный плагин, думал себе тоже кстати прикрутить BetterTip, но твой тоже понравился, надо посмотреть что за зверь. Спасибо.

monach
46 | 13

monach - 2 декабря 2012 14:46 - Юзер

Ето самое простое что можна было бы написать самому

evanstone
3

17 | 1

evanstone - 11 января 2014 12:04 - Юзер

боже, учите русский язык...

Prowockator
58 | 48

Prowockator - 11 января 2014 12:10 - Юзер

О сенсей как же мы тебя долго ждали ))))

nambo1
4

107 | 23

nambo1 - 11 января 2014 12:28 - Юзер

evanstone,
Скорее учить нужно английский, на нем больше документация

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы