a52c2a8462
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
255 lines
8.1 KiB
HTML
255 lines
8.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Input Limiter Demo</title>
|
|
<link rel="stylesheet" type="text/css" href="jquery.inputlimiter.1.0.css" />
|
|
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
|
|
<script type="text/javascript" src="jquery.inputlimiter.1.3.1.min.js"></script>
|
|
<style type="text/css">
|
|
body {
|
|
font-family: verdana;
|
|
}
|
|
#limitingtext {
|
|
color: #333;
|
|
font-size: 90%;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// Change default to count new lines as two characters
|
|
$.fn.inputlimiter.defaults.lineReturnCount = 2;
|
|
|
|
// Default
|
|
$('textarea').inputlimiter();
|
|
|
|
// Limit by Words
|
|
$('#textarea3').inputlimiter({
|
|
limit: 10,
|
|
limitBy: 'words',
|
|
remText: 'You only have %n word%s remaining...',
|
|
limitText: 'Field limited to %n word%s.'
|
|
});
|
|
|
|
// Make it more personal
|
|
$('#text1').inputlimiter({
|
|
limit: 50,
|
|
remText: 'You only have %n character%s remaining...',
|
|
remFullText: 'Stop typing! You\'re not allowed any more characters!',
|
|
limitText: 'You\'re allowed to input %n character%s into this field.'
|
|
|
|
});
|
|
|
|
// The limiter will display the text in Spanish
|
|
$('#text2').inputlimiter({
|
|
limit: 50,
|
|
remText: '%n caractere%s restantes.',
|
|
limitText: 'Campo limitado a %n caractere%s.'
|
|
});
|
|
|
|
// The limiter will display the text in French
|
|
$('#text2_1').inputlimiter({
|
|
limit: 50,
|
|
remText: '%n caractère%s restants.',
|
|
limitText: 'Champ limité à %n caractère%s.',
|
|
zeroPlural: false
|
|
});
|
|
|
|
// This input will display the limiter info in the existing span tag
|
|
$('#text3').inputlimiter({
|
|
limit: 30,
|
|
boxId: 'limitingtext',
|
|
boxAttach: false
|
|
});
|
|
|
|
$('#text4').inputlimiter({
|
|
limit: 40,
|
|
remTextFilter: function (opts, charsRemaining) {
|
|
var charsTyped = opts.limit - charsRemaining;
|
|
return "You have typed " + charsTyped + " character" + ( charsTyped == 1?'':'s' ) + ".<br />" +
|
|
"You have " + charsRemaining + " character" + ( charsRemaining == 1?'':'s' ) + " remaining.";
|
|
},
|
|
limitTextFilter: function (opts) {
|
|
return "This field is limited to " + opts.limit + " character" + ( opts.limit == 1?'':'s' ) + ".";
|
|
}
|
|
});
|
|
|
|
|
|
// When your remaining characters drops below 13 the lyrics from The Twelve Days of Christmas will be displayed.
|
|
$('#text5').inputlimiter({
|
|
limit: 12,
|
|
remTextFilter: function (opts, charsRemaining) {
|
|
var remText = "The Twelve Days of Christmas";
|
|
if ( charsRemaining == 12 ) {
|
|
remText = "Twelve drummers druming.";
|
|
} else if ( charsRemaining == 11 ) {
|
|
remText = "Eleven pipers piping.";
|
|
} else if ( charsRemaining == 10 ) {
|
|
remText = "Ten lords a' leaping.";
|
|
} else if ( charsRemaining == 9 ) {
|
|
remText = "Nine ladies dancing.";
|
|
} else if ( charsRemaining == 8 ) {
|
|
remText = "Eight maids a' milking.";
|
|
} else if ( charsRemaining == 7 ) {
|
|
remText = "Seven swans a' swimming.";
|
|
} else if ( charsRemaining == 6 ) {
|
|
remText = "Six geese a' laying.";
|
|
} else if ( charsRemaining == 5 ) {
|
|
remText = "Five gold rings.";
|
|
} else if ( charsRemaining == 4 ) {
|
|
remText = "Four calling birds.";
|
|
} else if ( charsRemaining == 3 ) {
|
|
remText = "Three french hens.";
|
|
} else if ( charsRemaining == 2 ) {
|
|
remText = "Two turtle doves.";
|
|
} else if ( charsRemaining == 1 ) {
|
|
remText = "A partridge in a pear tree.";
|
|
}
|
|
return remText;
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1><a href="http://rustyjeans.com/jquery-plugins/input-limiter/">jQuery Plugin: Input Limiter</a></h1>
|
|
<form>
|
|
<fieldset>
|
|
<legend>Default Textareas</legend>
|
|
<label>This textarea will show the limiter info on two lines<br />
|
|
<textarea rows="3" cols="30" id="textarea1"></textarea></label><br />
|
|
|
|
<label>Since this text area is wider it will show the limiter info on one line<br />
|
|
<textarea rows="5" cols="40" id="textarea2"></textarea></label><br />
|
|
|
|
<strong>Code:</strong><br />
|
|
<pre>$('textarea').inputlimiter();</pre>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Limit by Words</legend>
|
|
<label>This textarea only allows ten words<br />
|
|
<textarea rows="3" cols="30" id="textarea3"></textarea></label><br />
|
|
|
|
<strong>Code:</strong><br />
|
|
<pre>$('#textarea3').inputlimiter({
|
|
limit: 10,
|
|
limitBy: 'words',
|
|
remText: 'You only have %n word%s remaining...',
|
|
limitText: 'Field limited to %n word%s.'
|
|
});</pre>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Custom limiter text</legend>
|
|
<label>Make it more personal<br />
|
|
<input type="text" id="text1" size="50" /></label><br />
|
|
|
|
<strong>Code:</strong><br />
|
|
<pre>$('#text1').inputlimiter({
|
|
limit: 50,
|
|
remText: 'You only have %n character%s remaining...',
|
|
remFullText: 'Stop typing! You\'re not allowed any more characters!',
|
|
limitText: 'You\'re allowed to input %n character%s into this field.'
|
|
});</pre>
|
|
|
|
<label>The limiter will display the text in Spanish<br />
|
|
<input type="text" id="text2" size="50" /></label><br />
|
|
|
|
<strong>Code:</strong><br />
|
|
<pre>$('#text2').inputlimiter({
|
|
limit: 50,
|
|
remText: '%n caractere%s restantes.',
|
|
limitText: 'Campo limitado a %n caractere%s.'
|
|
});</pre>
|
|
|
|
<label>The limiter will display the text in French<br />
|
|
<input type="text" id="text2_1" size="50" /></label><br />
|
|
|
|
<strong>Code:</strong><br />
|
|
<pre>$('#text2_1').inputlimiter({
|
|
limit: 50,
|
|
remText: '%n caractère%s restants.',
|
|
limitText: 'Champ limité à %n caractère%s.',
|
|
zeroPlural: false
|
|
});</pre>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Alternate Box ID</legend>
|
|
<label>This input will display the limiter info in the existing span tag<br />
|
|
<input type="text" id="text3" size="30" /> <span id="limitingtext">Field limited to 30 characters.</span></label><br />
|
|
|
|
<strong>Code:</strong><br />
|
|
<pre>$('#text3').inputlimiter({
|
|
limit: 30,
|
|
boxId: 'limitingtext',
|
|
boxAttach: false
|
|
});</pre>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Custom Text Filters</legend>
|
|
<label>The remText and limitText have custom filters<br />
|
|
<input type="text" id="text4" size="40" /></label><br />
|
|
<strong>Code:</strong><br />
|
|
<pre>$('#text4').inputlimiter({
|
|
limit: 40,
|
|
remTextFilter: function (opts, charsRemaining) {
|
|
var charsTyped = opts.limit - charsRemaining;
|
|
return "You have typed " + charsTyped + " character" + ( charsTyped == 1?'':'s' ) + ".<br />" +
|
|
"You have " + charsRemaining + " character" + ( charsRemaining == 1?'':'s' ) + " remaining.";
|
|
},
|
|
limitTextFilter: function (opts) {
|
|
return "This field is limited to " + opts.limit + " character" + ( opts.limit == 1?'':'s' ) + ".";
|
|
}
|
|
});</pre>
|
|
<label>When your remaining characters drops below 13 the lyrics from The Twelve Days of Christmas will be displayed.<br />
|
|
<input type="text" id="text5" size="30" /></label><br />
|
|
|
|
<strong>Code:</strong><br />
|
|
<pre>$('#text5').inputlimiter({
|
|
limit: 12,
|
|
remTextFilter: function (opts, charsRemaining) {
|
|
var remText = "The Twelve Days of Christmas";
|
|
if ( charsRemaining == 12 ) {
|
|
remText = "Twelve drummers druming.";
|
|
} else if ( charsRemaining == 11 ) {
|
|
remText = "Eleven pipers piping.";
|
|
} else if ( charsRemaining == 10 ) {
|
|
remText = "Ten lords a' leaping.";
|
|
} else if ( charsRemaining == 9 ) {
|
|
remText = "Nine ladies dancing.";
|
|
} else if ( charsRemaining == 8 ) {
|
|
remText = "Eight maids a' milking.";
|
|
} else if ( charsRemaining == 7 ) {
|
|
remText = "Seven swans a' swimming.";
|
|
} else if ( charsRemaining == 6 ) {
|
|
remText = "Six geese a' laying.";
|
|
} else if ( charsRemaining == 5 ) {
|
|
remText = "Five gold rings.";
|
|
} else if ( charsRemaining == 4 ) {
|
|
remText = "Four calling birds.";
|
|
} else if ( charsRemaining == 3 ) {
|
|
remText = "Three french hens.";
|
|
} else if ( charsRemaining == 2 ) {
|
|
remText = "Two turtle doves.";
|
|
} else if ( charsRemaining == 1 ) {
|
|
remText = "A partridge in a pear tree.";
|
|
}
|
|
return remText;
|
|
}
|
|
});</pre>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</body>
|
|
</html>
|