Radiocity
-
Posts
664 -
Joined
-
Last visited
-
Days Won
8
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Radiocity
-
Если Вы обратитесь к документации, то обнаружите для себя событие onSelect, к которому вы и прикручиваете ваше диалоговое окно
-
Думаю, придется редактировать шаблон, отслеживая id страницы или меню, и жестко задавать необходимые данные.
-
Вступление В этой теме напишем простой плагин на jQuery(1.4.3+). Задача - показывать всплывающее сообщение на странице с эффектом затемнения фона. При нажатии на фон или кнопку "Закрыть", сообщение плавно пропадает. Посмотреть демонстрационную страницу Базовая верстка (index.html) Для проверки плагина потребуется простенькая страница с ссылкой, активирующей всплывающее сообщение. Будет подключена библиотека jquery-latest.js, и файл нашего плагина jmypopup.js. <!doctype html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="pl.js"></script> <style> <!-- здесь будет стилевое оформление --> </style> </head> <body> <a href="#" id="run">Показать сообщение</a> </body> </html> Пишем плагин (jmypopup.js) За основу возьмем код из урока, написанного Антоном Шевчуком: (function($) { // Обертка var defaults; var options; $.fn.mypopup = function(params){ options = $.extend({}, defaults, options, params); // Основной код return this; }; })(jQuery); // Обертка Создается обертка, которая предотвратит нежелаемые конфликты. Внутри назначаются переменные defaults (массив настроек по-умолчанию) и options (массив пользовательских настроек). Далее создается функция, которой и будет наш плагин. Назовем её mypopup. Рассмотри возможные параметры, передаваемые плагину. Во-первых, ширину (width) и высоту (height). Это позволит нам гибко управлять размерами окна для каждого из вызывающих объектов и выравнивать по центру окна браузера. В нашем примере для измерения используем числовые значения. Во-вторых, флаг background, отвечающий за фоновый эффект затемнения/осветления (зависит от предпочтений верстальщика). Стоит отметить, что данный параметр введен с целью оптимизации. В-третьих, текстовый параметр html, который содержит пользовательских html код, отображаемый во всплывающем окне. В-четвертых, текст ссылки для закрытия close. Если текста не будет, то и ссылка не создается. Опять же, подобный нюанс, ввдене с целью оптимизации. Добавим описанные переменные в код, задав значения по умолчанию: var defaults = { width:'200', height:'64', background:true, html:'', close:'Закрыть'}; Принцип работы плагина прост. Чтобы не нарушить верстку на странице, в ее конце создается код всплывающих сообщений, не отображаемых пользователю. Далее при необходимости пользователю показывается определеный блок данных. Отмечу, что фоновый слой мог быть и один. Однако, я посчитал, что это может сказаться на визуализации, в случае вызова нескольких окон одновременно. Объявим в основном коде новую переменную,отвечающую за уникальность каждого всплывающего окна. Это позволит избежать нежелательных эффектов. // Основной код // Случайное значение 1-1024 : var seed = 1 + Math.floor(Math.random()*1024); Далее в основном коде напишем условие создания фонового слоя, используя функцию .append(). Обязательно спрячем его от пользователя командой .hide(): // Фон: if (options.background){ $("body").append('<div id="plup_fade'+seed+'" class="plup_fade"></div>'); $("#plup_fade"+seed).hide(); } // end if Теперь перейдем к созданию самого сообщения. Добавление происходит аналогично. Блоку устанавливается высота и ширина, приведенные к числовому типу командой parseInt(). К сожалению, мне не пришло в голову более грамотного стилистического оформления для выравнивания сообщения по центру страницы, чем отрицательные отступы. Не стоит забывать о необходимости спрятать созданный блок от пользователя. // end if // Добавление слоя сообщения: $("body").append('<div id="plup_msg'+seed+'" class="plup_msg" style="width:'+parseInt(options.width)+ 'px; min-height:'+parseInt(options.height)+'px; height:'+parseInt(options.height)+'px; margin-top: -' +(parseInt(options.height)/2)+'px; margin-left: -' +(parseInt(options.width)/2)+'px;"><div class="plup_data"></div></div>'); // Добавление текста, если он есть: if (options.html) { $("#plup_msg"+seed+" .plup_data").html(options.html); } else { $("#plup_msg"+seed+" .plup_data").html('<h2><center>Привет</center></h2>'); } // end if..else $("#plup_msg"+seed).hide(); // Добавление ссылки "Закрыть" if(options.close){ $("#plup_msg"+seed).append('<div class="plup_close"><a href="#" title="'+options.close+'">'+options.close+'</a></div>'); } Пора научить наши сообщения всплывать при нажатии на указанный объект, а также прятать при нажатии на фон или ссылку "Закрыть". Добавим специй! Прятать и показывать сообщение будем с использованием плавного исчезновения. В этом нам поможет команды .fadeIn() и .fadeOut(). В основном коде допишем: // Нажатие на объект: $(this).click(function(){ $("#plup_fade"+seed).show(); $("#plup_msg"+seed).fadeIn('slow'); }); // нажатие на фон или сылку "Закрыть" $("#plup_msg"+seed+" .plup_close a, #plup_fade"+seed).click(function(){ $("#plup_msg"+seed).fadeOut('slow'); $("#plup_fade"+seed).delay(8000).hide(); }); Собственно, наш плагин почти готов. Осталось оформить и заставить работать. Для запуска в нашем примере допишем в конце jmypopup.js код, выполняющийся при загрузке страницы: $(document).ready(function(){ $("#run").mypopup({ background:true, close:'Закрыть', html:'<h2 class="background:">JQuery popup plugin hello</h2><p>Lorem ipsum dolor sit amet</p>'}); }); Стилистическое оформление Основной проблемой, которую необходимо решить на данном этапе - это растянуть фон-затемнение на всю ширину и высоту экрана. Реализуем задумку через абсолютное позиционирование слоя .plup_fade относительно body. Собственно, это еще одна причина, по которой html код плагина вставляется в конце под основным контентом. Для создания полупрозрачности кроссбраузерными вариантами css параметра opacity. Для капризного ie7 воспользуемся фильтром и хаком, понятным только этому браузеру. body { min-height: 100%; height:100%; margin:0; padding:0; } .plup_fade{ position: absolute; top: 0; left:0; right:0; bottom:0; background: #000; *filter: alpha(opacity=50); /*Ie7 хак*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.50; z-index:9998; } Чтобы выровнить всплывающее сообщение по центру, воспользуемся абсолютным позиционированием относительно body и отрицательными отступами, которые генерируются в плагине. .plup_msg{ position:absolute; top:50%; left:50%; background:#fff; z-index:9999; border: 1px solid #667; overflow:hidden; } Наш плагин готов. Послесловие У нас получился несложный плагин, работающий в браузерах FF4, Opera 9+, IE7+, Google Chrome, Safari 5.05+. Он далек от идеала и не покушается на таких монстров, как Lightbox2 или Colorbox. Не умеет работать с ajax или подгружать картинки, создавая сложные галереи. Зато в сжатом виде весит всего 0.1kb и не использует графики вообще. Отлично подойдет для дополнительного функционала в административных панелях. Для отображения и скрытия затемненного фона используется .show() и .hide(), однако можно воспользоваться и командой .fadeTo(). А мне все равно! Больше нравится первый вариант =) Для создания уникально числа лучше использовать значение времени и даты. При перепечатывании данного материала, просьба указывать ссылку на текущий первоисточник
-
Rss лента не поможет?
-
Не совсем уверен насчет музыки, но на jquery можно выполнить поставленную визуальную задачу. Даже с точками в начале возможно
-
Да, проблема с body и градиентами имеется. Однако, в Вашем случае она решается довольно легко, так как используемая методика верстки позволяет задать градиент для i_wrapper. http://jsfiddle.net/Radiocity/MRWBT/53/
-
А почему не прикрутите jquery галерею? В интернете много красивых решений.
-
1) Зарегистрируйте почтовый ящик у проверенного провайдера (лучше у нескольких), указав свою настоящие ФИО. 2) Соберите исходный файл дизайна, сверстанный макет и текстовый файл с лицензионным соглашением на использование вышеописанных данных. 3) Отправьте на созданные почтовые ящики В дальнейшем можно будет доказать правообладание на созданные материалы. С рукописями поступают примерно также, посылая их себе заказным письмом.
-
Проблема связана с тем, что opacity объекта применяется ко всем дочерним элементам, включая текст. RGBa не будет работать в ie7 и ie8, поэтому следует создать 2 отдельных элемента, позиционируя их друг над другом или же задать полупрозрачное фоновое png изображение PS Окей! Шестого осла списали, но седьмого и восьмого рано.
-
Время хранения кэша можно выставить? Возможно через некоторое время он сбрасывается и при обращении генерируется медленными неоптимизированными скриптами.
-
Отправляйте собранный запрос средствами javascript или сделайте скрытое поле <input type="hidden" value="667"/>
-
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> Это должно помочь. FF до 4 версии не понимает html5 объекты и интерпритирует их как inline элементы. Думаю, можно посылать для всех браузеров без ограничения. На скорости это не сильно скажется.
-
Забрал в примеры сайтов (закладки) для будущего изучения. PS ПсиВокер, а ты специально сделал такой доступ?
-
Не могли бы Вы уточнить, что в вашем понимание значит работоспособность? Как объективно рассчитать нагрузку на сервер?
-
http://jsfiddle.net/Radiocity/HT34v/ Все работает, если вставить корректный путь к фоновому изображению в одинарные кавычки. Есть ли у элемента .vse высота?
-
Тег правильно закройте. w3c валидатор не ругается =\
-
Bugreport: Если 2 раза быстро нажать на страницы (ссылки в подвале), то все уезжает за пределы экрана. Browser: Google Chrome
-
Для работы с Joomla нужно особое кунг-фу. В плане чистки и допила, конечно же. По большей части из-за расширенной функциональности. В общем, Joomla - каторга для фрилансера. Выбирайте Flexo CMS
-
Как можно открыть нужную папку сайта в проводнике Windows?
Radiocity replied to borus's question in HTML Coding
1) В адресной строке проводника введите ftp://yoursite.com/ 2) В появившемся окне введите логин/пароль. Но я бы посоветовал воспользоваться другими средствами. Например, CoffeeCup FTP. -
Я не уверен, что это необходимо делать именно процессору. Шейдеры можно применять всякие, и прочие плюшки DirectX да OpenGL http://www.gamedev.ru/articles/?id=30038 Если у кого то есть проблемы с отображением рассматриваемой функции, попробуйте включить WebGL: Усиановить webgl.enabled_for_all_sites=true в about:config
-
Вообще не факт. Видеокарта постоянно что-то строит, натягивает текстуры, размывки, тени, короче занимается работой. Видеокарта не строит DOM и никогда этим заниматься не будет. А отображать примитивные полигоны может оказаться менее затратно по ресурсам, чем перерисовать весь интерфейс Вин7. А процессор? Для построения 3д сцены производится 100500 умножений в режиме реального времени. Хорошо еще нет тени... Политика заманивания мотыльков на свет настораживает
-
Конкурс должен содержать простое необычное и интересное задание. Вспомните те же Сады Семирамиды. Потенциальный конкурс по Joomla/WP попахивает выполнением работы за другого человека (ака хостера). Именно этот факт может оттолкнуть форумчан в данном случае.
-
Работать бесплатно? Ну уж нет )))
-
Максимум ссылки на порно из закладок .Не знаю, лично меня такие новости радуют...тем более я не думаю, что это заключительная версия Ff, да и как писал, и самого инспектора =) Представьте, что ноутбук работает от аккумулятора. Построение 3д сцены съест больше энергии, чем обычный рендер дерева. Соответственно, время работы на ноутбуке сокращается. Но самый главный недостаток - FF тормозит.
