Développeur Web RoR

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

Tag - javascript

Fil des billets

jeudi 6 juin 2013

Des alternatives à Aloha Editor

En cherchant, je suis tombé sur deux alternatives à Aloha Editor, vous savez cet éditeur html5 qui fait du "content editing".

EtchJs : sous licence MIT, http://etchjs.com

HalloJs : sous licence MIT, http://hallojs.org/

Essayez-les je pense qu'ils valent le coup !

CreateJs (http://createjs.org) permet d'intégrer plus facilement ces éditeurs avec des CMS.

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 :-)

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...

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

jeudi 17 février 2011

jNotify : plugin jquery pour l'affichage de message de notification

J'ai trouvé ce plugin vraiment clean donc j'en fait profiter !

Il permet d'avoir des messages box d'avertissement, succès ou d'erreur qui disparaissent au bout d'un délai personnalisable (overlay ou non).

Voici un page de démo : http://www.myjqueryplugins.com/jNotify/demo

Téléchargement : http://www.myjqueryplugins.com/jNotify

Source : http://js4design.com/jnotify-affichez-une-boite-de-notification-animee-1137

- page 1 de 4