Le bloc-notes professionnel d'un développeur front-end senior
|
1 2 3 4 5 |
function closeNavByClickingAnywhere(){ $('.js-nkd-tabs').find('[data-state="open"]').each(function(){ $(this).attr('data-state','closed'); }); } |
|
1 2 3 4 5 |
$(document).on('click', closeNavByClickingAnywhere); $('.js-nkd-tabs').on('click', function(e){ e.stopPropagation(); return false; }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<style type="text/css" media="all"> @import url("http://localhost/drupal7/modules/system/system.base.css?om2t1l"); @import url("http://localhost/drupal7/modules/system/system.menus.css?om2t1l"); @import url("http://localhost/drupal7/modules/system/system.messages.css?om2t1l"); @import url("http://localhost/drupal7/modules/system/system.theme.css?om2t1l"); </style> <style type="text/css" media="all"> @import url("http://localhost/drupal7/misc/ui/jquery.ui.core.css?om2t1l"); @import url("http://localhost/drupal7/misc/ui/jquery.ui.theme.css?om2t1l"); @import url("http://localhost/drupal7/modules/overlay/overlay-parent.css?om2t1l"); @import url("http://localhost/drupal7/modules/contextual/contextual.css?om2t1l"); </style> <style type="text/css" media="all"> @import url("http://localhost/drupal7/modules/comment/comment.css?om2t1l"); @import url("http://localhost/drupal7/modules/field/theme/field.css?om2t1l"); @import url("http://localhost/drupal7/modules/node/node.css?om2t1l"); @import url("http://localhost/drupal7/modules/search/search.css?om2t1l"); @import url("http://localhost/drupal7/modules/user/user.css?om2t1l"); </style> <style type="text/css" media="all"> @import url("http://localhost/drupal7/modules/shortcut/shortcut.css?om2t1l"); @import url("http://localhost/drupal7/modules/toolbar/toolbar.css?om2t1l"); </style> <style type="text/css" media="all"> @import url("http://localhost/drupal7/sites/all/themes/ninesixtyrobots/css/reset.css?om2t1l"); @import url("http://localhost/drupal7/sites/all/themes/ninesixtyrobots/css/960.css?om2t1l"); @import url("http://localhost/drupal7/sites/all/themes/ninesixtyrobots/css/main.css?om2t1l"); </style> |
Source: Extending an existing jQuery function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(function($) { // maintain a reference to the existing function var oldcss = $.fn.css; // ...before overwriting the jQuery extension point $.fn.css = function() { // original behavior - use function.apply to preserve context var ret = oldcss.apply(this, arguments); // stuff I will be extending // that doesn't affect/change // the way .css() works // preserve return value (probably the jQuery object...) return ret; }; })(jQuery); |
Source: Coderbits – Extending jQuery with onShow and onHide events.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!-- Include latest jquery first! --> <script> //Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function (function ($) { //Extend show() so that it trigger our event when called var show = $.fn.show; $.fn.show = function () { var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above $(this).trigger("onShow"); //Trigger our new onShow event return ret; //Return object so that it can propagate }; //Extend hide() var hide = $.fn.hide; $.fn.hide = function () { var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above $(this).trigger("onHide"); //Trigger our new onShow event return ret; //Return object so that it can propagate }; //Define new event functions $.fn.onShow = function (callback) { if (callback != null) { $(this).on("onShow", function () { callback(); //Trigger callback }); } else { $(this).trigger("onShow"); //If no callback exist we trigger the event } return this; }; $.fn.onHide = function (callback) { if (callback != null) { $(this).on("onHide", function () { callback(); //Trigger callback }); } else { $(this).trigger("onHide"); //If no callback exist we trigger the event } return this; }; })(jQuery); //All the above code could be saved in an external .js file which is much easier to include //Testing time! $(function () { //DOM ready //Define what happens if our element is shown $("#testingElement").onShow(function () { alert("Hello!"); }); //Define what happens if our element is hidden $("#testingElement").onHide(function () { alert("Goodbye!"); }); //Button event $("button").click(function () { $("#testingElement").toggle(); }); }); </script> <p id="testingElement" style="display:none;">Showing</p> <button>Show</button> |
Source: Codepen.io – Reset button style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* Base */ @mixin button-reset() { // -webkit-box-sizing: content-box; // -moz-box-sizing: content-box; // box-sizing: content-box; background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; &::-moz-focus-inner, &::-moz-focus-inner { border: 0; padding: 0; } } /* Make `a` like a button */ @mixin a-button-reset() { color: inherit; cursor: default; display: inline-block; text-align: center; text-decoration: none; white-space: pre; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } |
| Nom | Modules couverts | Technos | Activité sur Github |
|---|---|---|---|
| Webcomm – magento-boilerplate | Modules couverts … |
|
|
| Maven E-Commerce – mbootstrap | Modules couverts … |
|
|
| zeljkoprsa/waterlee-boilerplate | … |
|
|
Grosse gruge, mais bon …
|
1 2 3 4 5 6 |
;(function ($, window, undefined){ $(document).ready(function(){ $('.toolbar').find('.view-mode').children('.grid').html('<i class="icon-gpv_grid" />'); $('.toolbar').find('.view-mode').children('.list').html('<i class="icon-gpv_list" />'); }); }(jQuery, window)); |
|
1 |
<?php echo Mage::getModel('cms/block')->load('footer-links-company')->getTitle() ?> |
…où footer-links-company est l’identifiant du bloc.
IMPORTANT: l’icône ne pivotera que si la propriété CSS display: inline-block; lui est appliquée!
IMPORTANT #2: appliquer la transformation sur la classe de l’élément ciblé et pas sur la pseudo-classe :before utilisée par les polices d’icônes.
|
1 2 3 4 5 6 7 8 9 10 |
@mixin rotate($degrees) { display: inline-block; -webkit-transform: rotate($degrees); //-moz-transform: rotate($degrees); -ms-transform: rotate($degrees); //-o-transform: rotate($degrees); transform: rotate($degrees); //-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})"; //filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)}); } |
|
1 2 3 |
.rotate { @include rotate(90deg); } |
Dans mon exemple, je souhaite ajouter sur la page d’accueil de mon site une zone entre le Header et le Main pour y glisser un slider donc le code se trouve dans app/design/frontend/package/theme/template/page/html/home_slider.phtml.
Dans le fichier app/design/frontend/package/theme/template/layout/page.xml repérer le gabarit de page dans lequel vous souhaitez ajouter une zone:
|
1 2 3 4 5 |
<default translate="label" module="page"> <label>All Pages</label> <block type="page/html" name="root" output="toHtml" template="page/2columns-left.phtml"> </block> </default> |
…et ajoutez-y ceci pour créer l’emplacement home_slider_area:
|
1 2 3 |
<block type="core/text_list" name="home_slider_area" as="home_slider_area" translate="label"> <label>Home Slider Area</label> </block> |
Note pour moi-même: ici, je crée une zone (soit-disant) dans le gabarit 2columns-left.phtml, mais j’édite plus tard le gabarit 1column.phtml et ça fonctionne quand-même…
Dans le fichier app\design\frontend\package\theme\layout\local.xml, ajouter ceci:
|
1 2 3 4 5 6 |
<cms_index_index translate="label"> <label>CMS Home Page</label> <reference name="home_slider_area"> <block type="core/template" name="home_slider" template="page/html/home_slider.phtml" /> </reference> </cms_index_index> |
Dans app\design\frontend\package\theme\template\page\1column.phtml ajouter la ligne suivante:
|
1 |
<?php echo $this->getChildHtml('home_slider_area') ?> |