%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/tjamichg/cursos.tjamich.gob.mx/vendor/emojione/emojione/demos/
Upload File :
Create Path :
Current File : /home/tjamichg/cursos.tjamich.gob.mx/vendor/emojione/emojione/demos/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.1/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>
  </div>
</header>

<!-- Breadcrum Navigation -->
<nav class="breadcrumbs">
  <div class="container">
    <a class="breadcrumb-item top-level" href="index.html">All Demos</a> &rsaquo;
    <a href="index.html#extras">Extras</a> &rsaquo;
    <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">
&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $("#inputText").on('keyup change input',function(e) {
      var source = $('#inputText').val();
      var preview = emojione.toImage(source);
      $('#outputText').html(preview);
    });
  });
&lt;/script&gt;
        </pre>

  </div>

</main>

<footer class="demo-footer">
  <div class="container">
    <small>&copy; Copyright 2014 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>

Zerion Mini Shell 1.0