resize جداول با کشیدن گوشه های آن

**AHMADBADPEY**

سلام
دوستان چه جوری میشه بوسیله جاوااسکریپت یک جدول رو با کشیدن گوشه های اون تغییر اندازه داد . مثه پنجره های خود ویندوز !!!
mer30

**oia**

این کار رو با جاوااسکریپت و CSS انجام پذیره
سعی می کنم یه کد گیر بیارم...

**php**

یه طرح ساده برای این کار نوشتم که با کشیدن جدول اندازه اون تغییر می کنه .

کد PHP: 

<!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>
</head>

<script type="text/javascript">
    var curobj,x,y,t,l,yy,xx; 
    
document.onmousedown=changeclass
function changeclass(evt)
{
    evt=evt?evt:event
    target=evt.target?evt.target:evt.srcElement;
    if (target.tagName=='TABLE')
    {
          curobj=target;
           document.onmousemove=drag;
    }

}

function drag(evt){

    evt=evt?evt:event;
    curobj.style.width=evt.clientX;
    curobj.style.height=evt.clientY;
    document.onmouseup=up;
}

function up(){

        document.onmosemove=null;
        curobj=null;
}


</script>
<body>
<table width="200" border="1" >
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

</body>

</html> 

**AHMADBADPEY**

با تشکر
خیلی خوب و جالب بود . اما مشکلی که داره اینه که فقط تویIE کار می کنه . اگه بشه با CSS هم کاری کنیم که با اومدن mouse روی border هاش نمایشگر ماوس به حالت resize در بیاد عالیه . خودم هم دارم دستکاریش می کنم

**php**

درسته با firefox مشکل داشت که رفعش کردم .

مشلش به خاطر این بود که موقعی که مختصات موس رو به جدول می دادم نوع اعداد رو مشخص نکرده بودم که حل شد در مورد شمل موس هم درستش کردم .

کد PHP: 

<!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>
</head>

<script type="text/javascript">
    var curobj,x,y,t,l,yy,xx; 
    
document.onmousedown=changeclass
function changeclass(evt)
{
    evt=evt?evt:event
    target=evt.target?evt.target:evt.srcElement;

    if (target.tagName=='TABLE')
    {
          curobj=target;
           document.onmousemove=drag;
            curobj.style.cursor='move';
    }

}

function drag(evt){

    evt=evt?evt:event;
    curobj.style.width=evt.clientX+'px';
    curobj.style.height=evt.clientY+'px';
    
    document.onmouseup=up;
}

function up(){

        document.onmosemove=null;
        curobj.style.cursor='default';
        curobj=null;
        
}


</script>
<body>
<table width="200" border="1" >
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

</body>

</html> 

کاملش که کردی کدش رو حتما اینجا قرار بدی .

**oia**

حسین عزیز این چطوری کار می کنه؟
من فهمیدم که با jQuery کارای خوبی می شه کرد هرچند که خیلی سادست اما من jQuery بلند نیستم علی رغم سادگی زیادش
این دست محمد یا صالح رو می بوسه Wink

من خودم سعی کردم یه چیزی بنویسم و این فقط در حد سعی باقی موند
اما توی گوگل می شه کد های زیادی پیدا کرد
واقعآ نتایج زیاد بود مثلآ http://www.switchonthecode.com/tutorials...-textboxes و نتایجی از این قبیل

**php**

محمد جان منظورت این هست که کد کار نمی کنه یا اینکه کد رو توضیح بدم ؟

**oia**

حسین عزیم، یا اینکه توضیح بدین چطور استفاده کنم Wink

**php**

استفاده از این کد که کاری نداره فقط لزمه کد رو کپی کنی داخل یک صفحه و بعد اجراش کنی با کشیدن گوشه های جدول می تونی اندازه های اون رو تغییر بدی و حالا با تغییر اون به شکل یک پنجره و گذاشتن بعضی محدودیت ها روی اون میشه اون رو به یه پنجره تبدیل کرد که قابلیت تغییر اندازه داره .

**oia**

بله درست میگی

حالت موضوعی \| حالت خطی resize جداول با کشیدن گوشه های آن
نویسنده	پیام