Witam serdecznie,
Chciałbym, żeby moje formularze na stronie były "ładne i efektowne".
Zastosowałem Pretty Forms (działają znacznie lepiej niż np. Nice Forms).
Tutaj info:
http://www.agavegroup.com/?p=35
A tu DEMO:
http://www.agavegroup.com/agWork/prettyForms/
Jest lekko zmodyfikowane:
PrettyForms.css:
/*******************
Author: Patrick Ryan
URL: http://www.agavegroup.com
Feel free to use this however you like. Credit is always appreciated.
*******************/
input, textarea, select{
border:0;
margin:3px;
padding:0px 3px;
font:90%/180% "Trebuchet MS", "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
color:#666666;
}
/*
label{
float:left;
margin:5px;
width:100px;
display:block;
}
*/
.clearAll{
clear:both;
}
/***** Shadows that wrap around ALL elements ***********/
.frmShdwTopLt{
float:left;
background:url(shadowUpperLeft.gif) top left no-repeat;
}
.frmShdwBottomRt{
float:left;
background:url(shadowLowerRight.gif) bottom right no-repeat;
}
.frmShdwBottomLt{
float:left;
background:transparent url(shadowBottomLeft.gif) bottom left no-repeat;
}
.frmShdwTopRt{
float:left;
background:transparent url(shadowTopRight.gif) top right no-repeat;
}
/***** styles specific to the CHECKBOX **********/
.frmShdwCheck{
border:0;
margin:0;
padding:0;
}
.frmShdwCheck img{
border:0;
margin:0;
}
/***** styles specific to the RADIO BUTTONS **********/
.frmShdwRadio{
float:left;
margin:0;
}
.frmShdwRadio img{
border:0;
margin:0;
}
/***** styles specific to the SUBMIT BUTTONS **********/
.frmShdwSubmit{
border:0;
background:#f7f7f7 !important;
background:transparent;
float:left;
font-weight:bold;
cursor:pointer;
}
.frmShdwSubmit:hover{
color:#000000;
}
/***** styles specific to the SELECT BOX **********/
.frmShdwSelectDropChosen{
margin:3px 3px 3px 5px;
padding: 0 0 0 2px !important;
padding: 0 0 3px 2px;
font-size:.9em;
float:left;
border-right:1px solid #cccccc;
border-left:1px solid #ffffff !important;
border-left:0;
display:block;
cursor:pointer;
/*some stuff for IE*/
color:#666666;
text-decoration:none;
}
.frmShdwSelectDropShown{
margin:3px 3px 3px 5px;
padding: 0 0 0 2px;
font-size:.9em;
float:left;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
position:absolute;
background:#ffffff;
}
.frmShdwSelectDrop{
display:none;
}
.fakeSelectImg{
border:0;
margin:5px 5px 0px 0px;
}
.frmShdwSelectDropShown a{
display:block;
margin:0;
padding:0px;
border-bottom:1px dashed #ffffff;
text-decoration:none;
color:#666666;
}
.frmShdwSelectDropShown a.selected{
background:#f7f7f7;
color:#000000;
border-bottom:1px dashed #cccccc;
}
.frmShdwSelectDropShown a.selected:after{
content:" <<";
}
.frmShdwSelectDropShown a:hover{
background:#f7f7f7;
border-bottom:1px dashed #cccccc;
text-decoration:none;
color:#666666;
}
.frmShdwSelectDropShown a:hover:before{
content:">> ";
}
PrettyForms.js
/*******************
Author: Patrick Ryan
URL: http://www.agavegroup.com
Feel free to use this however you like. Credit is always appreciated.
*******************/
//need to set a couple of images here:
imageCheckboxChecked="addr/checkboxChecked.gif";
imageCheckboxUnchecked="addr/checkboxUnchecked.gif";
imageRadioChecked="addr/radiobuttonChecked.gif";
imageRadioUnchecked="addr/radiobuttonUnchecked.gif";
imageSelectDropDownArrow="addr/selectDrop.gif";
//the rest of the images are in the CSS
function prettyForms(){
fixTextBoxes();
fixTextareas();
fixSelects();
fixSubmits();
}
//****
//**** functions that apply the look to the form elements
//****
//this function is run for all form elements (except radio buttons)
//this function accepts one element, and wraps it in four divs that are styled with shadows
function appendParentsTo(currItem){
//create the divs
tl = document.createElement("div");
br = document.createElement("div");
bl = document.createElement("div");
tr = document.createElement("div");
if(document.all){ //IE
//give them the proper class
tl.className="frmShdwTopLt";
br.className="frmShdwBottomRt";
bl.className="frmShdwBottomLt";
tr.className="frmShdwTopRt";
//insert the top level div
t1=currItem.insertAdjacentElement("BeforeBegin",tl);
}else{ //FFX
//give them the proper class
tl.setAttribute("class", "frmShdwTopLt");
br.setAttribute("class", "frmShdwBottomRt");
bl.setAttribute("class", "frmShdwBottomLt");
tr.setAttribute("class", "frmShdwTopRt");
inputParent = currItem.parentNode;
//insert the top level div
tl = inputParent.insertBefore(tl, currItem);
}
//append children
br = tl.appendChild(br);
bl = br.appendChild(bl);
tr = bl.appendChild(tr);
//move input to child of divs
tr.appendChild(currItem);
}
//apply look to text boxes
function fixTextBoxes(){
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="text"){
appendParentsTo(inputs[i]);
}
}
}
//apply look to textareas
function fixTextareas(){
textareas = document.getElementsByTagName("textarea")
for(i=0;i<textareas.length;i++){
appendParentsTo(textareas[i]);
}
}
//apply look to submit buttons
function fixSubmits(){
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="submit"){
appendParentsTo(inputs[i]);
inputs[i].className="frmShdwSubmit";
}
}
}
//apply look to radio buttons
function fixRadios(){
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="radio"){
lnk = document.createElement("a");
lnk.style.margin="4px";
lnk.className="frmShdwRadio";
img = document.createElement("img");
if(inputs[i].checked==true){
img.src = imageRadioChecked;
}else{
img.src = imageRadioUnchecked;
}
//elements created, now pass functionality
//give the checkbox an id if it doesn't have one
if(inputs[i].id){
realId = inputs[i].id;
}else{
realId = "radio"+i;
inputs[i].id = realId;
}
//give the fake check an id
fakeId = "fake"+realId;
img.id=fakeId
lnk.href="javascript:toggleRadio('"+realId+"','"+fakeId+"')";
//insert the new image into the document
if(document.all){ //IE
lnk = inputs[i].insertAdjacentElement("BeforeBegin",lnk)
}else{
inputParent = inputs[i].parentNode;
lnk = inputParent.insertBefore(lnk,inputs[i]);
}
lnk.appendChild(img);
//remove the actual checkbox
inputs[i].style.display="none";
}
}
}
//apply look to check boxes
function fixChecks(){
inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="checkbox"){
appendParentsTo(inputs[i]);
//have shadow box, now replace checkbox with image of check, or no image.
//need to create an <a> element AND an <img> element because IE won't happily put an onclick on the img alone
lnk = document.createElement("a");
lnk.style.margin="4px";
lnk.className="frmShdwCheck";
img = document.createElement("img");
if(inputs[i].checked==true){
img.src = imageCheckboxChecked;
}else{
img.src = imageCheckboxUnchecked;
}
//elements created, now pass functionality
//give the checkbox an id if it doesn't have one
if(inputs[i].id){
realId = inputs[i].id;
}else{
realId = "check"+i;
inputs[i].id = realId;
}
//give the fake check an id
fakeId = "fake"+realId;
img.id=fakeId
lnk.href="javascript:toggleCheck('"+realId+"','"+fakeId+"')";
//insert the new image into the document
if(document.all){ //IE
lnk = inputs[i].insertAdjacentElement("BeforeBegin",lnk)
}else{
inputParent = inputs[i].parentNode;
lnk = inputParent.insertBefore(lnk,inputs[i]);
}
lnk.appendChild(img);
//remove the actual checkbox
inputs[i].style.display="none";
}
}
}
//apply look to select boxes
function fixSelects(){
selects = document.getElementsByTagName("select")
for(i=0;i<selects.length;i++){
//create the standard shadows
appendParentsTo(selects[i]);
//give this thing an id if it doesn't have one
if(selects[i].id==""){
selects[i].id="dynId"+i;
}
//create new div to hold list
//this is a wrapper div to hold everything together
fakeSelectWrapper = document.createElement("div");
//this is the link that holds the select's drop down arrow
fakeSelectIcon = document.createElement("a")
if(document.all){ //IE
fakeSelectIcon.href="javascript:dropDownMenu(\"frmShdwMenu"+i+"\", \"frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")";
fakeSelectIcon.innerHTML = "<img class=\"fakeSelectImg\" src=\""+imageSelectDropDownArrow+"\" />";
//this is the div that actually contains the list of options
fakeSelect = document.createElement("div");
fakeSelect.id="frmShdwMenu"+i;
fakeSelect.className="frmShdwSelectDrop";
options = selects[i].getElementsByTagName("option");
//this div is displayed when the box is NOT dropped down. Shows currently displayed item
fakeSelectedHolder = document.createElement("a");
fakeSelectedHolder.className="frmShdwSelectDropChosen";
fakeSelectedHolder.id="frmShdwMenuChosen"+i;
fakeSelectedHolder.style.width=selects[i].clientWidth-15+"px";
fakeSelectedHolder.href="javascript:dropDownMenu(\"frmShdwMenu"+i+"\", \"frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")";
for(j=0;j<options.length;j++){
//create a p tag for each element, and append it to the parent div
fakeOption = document.createElement("a")
fakeOption.innerHTML = options[j].innerHTML;
fakeOption.style.width=selects[i].clientWidth-16+"px";
//here's some crazy IE stuff.
fakeOption.href='javascript:chooseSelect("'+selects[i].id+'",'+j+',"frmShdwMenu'+i+'", "frmShdwMenuChosen'+i+'")'
fakeSelect.appendChild(fakeOption);
//set the default text to show
if(options[j].selected==true){
fakeSelectedHolder.innerHTML=options[j].innerHTML;
fakeOption.className="selected";
}
}
//construct the menu parts Wrapper around list of options and image
fakeSelectWrapper.appendChild(fakeSelectedHolder);
fakeSelectWrapper.appendChild(fakeSelect);
fakeSelectWrapper.appendChild(fakeSelectIcon);
//now put the new div inside the shadows, above the select box
selectParent = selects[i].parentNode;
fakeSelect.style.width=selects[i].clientWidth-15+"px";
// more crazy IE stuff : push the dropped down menu to the left where it belongs
fakeSelect.style.margin="3px 3px 3px -"+(selects[i].clientWidth-5)+"px";
fakeSelectWrapper = selects[i].insertAdjacentElement("BeforeBegin",fakeSelectWrapper)
//hide the real select box
selects[i].style.display="none";
}else{
fakeSelectIcon.setAttribute("href","javascript:dropDownMenu(\"frmShdwMenu"+i+"\", \"frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")");
fakeSelectIcon.innerHTML = "<img class=\"fakeSelectImg\" src=\""+imageSelectDropDownArrow+"\" />";
//this is the div that actually contains the list of options
fakeSelect = document.createElement("div");
fakeSelect.setAttribute("id","frmShdwMenu"+i);
fakeSelect.setAttribute("class","frmShdwSelectDrop");
options = selects[i].getElementsByTagName("option");
//this div is displayed when the box is NOT dropped down. Shows currently displayed item
fakeSelectedHolder = document.createElement("div");
fakeSelectedHolder.setAttribute("class","frmShdwSelectDropChosen");
fakeSelectedHolder.setAttribute("id","frmShdwMenuChosen"+i);
fakeSelectedHolder.style.width=selects[i].clientWidth-15+"px";
fakeSelectedHolder.setAttribute("onclick","javascript:dropDownMenu(\"frmShdwMenu"+i+"\", \"frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")");
for(j=0;j<options.length;j++){
//create a p tag for each element, and append it to the parent div
fakeOption = document.createElement("a")
fakeOption.innerHTML = options[j].innerHTML;
fakeOption.setAttribute("href","javascript:chooseSelect(\""+selects[i].id+"\","+j+",\"frmShdwMenu"+i+"\", \"frmShdwMenuChosen"+i+"\")"); //clicking calls the function chooseSelect passing the select object, and the chosen index
fakeSelect.appendChild(fakeOption);
//set the default text to show
if(options[j].selected==true){
fakeSelectedHolder.innerHTML=options[j].innerHTML;
fakeOption.setAttribute("class","selected");
}
}
//construct the menu parts Wrapper around list of options and image
fakeSelectWrapper.appendChild(fakeSelectedHolder);
fakeSelectWrapper.appendChild(fakeSelect);
fakeSelectWrapper.appendChild(fakeSelectIcon);
//now put the new div inside the shadows, above the select box
selectParent = selects[i].parentNode;
fakeSelect.style.width=selects[i].clientWidth-15+"px";
fakeSelectWrapper = selectParent.insertBefore(fakeSelectWrapper,selects[i]);
//hide the real select box
selects[i].style.display="none";
}
}
}
//****
//**** functions that apply the functionality to the form elements
//****
//function runs when a radio button is clicked
function toggleRadio(realRadioId, fakeRadioId){
realRadio = document.getElementById(realRadioId);
fakeRadio = document.getElementById(fakeRadioId);
//want to ONLY look in the correct form, so get this radio button's parent form (supports multiple forms)
radioForm = realRadio.parentNode;
tmpCnt=1;
while(radioForm.tagName!="FORM"){
radioForm = radioForm.parentNode;
tmpCnt++;
if(tmpCnt>50){
window.alert("encountered javascript error\n[parentNode]")
break;
}
}
inputs=radioForm.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
if(inputs[i].type=="radio"){
//IDs look like this: realId: blah fakeId: fakeblah
if(inputs[i].name==realRadio.name){ //is part of the same radio group, uncheck it.
inputs[i].checked=false; //uncheck the actual button
document.getElementById("fake"+inputs[i].id).src=imageRadioUnchecked;
if(inputs[i].id==realRadioId){
inputs[i].checked=true; //check the actual button
document.getElementById("fake"+inputs[i].id).src=imageRadioChecked;
}
}
}
}
//**** EVENT HANDLING
// Clicking the radiobutton equivalent to the button's onClick event and onChange event . fire it.
triggerEvent(realRadio,"change");
triggerEvent(realRadio,"click");
}
//this function handles the actual check box handling
function toggleCheck(realCheckId, fakeCheckId){
fakeCheck = document.getElementById(fakeCheckId);
realCheck = document.getElementById(realCheckId);
if(fakeCheck.src.indexOf("checkboxChecked.gif") != -1){
fakeCheck.src = imageCheckboxUnchecked;
}else{
fakeCheck.src = imageCheckboxChecked;
}
if(realCheck.checked==true){
realCheck.checked=false;
}else{
realCheck.checked=true;
}
//**** EVENT HANDLING
// Clicking the box equivalent to the box's onClick event and onChange event . fire it.
triggerEvent(realCheck,"change");
//NOTE cannot use click event on checkbox - it causes bubbling (that cannot be prevented:mozilla bug?) and the change event gets fired multiple times
}
//function runs when drop down arrow next to select box is clicked
function dropDownMenu(menuId, chosenMenuId, realMenuId){
//hide the default Text item
//document.getElementById(chosenMenuId).style.display="none";
//show the full list
document.getElementById(menuId).className="frmShdwSelectDropShown";
//**** EVENT HANDLING
// Clicking the list is equivalent to the selects onClick event. fire it.
realMenu = document.getElementById(realMenuId);
if(document.all){
res = realMenu.fireEvent("onclick");
}else{
mouseEvent = document.createEvent('MouseEvents');
mouseEvent.initMouseEvent('click',true,true,window,1,0,0,0,0,false,false,false,false,0,null);
realMenu.dispatchEvent(mouseEvent);
}
}
//function runs when a drop down item is clicked
function chooseSelect(chosenSelect,chosenIndex,menuId, chosenMenuId){
realDropdown = document.getElementById(chosenSelect);
fakeDropDown = document.getElementById(menuId);
fakeChosenItem = document.getElementById(chosenMenuId)
//set the chosen item to be selected in the REAL drop down
currSelect = realDropdown.selectedIndex=chosenIndex;
//put the chosen text into the display div
//for some reason setting innerHTML breaks in IE
fakeChosenItem.childNodes[0].nodeValue=realDropdown[chosenIndex].innerHTML;
//deselect all the items under the dropdown
fakeOptions=fakeDropDown.getElementsByTagName("a");
for(i=0;i<fakeOptions.length;i++){
fakeOptions[i].className="";
//if this is the selected item, set to selected
if(fakeOptions[i].innerHTML == realDropdown[chosenIndex].innerHTML){
fakeOptions[i].className="selected";
}
}
//hide the rest of the dropdown
fakeDropDown.className="frmShdwSelectDrop";
//show the display div
fakeChosenItem.style.display="block";
//**** EVENT HANDLING
// Choosing an item is equivalent to the selects onChange event. fire it.
triggerEvent(realDropdown,"change");
}
//function to trigger events that are built into the form elements that have been hidden
function triggerEvent(obj, evt){
if(document.all){
if(evt=="click"){
res = obj.fireEvent("onclick");
}else if(evt=="change"){
res = obj.fireEvent("onchange");
}
}else{
//NOTE - in the mozilla event model, I am cancelling the bubbleUp! (1st false)
// this is needed to prevent odd interaction, but could cause other issues!
if(evt=="click"){
mouseEvent = document.createEvent('MouseEvents');
mouseEvent.initMouseEvent('click',true,true,window,1,0,0,0,0,false,false,false,false,0,null);
obj.dispatchEvent(mouseEvent);
}else if(evt=="change"){
mouseEvent = document.createEvent('HTMLEvents');
mouseEvent.initEvent('change',true,true,window,1,0,0,0,0,false,false,false,false,0,null);
obj.dispatchEvent(mouseEvent);
}
}
}
Wyłączyłem skinowanie checkboxów oraz radio inputów, bo jak mówi sam autor - skrypt ma z tym spore problemy.
Teraz mam tylko trzy poważne problemy:
-
center - jak wspomina autor, przewidział tylko forcowanie ustawienia do lewej strony. Jednak mam kilka miejsc, gdzie musi być wycentrowany form - wtedy wszystko się rozjeżdża (form idzie do lewej strony) ;/ Czy można na to jakoś zaradzić? Np. pozamieniać coś w CSSie lub JSie, aby działało prawidłowo? Szukałem, ale nie mogę znaleźć działające modyfikacji.
-
password - co z inputem typu password? Czemu nie jest skinowany o.O? (Dobra, to chyba mam)
-
entery - Jakoś dziwnie są ustawione niektóre elementy (jeżeli się nie mylę, to selecty i textarey) - ignorowane są po nich br`y. Efekt?
Zamiast:
Tytuł:
[texarea]
Tytuł 2:
itd...
mam:
Tytuł:
[texarea]Tytuł 2:
itd...
Czy możecie mi z tym pomóc?
Ew. jakby ktoś znał jakieś miejsce, gdzie mogę znaleźć ładny styl CSS do formów. Wszedzie szukałem, ale głównie się skupiają na tym co jest dookoła forma, a nie na samym formie. Mi chodzi tylko o ładny wygląd inputów typu text, button, submit i password, najlepiej za pomocą samego CSS-a chociaż może być DZIAŁAJĄCY JS do tego :)
Z góry dziękuję za odpowiedzi,
pozdrawiam