0byt3m1n1
Path:
/
home
/
mgatv524
/
lot.mgaplay.com.br
/
vendor
/
emojione
/
emojione
/
demos
/
[
Home
]
File: live-preview.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Live Preview Box - 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/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> <!-- Breadcrum 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="#">Live Preview Box</a> </div> </nav> <!-- Page: --> <main> <div class="container"> <h1>Live Preview Box</h1> <p>Start typing shortnames (:smile:, :blush:, :heart:, etc.) or entering native emojis from a compatible device.</p> <div class="clearfix"> <div class="column-1-2 input"> <h3>Input:</h3> <input type="text" id="inputText" name="inputText" style="width: 100%" value=""/> </div> <div class="column-1-2 output"> <h3>Output:</h3> <p id="outputText"></p> <script type="text/javascript"> $(document).ready(function() { $("#inputText").on('keyup change input',function(e) { var source = $('#inputText').val(); var preview = emojione.toImage(source); $('#outputText').html(preview); }); }); </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() { $("#inputText").on('keyup change input',function(e) { var source = $('#inputText').val(); var preview = emojione.toImage(source); $('#outputText').html(preview); }); }); </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>