Skip to content

Instantly share code, notes, and snippets.

@donabrams

donabrams/gist:1189524

Created September 2, 2011 19:02
Show Gist options
  • Save donabrams/1189524 to your computer and use it in GitHub Desktop.
Save donabrams/1189524 to your computer and use it in GitHub Desktop.
Download ZIP
FormField Mockup
Raw
gistfile1.html
<html>
<head>
<style type="text/css">
.readonlyField .label {
display: inline;
text-align: left;
font-size: 12pt;
font-weight: bold;
}
.readonlyField .label:after {
content: ":";
}
.readonlyField .value {
display: inline;
font-size: 12pt;
}
.readonlyField .translate {
display: inline;
font-size: 10pt;
line-height: 1.5em;
font-weight: normal;
padding-left: 5px;
margin-left: 0px;
}
.editableField {
margin-left: 30px;
}
.editableField label {
display: block;
text-align: left;
font-size: 12pt;
font-weight: bold;
margin-left: -30px;
}
.editableField label:after {
content: ":";
}
.editableField.required label:before {
content: "*";
}
.editableField.required.hasError label:before {
color: #FF3F3F;
}
.editableField .messages {
display: block;
font-size: 10pt;
font-weight: normal;
font-style: italic;
}
.editableField input,
.editableField textarea,
.editableField select {
}
.editableField.hasError input,
.editableField.hasError textarea,
.editableField.hasError select {
border: 2px solid #FF3F3F;
}
.editableField .lookup {
background: transparent url('lookup.gif') no-repeat scroll left center;
width: 15px;
height: 15px;
border: 0;
padding: 0;
}
.editableField .lookup:hover {
cursor: pointer;
}
.editableField .translate {
display: inline;
font-size: 10pt;
line-height: 1.5em;
font-weight: normal;
padding-left: 5px;
margin-left: 0px;
}
.editableField .errors {
position: relative;
display: block;
background: transparent url('error.gif') no-repeat scroll 5px center;
padding: 10px;
padding-left: 30px;
margin-top: 12px;
margin-bottom: 6px;
border: 2px solid #FF3F3F;
border-radius: 10px;
text-align: left;
font-size: 10pt;
font-weight: normal;
white-space: normal;
color: #FF3F3F;
}
.editableField .errors:before {
content:"";
position:absolute;
top: -10px;
left: 40px;
border-width:0 10px 10px;
border-style:solid;
border-color:#FF3F3F transparent;
display:block;
width:0;
}
.editableField .errors:after {
content:"";
position:absolute;
top: -7px;
left: 41px;
border-width:0 9px 9px;
border-style:solid;
border-color: #FFF transparent; /* set to background color */
display:block;
width:0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/aefxx/jQote2/master/jquery.jqote2.min.js"></script>
<script type="text/javascript">
FormField = {
create: function(args, target) {
var field = target || args.target || {};
var attributes = ['value', 'fieldName', 'translate','messages','required','label','errors','hidden','readonly','editable','type', 'lookup'];
for (var i in attributes) {
if (typeof args[attributes[i]] != null && typeof args[attributes[i]] != "undefined") {
field[attributes[i]] = args[attributes[i]];
}
}
field.display = function(node) {
FormField.display(this,node);
}
field.append = function(node) {
FormField.append(this,node);
}
return field;
},
display: function(field, node) {
var d = FormField.createView(field);
console.log(d);
console.log(node);
$(node).replaceWith(d);
},
append: function(field, node) {
$(node).append(FormField.createView(field));
},
createView: function(field) {
console.debug(field);
if (!field.fieldName) {
return "ERROR: no fieldName specified";
}
else if (field.hidden) {
return $("#hiddenFieldTemplate").jqote(field);
}
else if (field.readonly) {
return $("#readonlyFieldTemplate").jqote(field);
}
//editable by default
else if (field.type) {
return $("#editableFieldTemplate").jqote(field);
}
else {
return "ERROR: no type specified";
}
}
};
</script>
<script type="text/html" id="hiddenFieldTemplate">
<![CDATA[
<input type="hidden" value="<%=this.value ? this.value : ""%>" name="<%=this.fieldName%>"/>
]]>
</script>
<script type="text/html" id="readonlyFieldTemplate">
<![CDATA[
<div class="readonlyField">
<span class="label" id="<%=this.fieldName%>-Label">
<% if (this.label) { %>
<%=this.label%>
<% } else {%>
<%=this.fieldName%>
<% } %>
</span>
<span class="value" aria-readonly="true"
<% if (this.label) { %>
aria-labelledby="<%=this.fieldName%>-Label"
<% } %>
<% if (this.translate) { %>
aria-describedby="<%=this.fieldName%>-Translate"
<% } %>
>
<%=this.value ? this.value : ""%>
</span>
<% if (this.translate) { %>
<span class="translate" id="<%=this.fieldName%>-Translate"><%=this.translate%></span>
<% } %>
</div>
]]>
</script>
<script type="text/html" id="editableFieldTemplate">
<![CDATA[
<div class="editableField<% if (this.required) { %> required<% } %><% if (this.errors) { %> hasError<% } %>">
<label for="<%=this.fieldName%>">
<% if (this.label) { %>
<%=this.label%>
<% } else {%>
<%=this.fieldName%>
<% } %>
</label>
<% if (this.messages) { %>
<span class="messages" id="<%=this.fieldName%>-Messages"><%=this.messages%></span>
<% } %>
<% if (this.type == "text") { %>
<input type="text" size="10" maxlength="10"
id="<%=this.fieldName%>"
name="<%=this.fieldName%>"
<% if (this.value) { %>
value="<%=this.value ? this.value : ""%>"
<% } %>
<% if (this.errors || this.messages || this.translate) { %>
aria-describedby="<% if (this.errors) { %><%=this.fieldName%>-Errors<% } %><% if (this.messages) { %> <%=this.fieldName%>-Messages<% } %><% if (this.translate) { %> <%=this.fieldName%>-Translate<% } %>"
<% } %>
aria-required="<% if (this.required) { %>true<%} else {%>false<% } %>"
<% if (this.errors) { %>
aria-invalid="true"
<% } %>
/>
<% } %>
<% if (this.lookup) { %>
<button class="lookup" type="button" title="Lookup <% if (this.label) { %><%=this.label%><% } else { %><%=this.fieldName%><% } %>" id="<%=this.fieldName%>-Lookup"> </button>
<% } %>
<% if (this.translate) { %>
<span class="translate" id="<%=this.fieldName%>-Translate"><%=this.translate%></span>
<% } %>
<% if (this.errors) { %>
<span class="errors" id="<%=this.fieldName%>-Errors"><%=this.errors%></span>
<% } %>
</div>
]]>
</script>
<script type="text/javascript">
$(function() {
FormField.create({fieldName:"test0"}).display($("test0")[0]);
FormField.create({fieldName:"test1", hidden:true}).display($("#test1")[0]);
FormField.create({fieldName:"test2", hidden:true, value:"a"}).display($("#test2")[0]);
FormField.create({fieldName:"test3", readonly:true}).display($("#test3")[0]);
FormField.create({fieldName:"test4", readonly:true, label:"Test 4"}).display($("#test4")[0]);
FormField.create({fieldName:"test5", readonly:true, value:"b"}).display($("#test5")[0]);
FormField.create({fieldName:"test6", readonly:true, translate:"answer"}).display($("#test6")[0]);
FormField.create({fieldName:"test7", readonly:true, label:"Test 7", translate:"answer", value:"b"}).display($("#test7")[0]);
FormField.create({fieldName:"test8", type:"text"}).display($("#test8")[0]);
FormField.create({fieldName:"test9", type:"text", value:"c"}).display($("#test9")[0]);
FormField.create({fieldName:"test10", type:"text", label:"Test 10"}).display($("#test10")[0]);
FormField.create({fieldName:"test11", type:"text", messages:"howdy partner"}).display($("#test11")[0]);
FormField.create({fieldName:"test12", type:"text", errors:"reach for the sky!"}).display($("#test12")[0]);
FormField.create({fieldName:"test13", type:"text", translate:"western"}).display($("#test13")[0]);
FormField.create({fieldName:"test14", type:"text", required:true}).display($("#test14")[0]);
FormField.create({fieldName:"test15", type:"text", value:"c", label:"Test 15", messages:"howdy partner",
errors:"reach for the sky!", translate:"western", required:true}).display($("#test15")[0]);
FormField.create({fieldName:"test16", type:"text", value:"c", label:"Test 16", messages:"howdy partner",
errors:"reach for the sky!", translate:"western", required:true, lookup:true}).display($("#test16")[0]);
});
</script>
</head>
<body>
<div class="hiddenField">
<input type="hidden" value="${value}" name="${name}"/>
</div>
<div class="readonlyField">
<span class="label" id="${name}-Label">${label}</span>
<span class="value" aria-readonly="true" aria-labelledby="${name}-Label" aria-describedby="${name}-Translate">${value}</span>
<span class="translate" id="${name}-Translate">${translate}</span>
</div>
<div class="editableField required hasError">
<label for="${name}">${label}</label>
<span class="messages" id="${name}-Messages">${messages}</span>
<input type="text" size="10" maxlength="10" id="${name}" name="${name}"
value="${value}" aria-describedby="${name}-Errors ${name}-Messages ${name}-Translate" aria-required="${required}" aria-invalid="true"/>
<button class="lookup" type="button" title="Lookup ${label}"> </button>
<span class="translate" id="${name}-Translate">${translate}</span>
<span class="errors" id="${name}-Errors">${errors}</span>
</div>
properties:
<ul>
<li>value</li>
<li>fieldName</li>
<li>translate</li>
<li>messages</li>
<li>required</li>
<li>label</li>
<li>errors</li>
<li>hidden</li>
<li>readonly</li>
<li>type</li>
</ul>
<div id="test0"> </div>
<div id="test1"> </div>
<div id="test2"> </div>
<div id="test3"> </div>
<div id="test4"> </div>
<div id="test5"> </div>
<div id="test6"> </div>
<div id="test7"> </div>
<div id="test8"> </div>
<div id="test9"> </div>
<div id="test10"> </div>
<div id="test11"> </div>
<div id="test12"> </div>
<div id="test13"> </div>
<div id="test14"> </div>
<div id="test15"> </div>
<div id="test16"> </div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment