0byt3m1n1
Path:
/
home
/
mgatv524
/
public_html
/
edurocha
/
vendor
/
emojione
/
emojione
/
demos
/
[
Home
]
File: class-convert.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Conversion HTML Class - Emoji One Labs</title> <!-- Emoji One CSS: --> <link rel="stylesheet" href="./../assets/css/emojione.min.css" type="text/css" media="all" /> <!-- jQuery: --> <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script> <!-- Demos Stylesheet: --> <link rel="stylesheet" href="styles/demos.css"/> <!-- Typekit: --> <script type="text/javascript" src="//use.typekit.net/ivu8ilu.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <!-- Syntax Highlighting --> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushPhp.js"></script> <script type="text/javascript">SyntaxHighlighter.all();</script> <link rel="stylesheet" href="styles/shCoreRDark.css"/> <!-- Emoji One JS --> <script src="./../lib/js/emojione.js"></script> <script type="text/javascript"> // ################################################# // # Optional // default is PNG but you may also use SVG emojione.imageType = 'svg'; // default is ignore ASCII smileys like :) but you can easily turn them on emojione.ascii = true; // if you want to host the images somewhere else // you can easily change the default paths emojione.imagePathPNG = './../assets/png/'; emojione.imagePathSVG = './../assets/svg/'; // ################################################# </script> </head> <body> <!-- Masthead --> <header class="masthead"> <div class="container"> <h1 class="masthead-title">Emoji One Labs</h1><span class="version">version <span>1.5.1</span></span> </div> </header> <!-- Breadcrumb Navigation --> <nav class="breadcrumbs"> <div class="container"> <a class="breadcrumb-item top-level" href="index.html">All Demos</a> › <a href="index.html#extras">Extras</a> › <a class="breadcrumb-item active" href="class-convert.html">Conversion HTML Class</a> </div> </nav> <!-- Page: --> <main> <div class="container"> <h1>Conversion HTML Class</h1> <p>Using jQuery, this demo shows you how you can stick a class of <em>.convert-emoji</em> on any HTML element and automatically convert native unicode emoji and/or shortnames to images after page load.</p> <div class="clearfix"> <div class="input"> <h3>Input:</h3> <pre class="brush: xhtml"> <p class"convert-emoji"> Welcome to this Emoji One :snail: demo! 😄 I hope you like what we've put together here for you. :thumbsup: :smile: </p> </pre> </div> <div class="output"> <h3>Output:</h3> <p class="convert-emoji"> Welcome to this Emoji One :snail: demo! 😄 I hope you like what we've put together here for you. :thumbsup: :smile: </p> <script type="text/javascript"> $(document).ready(function() { $(".convert-emoji").each(function() { var original = $(this).html(); // use .shortnameToImage if only converting shortnames (for slightly better performance) var converted = emojione.toImage(original); $(this).html(converted); }); }); </script> </div> </div> <h3>Required extras</h3> <p> To get this example working correctly we needed to include a few extra pieces, including: </p> <ul> <li><a href="http://jquery.com/">jQuery</a></li> <li>Custom JS (see below)</li> </ul> <h3>jQuery Snippet:</h3> <pre class="brush: js"> <script type="text/javascript"> $(document).ready(function() { $(".convert-emoji").each(function() { var original = $(this).html(); // use .shortnameToImage if only converting shortnames (for slightly better performance) var converted = emojione.toImage(original); $(this).html(converted); }); }); </script> </pre> </div> </main> <footer class="demo-footer"> <div class="container"> <small>© Copyright 2014-2015 Ranks.com.</small> <small>Emoji One artwork is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/legalcode">CC-BY-SA-4.0</a> License</small> <small>Emoji One demos, documentation, scripts, stylesheets and all other non-artwork is licensed under the <a href="http://opensource.org/licenses/MIT">MIT</a> License</small> </div> </footer> </body> </html>