چطور میشه با تابع جاوااسکریپت یک المنت html رو بصورت داینامیک تو یه مختصات خاص صفحه ایجاد کرد ؟
Printable View
چطور میشه با تابع جاوااسکریپت یک المنت html رو بصورت داینامیک تو یه مختصات خاص صفحه ایجاد کرد ؟
منظورتون رو کاملتر بگید لطفا
از فایل خارجی میخواید این کارو کنید یا از محتوای داخلی؟
با ajax میشه این کارا رو کرد
[HTML]<html>
<head>
<title>Title of Page</title>
<script language="javascript">
function addElement() {
var ni = document.getElementById('test');
var newdiv = document.createElement('div');
newdiv.setAttribute('id','test2');
newdiv.innerHTML = 'test2';
newdiv.style.position='absolute';
newdiv.style.top='100';
newdiv.style.left='100';
ni.appendChild(newdiv);
}
function removeElement() {
var d = document.getElementById('test');
var olddiv = document.getElementById('test2');
d.removeChild(olddiv);
}
</script>
</head>
<body >
<button onClick="addElement()">create</button>
<button onClick="removeElement()">remove</button>
<div id="test" ></div>
</body>
</html>[/HTML]
همین کد بسیار عالی بود.
این کد تو ie کار می کنه ولی تو firefox همه ی دکمه های جدید رو رو هم میزاره انگار نه انگار که مختصات دادم بهش ولی تو ie درسته واسه فایر فاکس چه می شه کرد ؟ اینجا دکمه اولیه رو دراگ کنید تو مسطیله بعد دارپ کنیدش !!!!کد:function h_drop()
{
if(is_drag==1)
{
if(draged_item_id=="button1")
{
var ni = document.getElementById('scene');
var newel = document.createElement('button');
var str = 'button'+ counter;
newel.setAttribute('id',str);
newel.innerHTML = str;
newel.style.position='absolute';
newel.style.top=mouseY;
newel.style.left=mouseX;
//alert(newel.style.top);
ni.appendChild(newel);
counter = counter+1;
draged_item_id="empty";
//alert(newel.style.top);
}
}
is_drag=0;
}
کد کامل
کد:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
var draged_item_id;
var counter = 10 ;
var mouseX, mouseY;
// MOUSE SECTION
{
function getMousePos(e)
{
if (!e)
var e = window.event||window.Event;
if('undefined'!=typeof e.pageX)
{
mouseX = e.pageX;
mouseY = e.pageY;
}
else
{
mouseX = e.clientX + document.body.scrollLeft;
mouseY = e.clientY + document.body.scrollTop;
}
}
// You need to tell Mozilla to start listening:
if(window.Event && document.captureEvents)
document.captureEvents(Event.MOUSEMOVE);
// Then assign the mouse handler
document.onmousemove = getMousePos;
// Then your mouseover function can just read mouseX and mouseY directly.
}
// END MOUSE SECTION
var is_drag;
function h_drag(ids)
{
is_drag = 1;
draged_item_id = ids;
}
function h_drop()
{
if(is_drag==1)
{
if(draged_item_id=="button1")
{
var ni = document.getElementById('scene');
var newel = document.createElement('button');
var str = 'button'+ counter;
newel.setAttribute('id',str);
newel.innerHTML = str;
newel.style.position='absolute';
newel.style.top=mouseY;
newel.style.left=mouseX;
//alert(newel.style.top);
ni.appendChild(newel);
counter = counter+1;
draged_item_id="empty";
//alert(newel.style.top);
}
}
is_drag=0;
}
</script>
</head>
<body id="scene" onmouseup="h_drop()" onmouseover="this.style.cursor='crosshair';">
<table width="1267" height="570" border="3">
<tr>
<td width="1025" id="scen2e" onmouseup="h_drop()" onmouseover="this.style.cursor='crosshair';">
</td>
<td width="222"><table width="223" height="405" border="3">
<tr>
<td><button id="button1" onmousedown="h_drag(this.id)" >BUTTON</button> </td>
</tr>
<tr>
<td><input id="checkbox1" type="checkbox" onmousedown="h_drag(this.id)"disabled="disabled"/> </td>
</tr>
<tr>
<td><input title="password field" type="password" id="password1" onmousedown="h_drag(this.id)"disabled="disabled"/> </td>
</tr>
<tr>
<td> <input type="text" id="text1" title="text area" onmousedown="h_drag(this.id)"disabled="disabled"/></td>
</tr>
<tr>
<td> <input type="radio" name="radio" id="radio1" onmousedown="h_drag(this.id)" disabled="disabled" /> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
با برداشتن این مزخرفات فایرفاکس هم درست جواب داد. کسی نیست بگه اینا چین ؟
کد:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
به این می گن Doctype. علتی که اینا می زارن اینه که اگه نباشه مرورگر به حالت رندرینگ Quirks می ره و می شه مثل IE عهد بوق. اطلاعات بیشتر:نقل قول:کد:http://www.alistapart.com/articles/doctype/