Opmaak php
Ik heb een formuliertje gemaakt die de bezoekers kunnen invullen en 1 van de keuzes die ze moeten maken is een lettertype. Nu had ik een selectie menu gemaakt met de verschillende lettertypes maar had graag bgehad dat in dit keuze menu ook de keuze in dit lettertype vermeld stond. Ik had dit dus zo geprobeert:
Code (php)
1
2
3
2
3
<?php
<option style="font-family: Arial ">Arial</option>
?>
<option style="font-family: Arial ">Arial</option>
?>
maar dit werkt niet. Iemand een iedee hoe ik dit kan oplossen, "als het mogelijk is natuurlijk".
Common controls zijn vaak lastig te stylen.
Mijn eerste idee zou zijn om een eigen soort <select> te maken.
bv. radio boxes in een container met "overflow: auto".
Iets wat een beetje aanvoelt als een select. De caption die je naast die radio's zet, kan wel gestyle't worden zoals je wil.
Offtopic:
Opmaak PHP is niks. PHP is wordt op de server uitgevoerd en opmaak (lees CSS) in de browser. Die weten niks van elkaar. PHP kan CSS echoën, maar dat is ook het enige.
Dit werkt dus ook als javascript uit staat; dan blijft het een gewone <select>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_POST);
exit;
}
?>
<style>
#radio_ul {
max-height: 200px;
width: 250px;
background-color: #ddddff;
overflow: auto;
}
#radio_ul input, #radio_ul label{
cursor: pointer;
}
#radio_ul li{
list-style: none;
margin-left: 0;
padding-left: 0;
}
</style>
<form method="post" action="">
<h3>Select Font</h3>
<select name="font" class="radio_select">
<option value="Arial">Arial</option>
<option value="Georgia, serif">Georgia, serif</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
</select>
<input type="submit" value="GO">
</form>
<script>
(function() {
var radioSelects = getElementsByClassName(document, 'radio_select');
var options = radioSelects[0];
// add <ul>
var ul=document.createElement("UL");
ul.setAttribute('id', 'radio_ul')
// radioSelects[0].parentNode.appendChild(ul);
radioSelects[0].parentNode.insertBefore(ul,radioSelects[0])
var output = '';
for (var i=0; options[i]; i++) {
output += '<li style="font-family: ' + options[i].value + '"><input onclick="select_radio(this, event);" class="radio_option" type="radio" ' + (i==0 ? 'checked="checked" ' : '') + 'value="' + options[i].value + '" id="' + radioSelects[0].name +'_'+ i + '" name="' + radioSelects[0].name + '"><label for="' + radioSelects[0].name +'_'+ i + '">' + options[i].innerHTML + '</label></li>';
}
ul.innerHTML = output;
// remove <select>
radioSelects[0].parentNode.removeChild(radioSelects[0]);
})();
function select_radio(elm, e) {
// doe hier eventueel iets
}
/***
* @see http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie
*/
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
tabs = getElementsByClassName(document.body,'tab'); // no document
</script>
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
print_r($_POST);
exit;
}
?>
<style>
#radio_ul {
max-height: 200px;
width: 250px;
background-color: #ddddff;
overflow: auto;
}
#radio_ul input, #radio_ul label{
cursor: pointer;
}
#radio_ul li{
list-style: none;
margin-left: 0;
padding-left: 0;
}
</style>
<form method="post" action="">
<h3>Select Font</h3>
<select name="font" class="radio_select">
<option value="Arial">Arial</option>
<option value="Georgia, serif">Georgia, serif</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Verdana">Verdana</option>
<option value="Impact">Impact</option>
</select>
<input type="submit" value="GO">
</form>
<script>
(function() {
var radioSelects = getElementsByClassName(document, 'radio_select');
var options = radioSelects[0];
// add <ul>
var ul=document.createElement("UL");
ul.setAttribute('id', 'radio_ul')
// radioSelects[0].parentNode.appendChild(ul);
radioSelects[0].parentNode.insertBefore(ul,radioSelects[0])
var output = '';
for (var i=0; options[i]; i++) {
output += '<li style="font-family: ' + options[i].value + '"><input onclick="select_radio(this, event);" class="radio_option" type="radio" ' + (i==0 ? 'checked="checked" ' : '') + 'value="' + options[i].value + '" id="' + radioSelects[0].name +'_'+ i + '" name="' + radioSelects[0].name + '"><label for="' + radioSelects[0].name +'_'+ i + '">' + options[i].innerHTML + '</label></li>';
}
ul.innerHTML = output;
// remove <select>
radioSelects[0].parentNode.removeChild(radioSelects[0]);
})();
function select_radio(elm, e) {
// doe hier eventueel iets
}
/***
* @see http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie
*/
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
tabs = getElementsByClassName(document.body,'tab'); // no document
</script>
Dat kan eventueel uitgebreid worden, bv. zodat de box in- en uit klapt bij mouseOver, ...
Gewijzigd op 24/01/2013 22:48:20 door Kris Peeters