Ищу выдвигающееся окно с контролем потока данных
Здравствуйте уважаемые форумчане, подскажите пожалуйста, ищу jquery выдвигающееся окно с контролем потока данных.
Суть работы окна Вставляем в окно какой-то информер, например погода или курс валют и т.д. данные информера должны загружаться только после открытия окна, и прекращаться после его закрытия, надеюсь вы меня понимаете... Где такое можно найти?? Заранее большое спасибо! |
animate() - все что собственно вам нужно, если учесть что информеры вставленные обращаются к сторонним ресурсам.
|
Модельное окно: http://arcticlab.ru/arcticmodal/
Если я правельно Вас понял:
$('#exampleModal4').arcticmodal({
beforeOpen: function(data, el) {
alert('beforeOpen');
},
afterOpen: function(data, el) {
alert('afterOpen');
},
beforeClose: function(data, el) {
alert('beforeClose');
},
afterClose: function(data, el) {
alert('afterClose');
}
});
В вашем случае нужно:
$('.btn_exemple').click(function(){
$('#example_box').arcticmodal({ // запустили модальное окно
afterOpen: function(data, el) { // когда загрузилось
alert('показали информер');
},
afterClose: function(data, el) { // когда закрыли
alert('убрали информер');
}
});
});
|
Infinity178, Спасибо, я о модальном окне и не подумал, это наверное будет лучший вариант, можно вас еще попросить, собрать это в кучу?? А то поверьте, это слишком сложно для меня, буду вам очень благодарен!
laimas, Вам так же спасибо за ответ! |
dmax34, а от куда информеры поступают?
т.е. как они должны подгружаться? Это html блок, сторонний сервис, ajax запрос - или что то иное? |
Infinity178, а зачем для такой простой задачи arcticmodal подцеплять? )
|
laimas, а смысл придумывать велосипед и расписывать анимации (show/hide)?
Тут вопрос стоит в том - как будут подружатся информеры? Нужны ли после их подгрузки какие либо действия? + В окне должны же быть данные? Значит с ними что то нужно делать? А значит снова накладываются действия. Поэтому, имхо - лучше сделать с запасом наперед, чем расписывать каждое действие в функцию. Не отрицаю, если нужно: клик - смотрю - закрою тут проще загрузить данные а дальше измываться на уровне css + см. первое сообщение: данные информера должны загружаться только после открытия окна, и прекращаться после его закрытия, |
Ну да, а ради еще одной плюшки опять вместо велосипеда мотоцикл? Места в гараже не хватит. )
|
Профессор! Что вы докапываетесь до бедного студента:?)
Я по своему опыту советую. 1. Человек указал задачу 2. В наше время можно и на машине покататься))) и пешком походить - выбор должен быть 3. Я вообще на Ajax залип!) не мучай меня)) |
P.P.S. В конце концов это не КГ библиотеки, 5 строк CSS и 10кb JS - что тут объемного?
|
Да нет, я не докапываюсь, беседуйте, я к тому, чтобы это не стало привычкой. ;)
|
Что именно?
|
Искать в сети и подключать плагины по каждому поводу )
|
а)) полностью поддерживаю. но если человек не заинтересован в развитии знаний, то лучше и не вникать :)
А если нужно не решение а метод то https://api.jquery.com/ :victory: |
А почему вы решили, что он не заинтересован в развитии знаний?
|
Прошу прощения, если кого затронул. Но я не имел ввиду конкретно автора, а просто подчеркнул положительную сторону Google и плагинов.
|
Ребята, не ссорьтесь, как говорил Эйнштейн, все мы гении, но если судить о интеллекте рыбы, по ее умению лазить по деревья, то она всю жизнь проживет считая себя идиоткой...
Вот пример информера
<!-- TradingView Widget BEGIN -->
<div id="tv-miniwidget-986f7"></div>
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.MiniWidget({
"container_id": "tv-miniwidget-986f7",
"tabs": [
"Equities",
"Commodities",
"Bonds",
"Forex"
],
"symbols": {
"Equities": [
[
"S&P500",
"SPX500"
],
[
"NQ100",
"NAS100"
],
[
"Dow30",
"DOWI"
],
[
"Nikkei225",
"JPN225"
],
[
"Apple",
"AAPL "
],
[
"Google",
"GOOG"
]
],
"Commodities": [
[
"Emini",
"ES1!"
],
[
"Euro",
"E61!"
],
[
"Gold",
"GC1!"
],
[
"Oil",
"CL1!"
],
[
"Gas",
"NG1!"
],
[
"Corn",
"ZC1!"
]
],
"Bonds": [
[
"US 2YR",
"TUZ2015"
],
[
"US 10YR",
"TYZ2015"
],
[
"US 30YR",
"US1!"
],
[
"Euro Bund",
"FX:BUND"
],
[
"Euro BTP",
"EUREX:II1!"
],
[
"Euro BOBL",
"EUREX:HR1!"
]
],
"Forex": [
"FX:EURUSD",
"FX:GBPUSD",
"FX:USDJPY",
"FX:USDCHF",
"FX:AUDUSD",
"FX:USDCAD"
]
},
"gridLineColor": "#E9E9EA",
"fontColor": "#83888D",
"underLineColor": "#dbeffb",
"trendLineColor": "#4bafe9",
"activeTickerBackgroundColor": "#EDF0F3",
"large_chart_url": "https://www.tradingview.com/e/",
"noGraph": false,
"width": 300,
"height": 400
});
</script>
<!-- TradingView Widget END -->
|
можно так (ДЕМО):
http://learn.javascript.ru/play/Xrh8j |
Infinity178, спасибо, работает) то что и надо было)
|
Всем привет!
Ребята, помогите, демо с 18 поста с рабочим примером пропало, и в итоге я нашел другое модальное окно, но в нем такой функции нет, как загрузка информера после открытия и остановка поступления данных после закрытия... Помогите сделать это уже в новом модальном окне, я его уже установил в нескольких местах на сайте, и только этой функции не хватает... Вот само окно:
$(document).ready(function() { // вся магия после загрузки страницы
$('a#go').click( function(event){ // ловим клик по ссылки с id="go"
event.preventDefault(); // выключаем стандартную роль элемента
$('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
function(){ // после выполнения предъидущей анимации
$('#modal_form')
.css('display', 'block') // убираем у модального окна display: none;
.animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
});
});
/* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
$('#modal_close, #overlay').click( function(){ // ловим клик по крестику или подложке
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200, // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
function(){ // после анимации
$(this).css('display', 'none'); // делаем ему display: none;
$('#overlay').fadeOut(400); // скрываем подложку
}
);
});
});
<p><a href="#" id="go">Ссылка с окном</a></p> <div id="modal_form"> <span id="modal_close">X</span> тут информер которому нужно загружаться только после открытия... </div> <div id="overlay"></div> Заранее большое спасибо! |
В DIV #modal_form укажите DIV в который должен загружаться тот или иной контент, назавем его .main_box.
В JS уже на вкус и цвет можно по разному залить данный контент.. Т.е. когда в JS завершается загрузка окна - запускаем загрузку в main_box контет и вызываем функцию JS для информера. |
Уважаемый Infinity178, извините, но вы смотрите на js код и видите смысл, а я смотрю и вижу буквы( я даже не понял о чем вы написали, я с трудом html понимаю...
Можете пожалуйста как-то по проще объяснить?? Заранее спасибо |
Ребята, простите, прошу помощи, у меня ничего не получается, модальное окно просто не запускается после моих манипуляций(
|
| Часовой пояс GMT +3, время: 00:16. |