Core Docs | Additional Modules Docs
@Description: Creates a click to edit text block
@File: forms/editable.js
@Param: Object
type string input or textarea
editableElement object/string The element to edit #myDiv, $('#myDiv')
className string the classname for the widget, defaults to
attributes object additional html attributes you want assigned to the textfield, cols, rows, size, maxlength, etc
onBeforeEdit function Fires before editing begins, Can be used to load raw text wihtout HTML from server
onSave function Fires after save, send back to server, stop editing
@Example://use the following in a dblclick event for the text you want to make editable
var editor = sb.forms.editable.field({
editableElement : e.target,
type : 'textarea',
onBeforeEdit : function(){},
onSave : function(value){}
});
editor.edit();
//example CSS
.sb_forms_editable textarea{
cursor:text;
display:block;
width:97%;
height:100px;
overflow:auto;
font-family:tahoma;
font-size:1.1em;
}
.sb_forms_editable editbar.input{
margin-left:5px;
}
.sb_forms_editable editbar.textarea{
display:block;
text-align:right;
}
.sb_forms_editable button{
background-color:#d88713;
color:#7c4e0d;
}
.sb_forms_editable button:hover{
background-color:#e2b370;
}
@Description: Adds a button to the editBar
@File: forms/editable.js
@Example:editor.addButton('email');
@Description: Put the editor in edit mode
@File: forms/editable.js
@Example:editor.edit(target);
@Description: Focuses on text area and puts cursor at top left. automatically fires after setValue
@File: forms/editable.js
@Example:editor.focus();
@Description: Determines if field is edited or not
@File: forms/editable.js
@Example:if(editor.isNotEdited()){}
@Description: Fires before editing begins. Can be used to load raw data with ajax
to fill the textField with. Reference the textField with this.textField. The default is
to use the innerHTML of the area being edited
@File: forms/editable.js
@Example:editor.onBeforeEdit = function(){
this.setValue('loading...');
var editor = this;
var aj = new sb.ajax({
url : '/url/rawtext',
data : {
doc_id : doc_id
},
onResponse : function(raw_desc){
editor.setValue(raw_desc);
}
}).fetch();
};
@Description: Fires when a button is pressed other than save or cancel
@File: forms/editable.js
@Example:editor.onButtonPress = function(e){
var button = e.target;
};
@Description: Fires after a button is pressed other than save or cancel
@File: forms/editable.js
@Example:editor.onButtonUp = function(e){
var button = e.target;
};
@Description: Fires when a button is pressed other than save or cancel
@File: forms/editable.js
@Example:editor.onEditStop = function(){
};
@Description: Fires when a key is pressed, lets you do something with it
@File: forms/editable.js
@Example:editor.onKeyDown = function(e){};
@Description: Fires when a key is released, lets you do something with it
@File: forms/editable.js
@Example:editor.onKeyDown = function(e){
//get rid of digits
e.target.value = e.target.value.replace(/\d/, '');
};
@Description: Fires when user exceeds textField maxlength if set.
@File: forms/editable.js
@Example:editor.onMaxLength = function(e){};
@Description: Sets the html of the element being edited, use in onSave after saving
@File: forms/editable.js
@Example:editor.setHTML('<p>text that was edited</p>');
@Description: Sets the value of the textField, use in onBeforeEdit after loading raw text from ajax
@File: forms/editable.js
@Example:editor.setValue('text to edit');
@Description: Fires when the input is validated and it is invalid
@File: forms/inputValidator.js
@Param: input The input that is valid
@Example:validator.onInValid = function(input){
input.style.backgroundColor = 'red';
};
@Description: Fires when the input is validated and it is invalid
@File: forms/inputValidator.js
@Param: input The input that is valid
@Example:validator.onKeyDown = function(e){};
@Description: Fires when the input is validated and it is invalid
@File: forms/inputValidator.js
@Param: input The input that is valid
@Example:validator.onKeyUp = function(e){};
@Description: Fires when the input is validated and it is valid
@File: forms/inputValidator.js
@Param: input The input that is valid
@Example:validator.onValid = function(input){
input.style.backgroundColor = 'lime';
};
@Description: Validate a specific input
@File: forms/inputValidator.js
@Param: input The input that is valid
@Example:validator.validateInput('#myInput');
@Description: Used to validate all named elements contained within a specific
element that have a validate property and name attribute
@File: forms/inputValidator.js
@Param: el The parent element container
@Example:var valid = validator.validateNamedChildrenWithin('#myDiv');
@Description: Used to manipuate textarea elements on HTML forms
@File: forms/textarea.js
@Description: Add tags before and after the selection in a text area
@File: forms/textarea.js
@Param: String field The id or a reference to the textarea or text input. Can be an obj reference or a string such as '#myField'.
@Param: String beginTag The tag to be added to the beginning of the user text selection
@Param: String endtag The tag to be added to the end of the user text selection
@Example:sb.forms.textarea.addTags('#myField', '[b]', '[/b]');
//would change the text field by putting the begin and end tags around wha the user selected e.g. surebert toolkit rocks. If toolkit was selected and this method was run, it would turn into surebert [b]toolkit[/b] rocks.
@Description: Allows the user to use tabs in a textarea
from http://www.junasoftware.com/blog/handling-tabs-in-textareas-across-browsers.aspx
needs to be edited to use rest of toolkit
@File: forms/textarea/allowTabs.js
@Param: String textarea The id or a reference to the textarea which you want to allow tabs on.
@Example:$('#myTextArea').events({
keydown : sb.forms.textarea.allowTabs
});
@Description: inserts a string into a textarea at the caret location
@File: forms/textarea.js
@Param: String field The id or a reference to the textarea or text input. Can be an obj reference or a string such as '#myField'.
@Param: String txt The new string to insert
@Example:sb.forms.textarea.insertAtCaret('#myTextArea', 'newString');
//inserts the text in the textarea at the caret
@Description: moves the caret (cursor location) within a textarea
@File: forms/textarea.js
@Param: String field The id or a reference to the textarea or text input. Can be an obj reference or a string such as '#myField'.
@Param: Number pos The character position to move the mouse to, rememeber it starts at 0.
@Example:sb.forms.textarea.moveCaret('#myTextArea', 6);
//moves the caret to character position 6
@Description: replaces a selection with another text string
@File: forms/textarea.js
@Param: String field The id or a reference to the textarea or text input. Can be an obj reference or a string such as '#myField'.
@Param: String txt The new string which will replace the current selection
@Example:sb.forms.textarea.replaceSelection('#myTextArea', 'newString');
//replaces the current selection with the string 'newString' and moves the caret to the end of the newString string
@Description: Forces a selection of a certain substring in a text area
@File: forms/textarea.js
@Param: String field The id or a reference to the textarea or text input. Can be an obj reference or a string such as '#myField'.
@Param: String start The start character position of the selection, character position starts at 0.
@Param: String end The end position of the selection.
@Example:sb.forms.textarea.setSelection('#myTextArea', 0, 5);
//forces characters 0-5 to be selected in the form field specified
@Description: Used to validate inputs
@File: forms/inputValidator.js
@Param: Object
validateOnKeyUp boolean should validations occurr on keyup
validator regex or function with input as argument, these are executed or matched when the input is validated
onValid(input) function Fires when the input is validate if it is valid
onInValid(input) function Fires when the input is not validate
@Example:var eg1 = new sb.validation({
validator : /^\d\.\d{2}$/,
errorMessage : 'Sorry this does not match an acct number e.g. 4.32'
});
var eg2 = new sb.validation({
validator : function(input){
return input.value != 'ff';
},
errorMessage : 'Sorry the value is not ff'
});
@Description: Passes the value of the textField for you to save back with ajax
@File: forms/editable.js
@Description: returns the value of a radio button based on the name of the inpiut
@File: forms/getNamedElementValue.js
@Version: 1.0 06-03-09 06-03-09
@Param: String name The name of the radio element
@Return: String The value of the radio button
@Example:var val = sb.forms.getNamedElementValue("search_form");
@Description: Serializes a form input types including text, textarea, select, select-multiple, radio, checkbox
@File: forms/serialize.js
@Param: String form The name of the form to serialize
@Return: String The serialized form dat e.g.first_name=paul&day=monday
@Example:<form method="post" action="index.php">
<input type="text" name="first_name" value="paul" />
<input type="text" name="last_name" value="visco" />
</form>
var data = sb.forms.serialize("#myForm");
//data = first_name=paul&last_name=visco
@Description: Returns the text selection in a textarea or text input
@File: forms/textarea.js
@Param: String field The id or a reference to the textarea or text input. Can be an obj reference or a string such as '#myField'.
@Return: Object An object with selection data properties as follows
begin - the character position of the beginning of the selection
end - the character position of the end of the selection
caret - the character position of the caret
before - a string representing all text before the selection
selected - a string representing all text in the selection
after - a string represenitng all text after the selection
@Example:<textarea id="myTextArea">surebert toolkit rocks</textarea>
$('#myTextArea').evt('mouseup', function(e){
var sel = sb.forms.textarea.getSelection(this);
});
//if the string toolkit was selected by the user with the mouse and then they let go of the mouse button sel would be defined as this in the event handler above
sel = {
begin : 9,
end : 16,
caret : 9,
before : 'surebert ',
selected : 'toolkit',
after : ' rocks'
}
@Description: Allows tagging of selected text in textareas with custom tags and properties
@File: forms/textarea/textBling.js
@Param: element editBar A reference to a DOM element that hold the buttons which add the tags
Param: element editBox A reference to a textarea that the editing is occurring in
@Example:var myBling = new sb.forms.textarea.textBling('#editBar', '#editBox');
customTags = ["q, e.g. [q]here is some quoted text[/q] - adds quote bubble around text", "box, e.g.[box]text in a box[/box] - great for code chunks"];
myBling.custom(customTags);
myBling.basic();
@Description: Validates inputs based on validate attribute
@File: forms/inputValidator.js
@Param: Object
validateOnKeyUp boolean should validations occurr on keyup
validations object of regex or function properties, these are executed or matched when the input is validated
onValid(input) function Fires when the input is validate if it is valid
onInValid(input) function Fires when the input is not validate
@Example:var validator = new sb.forms.inputValidator({
validations : {
acct : new sb.validation({
validator : /^\d\.\d{2}$/,
errorMessage : 'Sorry this does not match an acct number e.g. 4.32'
}),
phone : new sb.validation({
validator :/^\d{3}-\d{3}-\d{4}$/,
errorMessage : 'Sorry this does not match a phone number e.g. 716-877-9999'
}),
email : new sb.validation({
validator : /\b(^(\S+