File: examples/index.html

Recommend this page to a friend!
  Classes of afshin akhgar   jQuery Create Slug from Text   examples/index.html   Download  
File: examples/index.html
Role: Example script
Content type: text/plain
Description: Example
Class: jQuery Create Slug from Text
Change a text string to make slug to use in URL
Author: By
Last change: miniying js:
fix non english charachters
change name project
Date: 2 years ago
Size: 4,980 bytes


Class file image Download
<html> <head> <title>Text to Slug (text2slug)</title> <meta name="description" content="text-to-slug,jquery plugin for making slugable input in a form"> <meta name="keywords" content="text-to-slug,text 2 slug,slug,slugable,sluggable,slugger,sluggify,slugify,search,url,url friendly"> <meta name="author" content="Afshin AKhgar "> <script src="../src/jquery.min.js"></script> <script src="../src/text2slug.min.js"></script> <!-- Web Fonts Google --> <link href='' rel='stylesheet' type='text/css'> <link href='' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="../src/styles.css"> <script> /*Easy Start!*/ $(function(){ $('#slug_tmp').text2slug(); }); /*Change Input Name*/ $(function(){ $('#slug_tmp2').text2slug({input_name:'slug2'}); }); /*Change Color*/ $(function(){ $('#slug_tmp3').text2slug({slug_color:'#DD094C'}); }); /*change Separator*/ $(function(){ $('#slug_tmp4').text2slug({separator:'#'}); }); </script> <style> .ribbon { background-color: #a00; overflow: hidden; white-space: nowrap; /* top left corner */ position: absolute; left: -50px; top: 40px; /* 45 deg ccw rotation */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* shadow */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; } .ribbon a { border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 5px #444; } div.hint{ font-size: 21px; font-family: Rokkitt; } </style> </head> <body> <div class="ribbon"> <a href="">Fork me on GitHub</a> </div> <div class="wrapper"> <header class="manaSlug__header"> <h1 class="manaSlug__header-title">Text to Slug</h1> </header> <div class="desc"> <b>Text to Slug</b> is a neat and small jquery plugin for making slugable input in a form </div> <br> <br> <div class="desc"> <h2>Get Start</h2> <br> <div> Requires : JQuery <br> </div> <div> Add jquery and Text to slug js to document </div> <pre class="demo"> <code> &lt;script src="src/jquery.min.js"&gt;&lt;/script&gt; <br/> &lt;script src="src/text2slug.js"&gt;&lt;/script&gt; </code> </pre> </div> <div class="demo"> <h3>Demo #1 - Easy Start!</h3> <form action="send.php"> &lt;input type="text" name="slug_tmp" id="slug_tmp"&gt; <input type="text" name="slug_tmp" id="slug_tmp"> </form> <pre> <code> $(function(){ $('#slug_tmp').text2slug(); }); </code> </pre> </div> <!--Demo 2--> <div class="demo"> <h3>Demo #2 - Change hidden input name</h3> <form action="send.php"> &lt;input type="text" name="slug_tmp2" id="slug_tmp2"&gt; <input type="text" name="slug_tmp2" id="slug_tmp2"> </form> <pre> <code> $(function(){ $('#slug_tmp2').text2slug({input_name:'slug2'}); }); </code> </pre> </div> <!--End Demo--> <!--Demo 2--> <div class="demo"> <h3>Demo #3 - Change Input Color</h3> <form action="send.php"> &lt;input type="text" name="slug_tmp3" id="slug_tmp3"&gt; <input type="text" name="slug_tmp3" id="slug_tmp3"> </form> <pre> <code> $(function(){ $('#slug_tmp3').text2slug({slug_color:'#DD094C'}); }); </code> </pre> </div> <!--End Demo--> <!--Demo 2--> <div class="demo"> <h3>Demo #3 - Change Separator</h3> <div class="hint">text to Slug Plugin uses hyphen (dash) as separator in output . You can Change It Now !</div> <div class="hint">For Example separate charachters with "#" instead of "-" </div> <form action="send.php"> &lt;input type="text" name="slug_tmp4" id="slug_tmp4"&gt; <input type="text" name="slug_tmp4" id="slug_tmp4"> </form> <pre> <code> $(function(){ $('#slug_tmp4').text2slug({separator:'#'}); }); </code> </pre> </div> <!--End Demo--> </div> </body> </html>