Icontem

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:
Date: 4 years ago
Size: 4,980 bytes
 

Contents

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='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>
        &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>