• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
resize جداول با کشیدن گوشه های آن
#1
سلام
دوستان چه جوری میشه بوسیله جاوااسکریپت یک جدول رو با کشیدن گوشه های اون تغییر اندازه داد . مثه پنجره های خود ویندوز !!!
mer30
  پاسخ
تشکر شده توسط : iapple
#2
این کار رو با جاوااسکریپت و CSS انجام پذیره
سعی می کنم یه کد گیر بیارم...
  پاسخ
تشکر شده توسط : AHMADBADPEY iapple
#3
یه طرح ساده برای این کار نوشتم که با کشیدن جدول اندازه اون تغییر می کنه .

کد پی‌اچ‌پی:
<!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 molana
#4
با تشکر
خیلی خوب و جالب بود . اما مشکلی که داره اینه که فقط تویIE کار می کنه . اگه بشه با CSS هم کاری کنیم که با اومدن mouse روی border هاش نمایشگر ماوس به حالت resize در بیاد عالیه . خودم هم دارم دستکاریش می کنم
  پاسخ
تشکر شده توسط :
#5
درسته با 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

کاملش که کردی کدش رو حتما اینجا قرار بدی .
  پاسخ
تشکر شده توسط : molana
#6
حسین عزیز این چطوری کار می کنه؟
من فهمیدم که با jQuery کارای خوبی می شه کرد هرچند که خیلی سادست اما من jQuery بلند نیستم علی رغم سادگی زیادش
این دست محمد یا صالح رو می بوسه Wink
من خودم سعی کردم یه چیزی بنویسم و این فقط در حد سعی باقی موند
اما توی گوگل می شه کد های زیادی پیدا کرد
واقعآ نتایج زیاد بود مثلآ http://www.switchonthecode.com/tutorials...-textboxes و نتایجی از این قبیل
  پاسخ
تشکر شده توسط :
#7
محمد جان منظورت این هست که کد کار نمی کنه یا اینکه کد رو توضیح بدم ؟
  پاسخ
تشکر شده توسط :
#8
حسین عزیم، یا اینکه توضیح بدین چطور استفاده کنم Wink
  پاسخ
تشکر شده توسط :
#9
استفاده از این کد که کاری نداره فقط لزمه کد رو کپی کنی داخل یک صفحه و بعد اجراش کنی با کشیدن گوشه های جدول می تونی اندازه های اون رو تغییر بدی و حالا با تغییر اون به شکل یک پنجره و گذاشتن بعضی محدودیت ها روی اون میشه اون رو به یه پنجره تبدیل کرد که قابلیت تغییر اندازه داره .
  پاسخ
تشکر شده توسط :
#10
بله درست میگی
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان