jquery-Extension in TYPO3 - wie funktioniert das?

[Katjusha]

Hi, ich würde gerne einen Farbwähler in meine Seite einbauen, dieser soll aus einer select-Box bestehen, wo dann die Werte per ajax an die DB übermittlet werden, das Ergebniss soll also sofort sichtbar sein, sagen wir ein Div-container soll direkt die neue Farbe als Hintergrund haben.

Ich wüßte wohl schon wie ich mir das grob zusammenzimmern könnte, aber ich möchte dieses Mal eine saubere Umsetzung haben, meine Wahl fiel auf jquery, es gibt dort ein Plugin namens "jQuery - Select box manipulation" (http://www.texotela.co.uk/code/jquery/select/) was mir geeignet scheint. Nur weiß ich nicht, wie man da jetzt weiter vorgeht. Habe jquery installiert. Ist da dieses Plugin schon dabei oder muss ich das extra installieren? und wo?

Hoffe ihr könnt mir ein paar Tipps hierzu geben.

[steffenk]

aus Dinem Post kann ich ersehen das Du Dich weder mit jquery noch mit der Methode auskennst-

Die Ext integriert lediglich jquery in die Seite. Was soll die Farbe in der DB? Wozu ein Ajaxrequest? Die Farbe ist CSS, also auch mit einem Einzeiler zu ändern.

[Katjusha]

Hi,

ist schon richtig, kenne mich wirklich nicht aus mit jQuery, deswegen ja auch die Frage. Aber bin mittlerweile auch schlauer demnach stellt die Extension lediglich die Dateien (Plugins) bei Aufruf bereit und wie du sagst integriert diese. Ok, ich glaube jetzt verstehe ich die Funktionsweise von diesem Plugin.

Zu der ganzen Sache, es geht mir halt darum das ein Fe-User für sein Profil individuelle Stylesheets haben soll, die er dann in einem javascript-Formular (der Farbwähler) sich selber einstellen kann.
Ich bin damit eigentlich auch schon ganz gut vorangekommen, dreckiges Javascript-Formular und eintrag in die DB sind soweit fertig (das mit dem ajax-Request war hier wirklich fehl am Platz/übertrieben, habe das nun verworfen).

Jetzt soll eine css-Datei dynamisch generiert werden, mit php-Variablen im Css, damit dann dynamisch unterschiedliche Styles angezeigt werden (deswegen soll die Farbe in die DB):

.table1 {
    border: solid 2px #<?php echo $c[2]?>;
    background-color: #<?php echo $c[6]?>;
    width: 100%;
    height: 100%;
    text-align: center;
}

Bin jetzt noch am experimentieren, wie man so eine dynamische css in TYPO3 am besten umsetzt, im www gibt es dazu eigentlich kaum etwas.
Greets, K

[Katjusha]

Hi,
nun verwende ich doch keine als php umfunktionierte css-datei mit variablen, das erschien mir auch irgendwie unsauber. Da es auch nur um etwa 5 - 10 css styles geht, werden diese nun mit einer Extension in den header geschrieben. Ich würde euch nun gerne mal das Javascript präsentieren, was ich da reingepackt hab, ich glaub das ist nicht so der Hammer:

function chooseStyles($conf) {

$action = "


<script language=\"javascript\">

function toggleswitch(id) 
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('div'+i)) {document.getElementById('div'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

function toggleswitchHeader1(id) 
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('headerone'+i)) {document.getElementById('headerone'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}



function toggleswitchHeader2(id) 
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('headertwo'+i)) {document.getElementById('headertwo'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}



function toggleswitchBodye(id) 
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('bodye'+i)) {document.getElementById('bodye'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}



function toggleswitchLinks(id) 
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('links'+i)) {document.getElementById('links'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}



function toggleswitchRechts(id) 
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('rechts'+i)) {document.getElementById('rechts'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}



function toggleswitchFooter(id) 
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('footer'+i)) {document.getElementById('footer'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}





function header1func1(){
document.getElementsByName('preview_style')[0].checked=true
}
function header1func2() {
document.getElementsByName('preview_style')[1].checked=true
}
function header1func3() {
document.getElementsByName('preview_style')[2].checked=true
}
function header1func4() {
document.getElementsByName('preview_style')[3].checked=true
}
function header1func5() {
document.getElementsByName('preview_style')[4].checked=true
}



function header2func1(){
document.getElementsByName('preview_style2')[0].checked=true
}
function header2func2() {
document.getElementsByName('preview_style2')[1].checked=true
}
function header2func3(){
document.getElementsByName('preview_style2')[2].checked=true
}



function bodyefunc1() {
document.getElementsByName('preview_style3')[0].checked=true
}
function bodyefunc2() {
document.getElementsByName('preview_style3')[1].checked=true
}
function bodyefunc3() {
document.getElementsByName('preview_style3')[2].checked=true
}



function linksfunc1() {
document.getElementsByName('preview_style4')[0].checked=true
}
function linksfunc2() {
document.getElementsByName('preview_style4')[1].checked=true
}
function linksfunc3() {
document.getElementsByName('preview_style4')[2].checked=true
}



function rechtsfunc1() {
document.getElementsByName('preview_style5')[0].checked=true
}
function rechtsfunc2() {
document.getElementsByName('preview_style5')[1].checked=true
}
function rechtsfunc3() {
document.getElementsByName('preview_style5')[2].checked=true
}



function footerfunc1() {
document.getElementsByName('preview_style6')[0].checked=true
}
function footerfunc2() {
document.getElementsByName('preview_style6')[1].checked=true
}
function footerfunc3() {
document.getElementsByName('preview_style6')[2].checked=true
}


</script>


";

Das ist das javascript, welches auf die checkboxen im Formular reagiert und
die einzelnen Divs bei klcik sichtbar macht, es geht halt im Prinzip um
den grafischen Nachbau der echten Seitenstruktur, also etwa header, header2,links,rechts,footer und bei klick auf die farben ändert sich dann in diesem nachbau die jeweilige farbe, zb vom footer.

Bzgl des javascript nun, hat mir jemand einen Tipp wie ich das ökonomischer schreiben kann? und, wie könnte ich dieses beispiel nun in jquery umsetzen?

danke und Gruß, Katjusha

[steffenk]

das geht mit jQuery wirklich einfacher. Minitutorial: http://www.electrictoolbox.com/jquer...t-form-values/

[Katjusha]

Sieht interessant aus. Danke dir...