<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='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rokkitt' 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="https://github.com/afshinpersian/text-to-slug">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>
<script src="src/jquery.min.js"></script>
<br/>
<script src="src/text2slug.js"></script>
</code>
</pre>
</div>
<div class="demo">
<h3>Demo #1 - Easy Start!</h3>
<form action="send.php">
<input type="text" name="slug_tmp" id="slug_tmp">
<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">
<input type="text" name="slug_tmp2" id="slug_tmp2">
<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">
<input type="text" name="slug_tmp3" id="slug_tmp3">
<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">
<input type="text" name="slug_tmp4" id="slug_tmp4">
<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>
|
Download
