Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen
Aus Stupidedia, der sinnfreien Enzyklopädie!
Phorgo (Diskussion | Beiträge) (Erster Prototyp) |
Phorgo (Diskussion | Beiträge) |
||
Zeile 40: | Zeile 40: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>Verschiedene Formatierungen:</td> |
<td> | <td> | ||
<input type="checkbox" name="font-weight" value="bold" id="pStyleGenerator-font-weight" /> | <input type="checkbox" name="font-weight" value="bold" id="pStyleGenerator-font-weight" /> | ||
Zeile 273: | Zeile 273: | ||
</tr> | </tr> | ||
<!-- | <!-- | ||
− | Abstände | + | Größe und Abstände |
--> | --> | ||
<tr> | <tr> | ||
− | <th colspan="2">Abstände | + | <th colspan="2">Größe und Abstände</th> |
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Breite:</td> | ||
+ | <td> | ||
+ | <input type="text" name="width" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Höhe:</td> | ||
+ | <td> | ||
+ | <input type="text" name="height" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Verhalten bei Übergröße des Inhalts:</td> | ||
+ | <td> | ||
+ | <select name="overflow"> | ||
+ | <option value="">(Automatisch)</option> | ||
+ | <option value="visible">Anzeigen</option> | ||
+ | <option value="hidden">Verstecken</option> | ||
+ | <option value="scroll">Scrollbalken anzeigen</option> | ||
+ | </select> | ||
+ | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
Zeile 347: | Zeile 370: | ||
</div> | </div> | ||
</td> | </td> | ||
+ | </tr> | ||
+ | <!-- | ||
+ | Position und Elementausrichtung | ||
+ | --> | ||
+ | <tr> | ||
+ | <th colspan="2">Position und Elementausrichtung</th> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
Zeile 367: | Zeile 396: | ||
<option value="both">Beides</option> | <option value="both">Beides</option> | ||
</select> | </select> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Positionierung:</td> | ||
+ | <td> | ||
+ | <select name="position"> | ||
+ | <option value="">(Keine)</option> | ||
+ | <option value="relative">Relativ</option> | ||
+ | <option value="absolute">Absolut</option> | ||
+ | <option value="fixed">Fixiert</option> | ||
+ | </select> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Links:</td> | ||
+ | <td> | ||
+ | <input type="text" name="left" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Rechts:</td> | ||
+ | <td> | ||
+ | <input type="text" name="right" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Oben:</td> | ||
+ | <td> | ||
+ | <input type="text" name="top" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Unten:</td> | ||
+ | <td> | ||
+ | <input type="text" name="bottom" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Ebenenposition:</td> | ||
+ | <td> | ||
+ | <input type="text" name="z-index" /> | ||
</td> | </td> | ||
</tr> | </tr> | ||
Zeile 374: | Zeile 444: | ||
<tr> | <tr> | ||
<th colspan="2">Generatorspezifisches</th> | <th colspan="2">Generatorspezifisches</th> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
Zeile 399: | Zeile 459: | ||
<input type="radio" name="generator-output" value="file" id="pStyleGenerator-generator-output-file" /> | <input type="radio" name="generator-output" value="file" id="pStyleGenerator-generator-output-file" /> | ||
<label for="pStyleGenerator-generator-output-file">CSS-Seite</label> | <label for="pStyleGenerator-generator-output-file">CSS-Seite</label> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Vorschau:</td> | ||
+ | <td> | ||
+ | <input type="radio" name="generator-display" value="block" checked="checked" id="pStyleGenerator-generator-display-block" /> | ||
+ | <label for="pStyleGenerator-generator-display-block">Kasten</label> | ||
+ | <br /> | ||
+ | <input type="radio" name="generator-display" value="inline" id="pStyleGenerator-generator-display-inline" /> | ||
+ | <label for="pStyleGenerator-generator-display-inline">Text innerhalb einer Zeile</label> | ||
</td> | </td> | ||
</tr> | </tr> | ||
Zeile 438: | Zeile 508: | ||
text-align: right; | text-align: right; | ||
padding-right: 10px; | padding-right: 10px; | ||
+ | width: 250px; | ||
} | } | ||
Zeile 491: | Zeile 562: | ||
'text-decoration', | 'text-decoration', | ||
'text-align', | 'text-align', | ||
+ | 'width', | ||
+ | 'height', | ||
+ | 'overflow', | ||
'padding', | 'padding', | ||
'padding-left', | 'padding-left', | ||
Zeile 552: | Zeile 626: | ||
}); | }); | ||
+ | // position | ||
+ | if (setProps['position'] !== undefined) { | ||
+ | $.each(['position', 'left', 'right', 'top', 'bottom', 'z-index'], function() { | ||
+ | var i = this.toString(); | ||
+ | if (setProps[i] !== undefined) { | ||
+ | formattedProps.push(i + ': ' + setProps[i] + ';'); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // Attribut-String erstellen | ||
var attr = formattedProps.join(' '); | var attr = formattedProps.join(' '); | ||
− | + | // Quelltext vorbereiten | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
switch (inputProps['generator-output']) { | switch (inputProps['generator-output']) { | ||
case 'div': | case 'div': | ||
Zeile 586: | Zeile 661: | ||
var output = ''; | var output = ''; | ||
if (formattedProps.length > 0) { | if (formattedProps.length > 0) { | ||
− | output += ' ' + formattedProps.join('\n | + | output += ' ' + formattedProps.join('\n '); |
} | } | ||
break; | break; | ||
} | } | ||
$('#pStyleGenerator-output').val(output); | $('#pStyleGenerator-output').val(output); | ||
+ | |||
+ | // Vorschau aktualisieren | ||
+ | if (inputProps['generator-display'] === 'block') { | ||
+ | $('#pStyleGenerator-blockPreview div').attr('style', attr); | ||
+ | $('#pStyleGenerator-blockPreview').show(); | ||
+ | $('#pStyleGenerator-inlinePreview').hide(); | ||
+ | } | ||
+ | else { | ||
+ | $('#pStyleGenerator-inlinePreview span').attr('style', attr); | ||
+ | $('#pStyleGenerator-inlinePreview').show(); | ||
+ | $('#pStyleGenerator-blockPreview').hide(); | ||
+ | } | ||
} | } | ||
Version vom 2. Oktober 2013, 14:36 Uhr
Formular
Vorschau
Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).
Dieser Text steht in dem Kasten, den du zu formatieren versuchst. Der kann beliebig lang sein.
Und dieser Text steht unterhalb des Kastens, wird also unter Umständen von der Textumflussangabe beeinflusst.
Mahlzeit! Dieser Text hier befindet sich vor der Zeile. Genau genommen in einem p-Element (das entspricht einem Absatz). Dies ist der Teil der Zeile, den du zu formatieren versuchst. Der kann beliebig lang sein. Und dieser Text steht unterhalb des Kastens, wird also unter Umständen von der Textumflussangabe beeinflusst.