1.7 Hints Added
28 views
Skip to first unread message
fyrye
Jun 27, 2010, 4:07:20 AM6/27/10
to MooFloor
Hints have been added to FormCheck 1.7
Usage:
var formcheck = new FormCheck({
hints:{
enabled: true, //Enables hints
button: true, //Adds a ? button next to the field
method: true, //method to show the Tip (click, mouseover, focus)
useTips: true, //use a graphical tip instead of just the title
titles: true, //retrieves the remaining title and uses it as a
title or the name
tipOffset:{ //Left + Top|Bottom offsets
x: -45,
y: 0
},
buttonOffset: { //margin offset of hint button
x: 0,
y: 0
}
},
});
Hint tip title is decided by the titlesInsteadNames property
If titlesInsteadNames is set to true, the title is retrieved from the
elements title
otherwise it uses the element's name as a Hint tip title.
The tip is set by the elements title containing the keyword hint
If the title contains hint like so title="hint"
The Locale of the hint is loaded by the elements id
Otherwise the definition can be manually set by using
title="hint['definition']"
At this time the Locale system MUST be used to load the Hints, this
may be changed later on, but for now that is it's functionality.
Simple Example:
XHTML
<head>
<link type="text/css" href="js/formcheck/theme/blue/formcheck.css"
rel="stylesheet" media="screen" />
<link type="text/css" href="js/formcheck/theme/blue/hints.css"
rel="stylesheet" media="screen" />
<script type="text/javascript" src="js/formcheck/formcheck.js"></
script>
<script type="text/javascript">
addEvent('domready', function(){
var formcheck = new FormCheck('formular', {
hints:{
enabled: true,
button: true,
method: true,
useTips: true,
titles: true
}
});
});
</script>
</head>
<body>
<form id="formular" method="post" action="#">
<input id="myID" title="hint['thishint']" name="Email" type="text"
class="validate['email']" />
</form>
</body>
lang/en-US.json: (Example included in lang/en-US.json)
{
hints: {
"thishint" : "This is a hint that would notify you to fill this in a
certain way."
}
}
If you have any questions or suggestions please post them here.
For Demo please see
http://formcheck.torntech.com/
Usage:
var formcheck = new FormCheck({
hints:{
enabled: true, //Enables hints
button: true, //Adds a ? button next to the field
method: true, //method to show the Tip (click, mouseover, focus)
useTips: true, //use a graphical tip instead of just the title
titles: true, //retrieves the remaining title and uses it as a
title or the name
tipOffset:{ //Left + Top|Bottom offsets
x: -45,
y: 0
},
buttonOffset: { //margin offset of hint button
x: 0,
y: 0
}
},
});
Hint tip title is decided by the titlesInsteadNames property
If titlesInsteadNames is set to true, the title is retrieved from the
elements title
otherwise it uses the element's name as a Hint tip title.
The tip is set by the elements title containing the keyword hint
If the title contains hint like so title="hint"
The Locale of the hint is loaded by the elements id
Otherwise the definition can be manually set by using
title="hint['definition']"
At this time the Locale system MUST be used to load the Hints, this
may be changed later on, but for now that is it's functionality.
Simple Example:
XHTML
<head>
<link type="text/css" href="js/formcheck/theme/blue/formcheck.css"
rel="stylesheet" media="screen" />
<link type="text/css" href="js/formcheck/theme/blue/hints.css"
rel="stylesheet" media="screen" />
<script type="text/javascript" src="js/formcheck/formcheck.js"></
script>
<script type="text/javascript">
addEvent('domready', function(){
var formcheck = new FormCheck('formular', {
hints:{
enabled: true,
button: true,
method: true,
useTips: true,
titles: true
}
});
});
</script>
</head>
<body>
<form id="formular" method="post" action="#">
<input id="myID" title="hint['thishint']" name="Email" type="text"
class="validate['email']" />
</form>
</body>
lang/en-US.json: (Example included in lang/en-US.json)
{
hints: {
"thishint" : "This is a hint that would notify you to fill this in a
certain way."
}
}
If you have any questions or suggestions please post them here.
For Demo please see
http://formcheck.torntech.com/
Reply all
Reply to author
Forward
0 new messages