1
我正在開發一個Web應用程序，它允許您將可調整大小並可通過jQuery拖動的動態div添加到具有黑色背景的div容器中。調整div大小時調整字體大小
下面是這個應用程序的代碼：
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height : 768px;
width : 432px;
background-color : #000000;
}
.menu {
border:1px solid black;
padding-left:15px;
padding-right:15px;
padding-top:2px;
padding-bottom:2px;
float:left;
text-align : center;
}
h3, li, ul{
text-align : left;
}
.encadrer {
border: 1px solid white;
height : 120px;
position:absolute !important;
}
.centrerTitre{
position: absolute;
top: 0;
left: 0;
right: 0;
color : white;
margin : auto;
text-align : center;
padding-top : 7px;
}
.centrerPara{
font-size: 16;
color : white;
margin : auto;
text-align : center;
padding-left : 7px;
padding-right : 7px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
/*----- Resizable ------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-nw { cursor: nw-resize; height: 7px; width: 7px; top: -5px; left: -5px; }
.ui-resizable-se { cursor: se-resize; height: 7px; width: 7px; right: -5px; bottom: -5px; }
.ui-resizable-ne { cursor: ne-resize; height: 7px; width: 7px; top: -5px; right: -5px; }
.ui-resizable-sw { cursor: sw-resize; height: 7px; width: 7px; left: -5px; bottom: -5px; }
/*----------------------*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Affichage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<body>
<div id="menu" class="menu">
<h3>Taille de l'écran</h3>
<select id='selector'>
<option value="1920x1080">1920x1080</option>
</select>
</br></br>
<table>
<tr>
<td><input type="radio" id="portrait" name="orientation" value="portrait" checked="checked">Portrait</td>
<td><input type="radio" id="paysage" name="orientation" value="paysage">Paysage</td>
</tr>
</table>
</br>
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
<script type="text/javascript">
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
var rad = document.getElementsByName('orientation');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = tailleEcran;
}
document.getElementById("selector").addEventListener("change", tailleEcran, false);
ajoutImg.onclick = function() {
//var name = prompt("Texte de l'image :");
var container = document.createElement("div");
container.className = 'encadrer';
var inner = document.createElement("div");
inner.className = 'inner';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
inner.appendChild(titre);
para.textContent = prompt("Texte de l'image :");;
para.className = 'centrerPara';
inner.appendChild(para);
container.appendChild(inner);
//var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
bg.appendChild(container);
$(container)
.draggable({containment:"parent"})
.resizable({
containment:"parent",
handles: "all"
});
};
function tailleEcran() {
switch(document.getElementById("selector").value){
case '1920x1080' :
if(document.getElementById("portrait").checked == true){
bg.style.height = '768px';
bg.style.width = '432px';
}else{
bg.style.height = '432px';
bg.style.width = '768px';
}
break;
}
}
</script>
</body>
</html>我試圖做出動態調整大小div的內容的字體大小，當你調整div，因爲你可以在這個帖子看到：
Can text be resizable using jquery-ui?
我把所有的節點都放到了變量中，但是我沒有把這個函數添加到我的應用中。
有人知道我該怎麼做？
感謝您的關注，
問候，
馬克西姆OZENNE。
我寫了一個jquery插件很久以前做了這個，檢查出來 - https://github.com/ozzyogkush/jquery.textAutoSize - 有一段時間沒有更新，但工作得很好，當我寫了它。 – Derek
我會檢查它，並給你反饋，謝謝:) –
實際上看它的代碼，它不做調整大小，但可以很容易地分叉和更新工作就像那樣。 – Derek