pb resizable jquery

**amine.h** · 11/07/2009, 09h00

Bonjour,
j'ai essayé de faire une fonction resaizable, mais ca veut pas marché

Code html :

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
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Resizable - Default functionality</title>
	<link type="text/css" href="ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript" src="ui.core.js"></script>
	<script type="text/javascript" src="ui.resizable.js"></script>
	<link type="text/css" href="demos.css" rel="stylesheet" />
	<style type="text/css">
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        </style>
	<script type="text/javascript">
        $(function() {
                $("#resizable").resizable();
        });
        </script>
</head>
<body>
<div class="demo">
 
<div id="resizable" class="ui-widget-content">
	<h3 class="ui-widget-header">Resizable</h3>
</div>
 
</div><!-- End demo -->
 
 
</body>
</html>

**danielhagnoul** · 11/07/2009, 10h54

Bonjour, il faut utiliser le plugin jQuery UI avec sa feuille de style, voir : http://jqueryui.com/ et http://jqueryui.com/download

Exemple :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
 
		/* RESIZABLE */
		#resizable {
			width: 150px;
			height: 150px;
			padding: 0.5em;
		}
		#resizable h3 {
			text-align: center;
			margin: 0;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#resizable").resizable();
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="resizable" class="ui-widget-content">
			<h3 class="ui-widget-header">Resizable</h3>
		</div>
		<div id="affiche"></div>
	</div>
</body>
</html>

**amine.h** · 11/07/2009, 11h16

ca marche, il manquer les fichiers css, merci beaucoup pour votre aide

pb resizable jquery

jQuery

Discussions similaires

Partager

Partager