Leaderboard
Popular Content
Showing content with the highest reputation on 11/01/2012 in Posts
-
Можно с помощью псевдоэлементов и бордеров http://jsfiddle.net/z27hP/1 point
-
Как сделать горизонтальное меню с наклоном?1 point
-
Вот примерно так: http://jsfiddle.net/9VnRz/1 point
-
Вступление В этой теме напишем простой плагин на 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(). А мне все равно! Больше нравится первый вариант =) Для создания уникально числа лучше использовать значение времени и даты. При перепечатывании данного материала, просьба указывать ссылку на текущий первоисточник1 point
-
Вы о чем?)) а если один придурок напишет так, то что мне делать? это же вольные каменты без модерации... или же сделать проверку на пшп?-1 points
-
Здравствуйте, помогите пожалуйста с контентом, высылаю картинку чтобы наглядно было видно. На картинке я выделила синим цветом что именно мне нужно, мне нужно сделать фон резиновым за пределами контента. http://storage9.static.itmages.ru/i/12/1101/h_1351769051_3929856_4090deba33.jpeg-1 points
This leaderboard is set to Kiev/GMT+02:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-