bouton collé a un onglet

**ricault** · 14/06/2007, 13h28

bonjour tout le monde y'a un truc que je ne comprend pas :

il s'agit d'un onglet auquel je veux rajouter un bouton. Pour que le bouton soit "coller" à l'onglet je le déclare en fils.
voila le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id='menu-onglets' >
         <a id='next'  >nouvel onglet</a>	
</div>

dans ma partie javascript je fais ça (rajout d'un bouton a cet onglet ):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
/* déclaration du bouton */ 
var butone =  document.createElement("input");
butone.setAttribute("id","button");
butone.setAttribute("type","button");
butone.className='onglet_button';
 
/* je ratache le bouton a l'onglet */ 
var tem = document.getElementById('next');
tem.appendChild(butone);

dans ma partie css je mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
a.onglet_actif input.onglet_button{		
margin-bottom:77px;
margin-left:55px;		
width:2px;
height:2px;
background: aqua;		
}

au faite la classname de onglet c'est "onglet_actif" et le bouton que je veux placé ne répond en rien a ce qu'il y'a dans la partie css
quelqun à une idée ?

**SpaceFrog** · 14/06/2007, 13h51

ça relève plutot du css ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a id='next'  style="float:left;" >nouvel onglet</a>

**ricault** · 14/06/2007, 13h54

ça releve plutot du css

j'ai pas compris il faut que je mmodifie le css ??

**SpaceFrog** · 14/06/2007, 13h57

non rajoute juste le style dans ta balise a

**ricault** · 14/06/2007, 13h59

j'ai fais ça a tout cassé !!

**SpaceFrog** · 14/06/2007, 14h00

ben fait un clear:both dasn la balise bouton ...

**ricault** · 14/06/2007, 14h04

voila pour plus de détailles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
 
	window.onload=function(){
		var generalite = document.getElementById('menu-onglets');
		generalite.className='menu-onglets';
 
		var element3 =document.getElementById('next');
		element3.className='prochain-onglet';
		add_event(element3,addfenetre);
	}
 
	window.ondragdrop=function(){
	//evenement link to url
	}
 
	window.onunload=function(){
	//dépose un cookie
	}
 
	function addfenetre(){
		var aut = document.createElement("input");
		aut.setAttribute("id",'champ');
 
		aut.setAttribute("type",'text');
		add_event2(aut,rmv_fen_addonglet)
 
		var te = document.getElementById('menu-onglets');
		te.appendChild(aut);
	}
 
	function rmv_fen_addonglet(){
		var fenetre = document.getElementById('champ');
		var saisie = fenetre.value;
		if(saisie!=null && saisie!=''){
			var butone =  document.createElement("input");
			butone.setAttribute("id","button");
			butone.setAttribute("type","button");
			butone.className='onglet_button';
 
			var tem = document.getElementById('next');
			var child = document.createElement("a");
 
			child = tem.cloneNode(true);
 
			remove_event(tem,addfenetre);
			tem.innerHTML = saisie;
			tem.setAttribute("id","inactif");
			tem.className='onglets-inactifs';
			tem.appendChild(butone);
			add_event(tem,set_onglet_choisi);
 
			var te = document.getElementById('menu-onglets');
 
			te.replaceChild(child,fenetre);
		}
		else if(saisie==null ^ saisie==''){
			var te = document.getElementById('menu-onglets');
			te.removeChild(fenetre);
		}
	}
 
	function set_onglet_choisi(event){
		var te = document.getElementById('menu-onglets');
		children=te.childNodes;
		for (var i=0; i<children.length; i++) {
 			if (children[i].className=='onglet-actif'){
 				children[i].className='onglets-inactifs';
 				children[i].setAttribute("id","inactif");
 			}
		}
		var target=event.srcElement;
		target.className='onglet-actif';
		target.setAttribute("id","actif");
	}
 
  	function add_event(element,fonction){
		if (element.addEventListener){
  			element.addEventListener('click', fonction, false);
		}
		else if (element.attachEvent){
    		element.attachEvent('onclick', fonction);
    	}
	}
 
	function remove_event(element,fonction){
		if (element.removeEventListener){
  			element.removeEventListener('click', fonction, false);
		}
		else if (element.detachEvent){
    		element.detachEvent('onclick', fonction);
    	}
	}
 
	function add_event2(element,fonction){
		if (element.addEventListener){
  			element.addEventListener('onblur', fonction, false);
		}
		else if (element.attachEvent){
    		element.attachEvent('onblur', fonction);
    	}
	}
 
	function remove_event2(element,fonction){
		if (element.removeEventListener){
  			element.removeEventListener('onblur', fonction, false);
		}
		else if (element.detachEvent){
    		element.detachEvent('onblur', fonction);
    	}
	}

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@CHARSET "ISO-8859-1";
	
	div.menu-onglets{
		font-weight:bold;
		
  		border-bottom-color:red; 
  		border-bottom-style:solid;
  		border-bottom-width:1px;
  		padding-bottom:2px;
  		
  		border-left-color:white ;
  		border-left-style:solid ;
  		border-left-width:1px ;
  		padding-left: 2px;
  		
  		border-top-color:white ;
  		border-top-style:solid ;
  		border-top-width:1px ;
  		padding-top: 2px;
  	}
		
	/* Onglets actifs :*/
	a.onglet-actif{
		margin: 5px;
		  
  		border-bottom-style:solid;
  		border-bottom-color: white;
  		
  		border-left-color:red ;
  		border-left-style:solid ;
  		border-left-width:1px ;
 		padding-left: 20px;
  		
  		border-right-color:red ;
  		border-right-style:solid ;
  		border-right-width:1px ;
  		padding-right: 20px;
  		
  		border-top-color:red ;
  		border-top-style:solid ;
  		border-top-width:1px ;
  		padding-top: 2px;
  	}
  	
  	/* Onglets inactifs :*/	
  	a.onglets-inactifs{
  		margin: 5px;
  	}
  		
    /* Prochain onglet :*/	
  	a.prochain-onglet{
  		margin: 5px;
  		background-color:threedlightshadow;
  		font-weight:normal;
  	}
  	
  	/* Bouton accompagant les onglets :position ,taille, apparence :*/
  	 a.input.onglet_button{
  		
		margin-bottom:77px;
		margin-left:55px;
		
		width:2px;
		height:2px;
		background: aqua;
  	}

page de départ : (jsp):

	
	Code  :
	Sélectionner tout -
	Visualiser dans une fenêtre à part
	1234567891011121314 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_sheet.css" />
<script type="text/javascript" src="manipulation_dom.js"></script>
</head>
<body>
      <div id='menu-onglets' >
             <a id='next' style="float:left;"  >nouvel onglet</a>	
      </div>
</body>
</html>

**ricault** · 14/06/2007, 15h33

au faite c'est bon j'ai trouver

on declare le bouton comme fils de l'onglet et :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
  	 input.onglet_button{
  		margin-bottom:10px;
		width:10px;
		height:10px;
		background:blue;
  	}

merci pour tout c'est cool de filer un coup de main

**SpaceFrog** · 14/06/2007, 15h34

au moins j'ai pu t'orienter vers le css ...

bouton collé a un onglet

JavaScript

Discussions similaires

Partager

Partager