 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Kai.S
Threadersteller
Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht: 
|
Verfasst Fr 09.05.2008 11:05
Titel [solved] Wie skinne ich ein <form> <select> drop |
  |
|
Hey Leute,
gibt es eine Möglichkeit ein "<form> <select> <option>"-Gebilde komplett zu skinnen?
Also Pfeile, Laufbar etc. alles mit Grafiken zu versehen? Mit CSS-only ist ja nicht viel drin 
Gerne kann das auch eine JavaScript-Nachbau-Variante sein, falls ihr sowas habt oder wisst wos das gibt, Google hat nix ausgespuckt, tu mich aber mit Keywords auch schwer.
Danke
Kai
EDIT:
OK so gehts:
http://mediavrog.net/development/mootools/customFormElements/1.8b/
http://www.cult-f.net/2007/12/14/elselect/
Zuletzt bearbeitet von Kai.S am Fr 09.05.2008 11:25, insgesamt 2-mal bearbeitet
|
|
| |
   |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
|
Anzeige
|
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 09.05.2008 11:27
Titel
|
|
|
Ich hab sowas, basiert auf prototype (prototypejs.org) Aber damit musste dann selbst klarkommen, ist aber eigentlich nicht sooo schwer, allerdings ein wenig css-fummelei.
1. prototype.js (1.6.0) einbinden
2. MyNamespace.xyz durch DeinNamespace.xyz ersetzen.
3. Initialisierungsfunktionen anpassen
4. window.onload => DeinNamespace.initMagicDropdowns( collectionOfSelectElements) aufrufen.
5. Das Zeug mit css durchstylen.
| Code: |
MyNamespace.initMagicDropdowns = function ( selectList )
{
selectList.each ( function (select)
{
var options = {};
if ( select.hasClassName ('noFullText'))
{
options.fulltext = false;
}
new MyNamespace.MagicDropdown ( select,options );
});
}
MyNamespace.removeMagicDropdowns = function ( node )
{
node.select ( 'div.magicDropdown' ).each ( function ( div )
{
div.remove();
});
}
MyNamespace.MagicDropdown = Class.create();
MyNamespace.MagicDropdown.activeLists = [];
MyNamespace.MagicDropdown.addMethods
({
initialize : function ( select, options )
{
this.select = $(select);
select._magicDropdown = this;
this.aliasList = {};
this.linkCollection = [];
this.currentSelectedLink = null; // Der Momentan ausgewählte Link
this.textField = null;
this.overallWrapper = {};
this.freeText = null;
this.aliasListIsOpen = false;
this.activeLink = null; // Der Link, der oben über der Liste steht
this.activeParagraph = null; // <p>aktiver Eintrag</p><ul>...
this.disabled=false;
this.options = {
'fulltext' : true, // Mit Volltext-Feld?
'matchColor': '#000', // Farbe der Einträge
'missColor' : '#999', // Farbe, wenn Eingabe nicht mit Inhalt übereinstimmg
'offsetTop' : -1, // Abstand des Popups zum Formularfeld
'disabledColor': '#ccc',
'zIndex' : 1000 // zIndex
}
if ( options )
{
for ( var i in options )
{
this.options[i] = options[i];
}
}
// mach et!
this.transform();
},
transform:function()
{
this.getHTML();
this.bindEvents();
this.styleIt();
},
styleIt: function()
{
this.select.setStyle({
display:'none'
})
this.aliasList.setStyle({'position':'absolute'});
this.aliasList.setStyle({
display:'none',
zIndex : this.zIndex
},this);
if ( this.disabled )
{
this.overallWrapper.setStyle({
backgroundColor:this.options.disabledColor
});
}
},
positionIt:function()
{
var pos = this.overallWrapper.cumulativeOffset();
var width = this.overallWrapper.down('p').getWidth();
this.aliasList.setStyle({
left:pos[0] + "px",
top:pos[1] + this.overallWrapper.getHeight() + this.options.offsetTop + "px",
'minWidth':width + "px"
});
},
toggleAliasList: function ()
{
if ( this.aliasListIsOpen )
{
this.activeParagraph.removeClassName( 'active' );
this.activeLink.removeClassName('active');
this.aliasList.setStyle({
display:'none'
});
delete MyNamespace.MagicDropdown.activeLists[ MyNamespace.MagicDropdown.activeLists.indexOf ( this ) ];
}
else
{
this.positionIt(); // neu positionieren
this.activeParagraph.addClassName ( 'active' );
this.activeLink.addClassName('active');
this.aliasList.setStyle({display:'block'}); // liste ein- und ausklappen
if ( MyNamespace.MagicDropdown.activeLists.length > 0)
{
MyNamespace.MagicDropdown.activeLists.each ( function ( list )
{
list.toggleAliasList();
},this);
}
MyNamespace.MagicDropdown.activeLists.push ( this );
}
this.aliasListIsOpen = ! this.aliasListIsOpen ;
},
bindEvents : function()
{
if ( this.disabled ) return;
// Toggle link überwachen
this.activeLink.observe('click', function (ev)
{
Event.stop(ev);
this.toggleAliasList();
}.bindAsEventListener(this));
// Links in der Liste überwachen
this.linkCollection.each ( function ( optionLink )
{
optionLink.observe('click', function(ev)
{
Event.stop ( ev );
this.select.disabled = false;
if ( this.freeText )
{
this.freeText.disabled = true;
}
// alte active-klasse markieren
if ( this.currentSelectedLink )
{
this.currentSelectedLink.removeClassName('active');
}
this.activeLink.update ( optionLink.innerHTML ); // fake-liste
optionLink.addClassName('active');
this.currentSelectedLink = optionLink;
// reicht das? mal sehen...
this.select.setValue ( this.getOptionValue ( optionLink._option ));
optionLink._option.selected = true;
this.toggleAliasList(); // Liste nach Auswahl wieder zuklappen
}.bindAsEventListener(this));
},this);
// Frei-Textfeld Kann abgeschaltet werden (options-objekt)
if ( this.textField )
{
this.textField.observe('focus', function(ev)
{
this.textField.activate();
}.bindAsEventListener(this));
this.textField.observe('keyup',function(ev)
{
Event.stop(ev);
// checken, obs eine entsprechung gibt.
this.linkCollection.each ( function ( optionLink )
{
var expr = '/^.*' + this.textField.getValue() + '.*$/i';
var test;
eval ( "test=optionLink.innerHTML.search ( " + expr + ")"); // Kacke...
optionLink.setStyle({
color:this.options.matchColor
})
if ( test === -1 )
{
optionLink.setStyle({
color:this.options.missColor
});
}
},this);
if ( ev.keyCode == Event.KEY_RETURN )
{
Event.element(ev).blur();
if ( this.textField.getValue() != '')
{
if (this.currentSelectedLink)
{
this.currentSelectedLink.removeClassName('active');
this.currentSelectedLink = null;
}
if ( this.freeText )
{
this.freeText.disabled = false;
}
this.select.disabled = true;
var value = this.textField.getValue();
this.activeLink.update(value);
this.freeText.setValue ( value );
this.select.disabled = true;
}
this.toggleAliasList();
}
}.bindAsEventListener(this));
}
document.observe('VDA:tabswitch', function ( ev )
{
if ( this.aliasListIsOpen )
{
this.toggleAliasList();
}
}.bindAsEventListener(this));
},
getHTML: function ()
{
if ( this.select.disabled )
this.disabled = true;
var overallWrapper = $(document.createElement ('div')); // der wrapper fürs formular, im form-tag verankert.
overallWrapper.addClassName (this.select.className );
var listWrapper = $(document.createElement('ul')); // die liste mit den auswahlmöglichkeiten, am body verankert.
listWrapper.addClassName('magicDropdown');
// Toggle-Link erzeugen
var activeWrapper = $(document.createElement ( 'p' ));
var activeLink = $(document.createElement ( 'a' ));
activeLink.title = 'Bitte auswählen';
activeLink.update ('Bitte auswählen');
activeWrapper.appendChild ( activeLink );
if ( this.disabled )
activeWrapper.addClassName('disabled');
// listenelemente erzeugen
this.select.select('option').each ( function ( option )
{
var listItem = $(document.createElement ( 'li' ));
var optionLink = $(document.createElement('a'));
optionLink.update(option.text);
optionLink.href='javascript:void(0)';
// backreferences for easy access
optionLink._option = option;
option._optionLink = optionLink;
if ( option.selected === true )
{
activeLink.rel=option.value;
if ( ! this.disabled )
activeLink.href=option.value;
activeLink.title = option.text;
activeLink.update(option.text);
activeLink.addClassName('active');
this.currentSelectedLink = option._optionLink;
option._optionLink.addClassName('active');
}
this.linkCollection.push ( optionLink );
listItem.appendChild ( optionLink );
listWrapper.appendChild ( listItem );
},this);
if ( this.options.fulltext )
{
// Input Feld erzeugen
var inputWrapper = $(document.createElement ('li'));
var inputField = $(document.createElement ('input'));
inputField.type = 'text';
//inputField.name = this.select.name;
inputField.setValue();
inputWrapper.appendChild ( inputField );
listWrapper.appendChild ( inputWrapper ); // input-element dran hängen
// Freie option für select
var freeText = $(document.createElement ( 'input' ));
freeText.type = 'hidden';
freeText.name = this.select.name;
this.textField = inputField;
this.freeText = freeText;
this.freeText.disabled = true;
overallWrapper.appendChild ( this.freeText );
}
overallWrapper.appendChild ( activeWrapper );// ist das p
//overallWrapper.appendChild ( listWrapper );
// Liste als Eigenschaft zuweisen
this.overallWrapper = overallWrapper;
this.aliasList = listWrapper;
this.activeLink = activeLink;
this.activeParagraph = activeWrapper;
// ins dom reinmachen
this.select.parentNode.insertBefore(overallWrapper,this.select);
document.body.appendChild (listWrapper);
},
getOptionValue : function (option)
{
return option.value ? option.value : option.innerHTML;
}
}); |
|
|
| |
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Fr 09.05.2008 11:31
Titel
|
|
|
| Zitat: | | gibt es eine Möglichkeit ein "<form> <select> <option>"-Gebilde komplett zu skinnen? |
Dazu gibt es CSS.
| Zitat: | | Also Pfeile, Laufbar etc. alles mit Grafiken zu versehen? |
Das sind Elemente des Browsers. Die kannst du nicht einfach austauschen und solltest das auch nicht versuchen.
| Zitat: | | Gerne kann das auch eine JavaScript-Nachbau-Variante sein |
Das wäre dann auch deine einzige Möglichkeit, wenn du kein Flash nimmst. Dann mußt du aber verdammt viel beachten. Deine Scrollbars müßten dann beispielsweise auch mit dem Mausrad zu bedienen sein, usw..
Laß einfach die Finger von den Browser-eigenen Elementen. Das ist das Beste, was du machen kannst.
Nimm dem User nicht seine gewohnten Einstellungen.
|
|
| |
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 09.05.2008 12:27
Titel
|
|
|
|
Da is was dran. Trotzdem kann das in Einzelfällen (!) sinnvoll sein, vorausgesetzt, man bietet entspr. Fallbacklösungen an. Ich bin immer dafür, Javascript "draufzupappen" anstatt durch Javascript zu erzeugen (wie YUI das bspw. gern macht).
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 09.05.2008 12:37
Titel
|
|
|
Das ist aber im Gegensatz zu anderen (moderneren) Lösungen einfach nichts, die Selectboxen sind ok, aber
die Input (checkbox, radio) replacements sind echt nichts.
Edit: da fällt mir noch ein, ext js: http://extjs.com/deploy/dev/examples/form/combos.html
Zuletzt bearbeitet von m am Fr 09.05.2008 12:59, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Kai.S
Threadersteller
Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Drop-Down bzw Select Box stylen - per Javascript
Select Form mit individuellen Mails pro Option
[SOLVED] Select & Input text kombinieren
PHP Form [Solved]
Problem mit <form> und höhe in ie --------solved
[solved]CSS Problem im IE bei form input und label
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
