- 0
-
Similar Content
-
By smike
Понимаю что во времена Angular, React и прочих фреймоврков может быть не очень актуально, но все же решил опубликовать свою простенькую библиотеку для огранизации плагинов старого доброго jQuery. Библиотека решает следующие задачи:
Организация кода плагина в виде псевдо-класса Наследование плагинов Передача параметров в плагин Подключение плагинов к странице Ajax-перзагрузка плагинов Подписка на события Если кому интересно, прошу сюда: https://bitbucket.org/grifix/envo
Примеры использования тут: https://bitbucket.org/grifix/envo/sr...les/?at=master
Пример плагина:
(function ($) { var parent = envo.Plugin; // Плагин от которого наследуется данный плагин var prototype = envo.makePluginPrototype( 'demo.PluginA', // Название псевдо-класса плагина (используется при наследовнии) 'demo_pluginA', // Имя плагина (используется для подключиня плагина к DOM-элементам) parent, { message: 'Hello world!' //Конфигурация плагина по умолчанию } ); // Функция которая подключается к плагину в момент наложения его на DOM елемент prototype.init = function () { var that = this; that.elButton = that.find('button'); that.elButton.click(function () { that.showMessage(); }); parent.prototype.init.call(that); }; // Метод псевдо-класса плагина prototype.showMessage = function () { var that = this; alert(that.cfg.message); return that.el(); }; })(jQuery); Плагин кототрый наследует предыдущий плагин:
(function ($) { var parent = demo.PluginA; var prototype = envo.makePluginPrototype( 'demo.PluginB', 'demo_pluginB', parent ); prototype.showMessage = function () { var that = this; parent.prototype.showMessage.call(that); confirm("Are you sure!"); return that.el(); }; })(jQuery);
-
By Mixail.09
Здравствуйте.
Помогите пожалуйста разобраться новичку с данным вопросом. Подскажите где искать информацию на данную тему.
Суть проблемы в следующем:
начал делать двухуровневое выпадающее меню и оказалось все не так просто). Допустим есть многоуровневый список вложенный в <div class="memu">, смотрел видео и читал про создание таких меню и не могу понять как можно описать стиль отдельно для вложенных списков. В общем для меня конструкции вида:" .menu ul li {} .menu li ul {} .menu li ul ul {}" реально танцы с бубном не говоря уже о menu ul li:hover>ul и т.д.
Не могу понять принципа как описывать свойство вложенного списка да еще и плюс ко всему там по разному описываются и li b ul.
-
By axmakarov
Всем привет!
Есть вот такой небольшой лэндинг, поднял на бутстраповском шаблоне отсюда.
Не могу никак разобраться с наследованием стилей у блока <div class="clock flip-clock-wrapper" style="margin:5em;>, в котором находится таймер.
Конкретно интересует какое свойство и у кого наследует этот блок, из-за которого съезжает выравнивание по центру.
Хочу разобраться, но в CSS не очень хорошо разбираюсь, подскажите куда смотреть
-
By EaGames
Ребят помогите разобраться, почему так происходит и как избежать наследование ширины элементом ul.dropdown-menu от его родителя li.dropmenu.
http://jsfiddle.net/AqaL2/
-
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Да, подходит. Спасибо.
-
Question
morohon
Здравствуйте. Есть проблемы с наследованием. Не могу понять, что работает не так. Подскажите пожалуйста, если не затруднит.
код представлен здесь: http://www.morohon.pusku.com/panel/ (там размеры изображения скачут)
css
body .main { width:100%; height:100%; } .main div.rotator{ float:left; max-width: 60%; max-height: 80%; } div.rotator ul{ position: relative; list-style: none; padding: 0px; max-width: inherit; max-height: inherit; } div.rotator ul li { position: absolute; margin: 0 auto; list-style: none; max-width: inherit; max-width: inherit; } div.rotator ul li img { max-width: inherit; max-width: inherit; } div.rotator ul li.show { max-width: inherit; max-height: inherit; z-index:500; } div.rotator ul li.show img { max-width: inherit; max-height: inherit; } .main div.right { float:right; max-width: 40%; max-height:80%; } div.right .logo img { max-width: 35%; max-height: 30%; margin: 0 auto; } div.right .clock{ max-width:35%; max-height:auto; margin: 0 auto; } .main div.marquee { width: 100%; max-height: 20%; } .main div.marquee .marq { position: absolute; bottom: 0; right: 0; left: 0; } .main div.marquee .marq .text { color: blue; font-size:95px; }html
<body> <?php $count=count(glob($path.'/*.jpg')); ?> <div class="main"> <div class="rotator"> <ul> <li class="show"><img src="<?php echo $path.'/1'.$type; ?>"/></li> <?php for ($i=2;$i<=$count;$i++){?> <li><img src="<?php echo $path.'/'.$i.$type; ?>"/></li> <?php }?> </ul> </div> <div class="right"> <div class="logo"> <img src="<?php echo 'config_images/'.$row['logo']; ?>" class="main"> </div> <div class="clock"> <?php include "clock/index.html"; ?> </div> </div> <div class="marquee"> <marquee direction="left" loop="-1" behavior="scroll" scrolldelay="1" scrollamount="10" class="marq"> <span class="text"><?php echo $row['marquee'];?></span> </marquee> </div> </div></body>Link to comment
Share on other sites
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.