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

AHMADBADPEY · ۱۳۸۸ خرداد ۳۱, ۰۶:۴۱ ب.ظ

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

**oia** · ۱۳۸۸ خرداد ۳۱, ۰۷:۴۲ ب.ظ

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

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 مشکل داشت که رفعش کردم .

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

کد پی‌اچ‌پی:
<!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** · ۱۳۸۸ تير ۰۱, ۰۷:۳۷ ب.ظ

بله درست میگی

ورود




مرا به‌خاطر بسپار. فراموشی رمزعبور