Développeur Web RoR

Aller au contenu | Aller au menu | Aller à la recherche

Tag - jquery

Fil des billets

mardi 26 février 2013

jQuery Highlight : Mettez vos résutats de recherche en évidence !

Il existe un plugin jQuery pour mettre en évidence une chaîne de caractères dans un paragraphe.

Voici le résultat :

Attention ce code est particulièrement compliqué :-) :

$("#id-mon-element").highlight("soleil");

id-mon-element étant l'id du conteneur dans lequel le texte "soleil" pourra être mis en évidence. Si vous souhaitez le faire sur toute la page :

$("body").highlight("soleil");

Source et téléchargement : http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

mardi 11 décembre 2012

3 solutions gratuites de génération de graphiques coté client qui valent le coup !

Voici 3 solutions open-sources pour faire des graphiques coté client.

Morris.js (BSD): Basé sur D3.js 

GRaphaeljs (MIT) : Basé sur Raphaeljs

Elycharts (MIT) : Basé sur Raphaeljs

Ces solutions existent depuis un petit moment déjà et vous les connaissez sûrement. Ce post fait office de post-it pour moi :-)

jeudi 2 août 2012

Livequery : le plugin jQuery qui permet de faire fonctionner des plugins comme avec live()

Il arrive souvent dans son code javascript d'utiliser des plugins jquery qui s'utilisent de cette manière :

$('.ma_classe').monPlugin();

L'inconvénient c'est qu'avec certains plugins qui n'utilisent pas "live" ou bien "delegate" ou "on" de la 'mauvaise manière' <- sous entendez qui ne fonctionne pas avec des éléments que l'on rajoute au DOM. (Voir http://api.jquery.com/live/), nous sommes obligé de rajouter le script après l'ajout ou la requête ajax.

C'est là qu'intervient le plugin livequery (lien en bas) : voici comment transformer le script ci-dessus :

$('.ma_classe').livequery(function(){

  $(this).monPlugin();

});

L'avantage ici c'est que si l'on rajoute des éléments avec la class ma_classe en AJAX ou bien simplement en javascript, il n'y aura plus besoin de rappeller le bout de code $('.ma_classe').monPlugin(); . L'avantage de cette méthode c'est que l'on a pas besoin de lire le source du plugin pour voir quels évènement sont concernés car avec "on" et "live" le paramètre event(s) est obligatoire !

Alors pratique non ?

Le plugin livequery : https://github.com/brandonaaron/livequery

Source : http://stackoverflow.com/questions/5766086/using-jquery-plugins-with-live

lundi 23 janvier 2012

Les ressources / articles web dev de ces derniers jours

Voici les quelques ressources que j'ai trouvé intéressante ces derniers jours (ça fait office de post-it en ce qui me concerne).

Framework html / css / js : http://www.99lime.com/

jQuery highlighter de code (marche avec Ruby !) : http://steamdev.com/snippet/

Utilisation de VIM : tutorial découverte par Synbioz : http://www.synbioz.com/blog/2012/01/18/l_utilisation_de_vim

Impress.js (Sur la ferme du web) : http://www.lafermeduweb.net/billet/impress-js-creez-des-presentations-de-type-prezi-en-javascript-1273.html

User interface Futurico (attention payant, mais peut être une bonne source d'inspi !) : http://www.behance.net/gallery/Futurico-User-Interface-Pro/2650227

Autre user interface : http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/

Inspiration de design web : http://www.queness.com/community-news/10453/30-beautiful-web-design-examples-from-behance-and-deviantart

En espérant que cette petite compilation vous servira...

jeudi 3 novembre 2011

jQuery et Raphaeljs2 : petite guerre de couple sur les objets draggable

Pour un petit projet (enfin plus un proof of concept qu'un projet pour le moment), je souhaitai faire du drag sur des éléments raphael (librairie svg) (rect svg) et également sur le div conteneur. Il se trouve que lorsque je saisissai le rect svg, le mouvement de mon drag'n drop était démultiplié. J'ai alors pensé à la fonction jquery stopPropagation() sur l'event pour ne pas le transmettre au parent. Sans succès ! J'ai alors lu la doc (ouai il serait presque temps) de jQueryUI et il y a moyen d'annuler des éléments en tant que handle pour le drag'n drop (http://jqueryui.com/demos/draggable/#handle). Et effectivement ça marche bien. Voici le code jQueryUI : 

$(document).ready(function(){

  $('#holder').draggable({ cancel:'#holder svg rect'});

});

Et l'espèce de code html

<div id="holder">

  <svg ....><rect .... ></rect></svg>

</div>

mardi 27 septembre 2011

Préparer MarkItup pour rails 3.1

Bon voilà dans l'attente d'un gros article, en voici un plus petit qui explique comment préparer markitup pour rails 3. Je pars du principe que vous êtes dans votre projet rails.

Téléchargez markitup. Copiez le répertoire "markitup" de l'archive dans stylesheets et également dans javascripts. (De cette manière il n'y aura plus qu'à remplacer le répertoire pour une mise à jour de markitup)

Dans la vue ou le layout :

<%= stylesheet_link_tag "markitup/skins/markitup/style.css",

    "markitup/sets/default/style.css" %>

<%= javascript_include_tag "markitup/jquery.markitup.js",

        "markitup/sets/default/set.js"; "initialize_markitup.js" %>

Et dans le fichier "initialize_markitup.js" :

$(function(){

    $('.monmarkitup').markItUp(mySettings);

});

Mettez ensuite dans votre code html un div avec pour classe "monmarkitup" et ça devrait marcher.
N'oubliez pas d'include également jQuery si ce n'est déjà fait. 

Pour ActiveAdmin - La procédure est la même pour les autres éditeurs WYSIWYG

Grosse parenthèse pour include markitup dans active_admin, il faut ajouter dans initializers/active_admin.rb :

config.register_javascript 'markitup/jquery.markitup.pack.js'

config.register_javascript 'markitup/sets/default/set.js'

config.register_javascript 'initialize_markitup.js'

config.register_stylesheet 'markitup/skins/markitup/style.css'

config.register_stylesheet 'markitup/sets/default/style.css'

# Attention le fichier ci-dessous est à créer :

config.register_stylesheet 'reset_markitup.css'

Le reset_markitup.css permet de pas tout péter dans l'interface :

.formtastic div:first-of-type{

  display:inline-block;

}

Et dans votre fichier app/admin/model.rb section form do, il faut ajouter ceci au champ concerné.

input_html => { :class => "monmarkitup" } 

Exemple :

form.input :title, :input_html => { :class => "monmarkitup" }

Coté serveur, il existe quelques gems pour convertir votre code en html :

BBCODE : bb-ruby

TEXTILE : RedCloth

MARKDOWN : BlueCloth

Bon code !

vendredi 16 septembre 2011

Un plugin jquery pour faire un background animé - MyFloatingBg

MyFloatingBg est un plugin jquery qui permet de faire bougé son background. Cela peut-être pratique et si c'est bien travaillé ça peut-être très joli. Bon mais faut pas en abusé hein !

Bon et puis c'est sous licence MIT !

Demo : http://www.kfsoft.info/MyFloatingBg/demo.php

Téléchargement : http://www.kfsoft.info/MyFloatingBg/jquery.MyFloatingBg.js

- page 1 de 5