امروز چهارشنبه ۱۴۰۰/۰۱/۲۵

2021/04/14 GMT +4:30

» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS

javascript-accordion-box

ساخت منوها و باکس های آکاردئونی (accordion) یا به اصطلاح جمع شونده، یکی از قابلیت هایی است که جاوا اسکریپت (JavaScript) و کتابخانه های زیرمجموعه آن مانند جی کئوری (jQuery) در اختیار برنامه نویسان و طراحان وب قرار می دهند، قابلیت تعاملی و زیبایی که این نوع منوها به رابط کاربری (Interface) سایت یا وبلاگ می دهد باعث می شود که خیلی از مدیران وب گرایش به سمت استفاده از آن داشته باشند، البته در این مورد باید همیشه به مقوله سازگاری، سرعت و سبکی صفحات دقت نمود، چرا که هرچند می توانیم جلوه های خیلی خاصی در صفحات وب ایجاد کنیم، اما باید توجه داشت که این جلوه ها سرعت بارگذاری و قابلیت سازگاری سایت یا وبلاگمان را در مرورگرها و سیستم های مختلف تحت تاثیر قرار ندهند، از این رو است که همیشه استفاده از کدهای کم حجم با بیشترین سازگاری توصیه می شود.

منظور از منوی آکاردئون چیست؟


منوی آکاردئونی در واقع برگرفته از نام واژه آکاردئون (accordion) و به معنی یک نوع ساز بادی معروف است، قسمتی از این ساز دارای یک مجاری عبور هوای فنر مانند و پله پله ای است که نوازنده برای نواختن آهنگ باید آن را با دست خود به طور متناوب حرکت دهد، این ساز قدمت زیادی داشته و در خیلی از فیلم ها و سریال ها معمولا به عنوان ساز بینوایان استفاده می شود! به خاطر شباهت این نوع منو با این ساز به آن آکاردئونی می گوییم.

کد جاوا اسکریپت برای ساخت باکس آکاردئونی


همان طور که گفتیم برای ساختن منوها و باکس های آکاردئونی یا به اصلاح جمع شونده، می توان از جاوا اسکریپت استفاده کرد، از این رو در زیر یکی از سبک ترین و در عین حال سازگارترین توابعی که بدین منظور نوشته شده را با هم بررسی می کنیم.
<script type="text/javascript">
//<![CDATA[
var contentHeight = 34;
var TimeToSlide = 300.0;
var openprobox = '';
function runprobox(index){
    var divID = "probox" + index + "content";
    if(openprobox == divID){
        divID = '';
    }
    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openprobox + "','" + divID + "')", 33);
    openprobox = divID;
}
function animate(lastTick, timeLeft, closingId, openingId){
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;
    var opening = (openingId == '') ? null : document.getElementById(openingId);
    var closing = (closingId == '') ? null : document.getElementById(closingId);
    
    if(timeLeft <= elapsedTicks){
        if(opening != null){
            opening.style.height = contentHeight + 'px';
        }
        if(closing != null){
            closing.style.display = 'none';
            closing.style.height = '0px';
        }
    return;
    }
    timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft/TimeToSlide) * contentHeight);
  if(opening != null){
      if(opening.style.display != 'block'){
          opening.style.display = 'block';
      }
      opening.style.height = (contentHeight - newClosedHeight) + 'px';
  }
  if(closing != null){
      closing.style.height = newClosedHeight + 'px';
  }
  setTimeout("animate(" + curTick + "," + timeLeft +",'" + closingId + "','" + openingId + "')", 33);
}
//]]>
</script>
اگرچه درک صحیح عملکرد این کد نیازمند تجربه نسبی و کار با جاوا اسکریپت است، اما بد نیست برای آگاهی بیشتر هم که شده، نگاهی اجمالی به کد بالا داشته باشیم.
توضیح:
- در قسمت متغیر contentHeight در ابتدای کد، ارتفاع بلاک محتوا را به پیکسل مشخص می کنیم، این همان بلاکی است که محتویات هر منو را در خود نمایش می دهد.
- در متغیر TimeToSlide میزان زمان (به میلی ثانیه) را برای شروع و پایان انیمیشن تعیین می کنیم، هر چه این زمان بیشتر باشد، سرعت انمیشن کندتر و میزان فرم های بیشتری ایجاد می شود (توصیه می شود مقادیر پیش فرض را تغییر ندهید).
- تابع runprobox در کد بالا، یک عدد به عنوان آرگومان می پذیرد، این عدد در واقع در هنگام فراخوانی تابع (که در ادامه خواهیم دید) برای هر بلاک متفاوت خواهد بود، به این ترتیب تابع قادر خواهد بود تا بلاک هدف را از سایر موارد شناسایی کند.
- setTimeout در توابع بالا نقش یک وقفه را بازی می کند، به این ترتیب که با فراخوانی تابع animate در زمان های متوالی، بین فرم ها وقفه های خیلی کوتاهی ایجاد می شود تا در نهایت حاصل کار به شکل یک انیمیشن به نمایش درآید.
- تابع animate نیز به عنوان موتور کد عمل کرده و با دریافت چهار آرگومان و بررسی آنها، در نهایت انیمیشن را خلق می کند، در این تابع متغیر curTick زمان فعلی، elapsedTicks میزان اختلاف بین آخرین اجرای تابع animate و زمان فعلی و متغیر opening و closing نیز مقادیر id بلاک هدف را در خود دارند.
- همان طور که ملاحظه می کنید تابع animate برای کنترل استایل و ویژگی های css بلاک ها از متد style و object استفاده می کند، به طور مثال opening.style.height ارتفاع بلاک opening را تعیین می کند یا closing.style.display نوع display بلاک closing را مشخص می کند.
نکته: این کد با وجود حجم بسیار کم، تقریبا با تمام مرورگرها سازگار است، از جمله اینترنت اکسپلورر 6 و مابعد، فایرفاکس، گوگل کروم، اپرا، سافاری و...

کد css منوی آکاردئونی


برای اینکه منوهای ما به درستی کار کنند، علاوه بر کد جاوا اسکریپت، به استایل css و کلاس های آن نیازمندیم، بدین منظور استایل زیر را نیز باید در صفحه خود وارد کنیم (به صورت یک فایل خارجی و یا به صورت درون صفحه ای).
<style type="text/css">
.proboxtitle, .proboxcontent, .proboxmain{
    position:relative;
}
.proboxtitle{
    width:200px;    
    height:25px;
    overflow:hidden;
    text-align:right;
    display:block;
    cursor:pointer;
    background-color:#666;
    color:#FFF;
    direction:rtl;
    padding:4px;
    text-align:center;
    border-bottom:1px dashed #CCC;    
}
.proboxcontent{
    width:200px;    
    height:auto;
    overflow:hidden;
    display:none;
    background-color:#F8F8F8;
    padding:4px;
    direction:rtl;
}
.proboxmain{
    border:1px solid #F0F0F0;
    width:208px;    
}
</style>
همان طور که ملاحظه می کنید، کد css بالا سه کلاس دارد که با آن، ویژگی ها و خواص ظاهری سه بلاک را در صفحه کنترل می کنیم، همچنین برخی موارد در استایل بالا قابل تغییر و برخی نیز به نحوه عملکرد برنامه مربوط بوده و غیر قابل تغییر هستند.

نحوه استفاده از منوی آکاردئونی


برای استفاده از کدهای بالا، در نهایت باید منو و باکس ها را در بلاک های div تعریف کنیم، برای نمونه مثال زیر می تواند راهنمای ما باشد.
<div id="proboxmain" class="proboxmain">
<!-- منوی شماره 1 -->
  <div class="proboxtitle" onclick="runprobox(1);">
  تیتر باکس 1
  </div>
  <div id="probox1content" class="proboxcontent">
  محتوای باکس آکاردئونی 1
  </div>
<!-- منوی شماره 2 -->  
  <div class="proboxtitle" onclick="runprobox(2);">
  تیتر باکس 2
  </div>
  <div id="probox2content" class="proboxcontent">
  محتوای باکس آکاردئونی 2
  </div>
<!-- منوی شماره 3 -->  
  <div class="proboxtitle" onclick="runprobox(3);">
  تیتر باکس 3
  </div>
  <div id="probox3content" class="proboxcontent">
  محتوای باکس آکاردئونی 3
  </div>
<!-- منوی شماره 4 -->  
  <div class="proboxtitle" onclick="runprobox(4);">
  تیتر باکس 4
  </div>
  <div id="probox4content" class="proboxcontent">
  محتوای باکس آکاردئونی 4
  </div>
</div>
توضیح:
- در مثال بالا، ابتدا یک بلاک اصلی با کلاس و آی دی proboxmain تعریف می کنیم، این بلاک تمام محتوای منوهای ما را در برمی گیرد.
- سپس برای هر منو، یک بلاک با کلاس proboxtitle و به همراه رویداد onclick تعریف می کنیم که تیتر منوها را در خود جای می دهد، این بلاک وظیفه فراخوانی تابع runprobox را دارد و یک عدد به عنوان آرگومان به تابع مذکور ارسال می کند، این عدد باید بین منوهای مختلف متفاوت و یکتا باشد تا برنامه بتواند بلاک مورد نظر را شناسایی کند.
- سپس در بلاک دیگری با آی دی و کلاس proboxcontent محتوای باکس خود را قرار می دهیم، در اینجا باید دقت کنید که برای آی دی،  بعد از عبارت probox عدد آرگومان را قرار داده و سپس عبارت content را اضافه کنید، به فرض اگر آرگومان تابع runprobox عدد 3 باشد، آی دی بلاک محتوا باید به صورت probox3content تنظیم شود.

مثال و پیش نمایش آنلاین


برای بررسی و تست برنامه، می توانید از مثال و پیش نمایش آنلاین زیر استفاده کنید.
<!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>وبگو | باکس آکاردئونی با جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.proboxtitle, .proboxcontent, .proboxmain{
    position:relative;
}
.proboxtitle{
    width:200px;    
    height:25px;
    overflow:hidden;
    text-align:right;
    display:block;
    cursor:pointer;
    background-color:#666;
    color:#FFF;
    direction:rtl;
    padding:4px;
    text-align:center;
    border-bottom:1px dashed #CCC;    
}
.proboxcontent{
    width:200px;    
    height:auto;
    overflow:hidden;
    display:none;
    background-color:#F8F8F8;
    padding:4px;
    direction:rtl;
}
.proboxmain{
    border:1px solid #F0F0F0;
    width:208px;    
}
</style>
<script type="text/javascript">
//<![CDATA[
var contentHeight = 34;
var TimeToSlide = 300.0;
var openprobox = '';
function runprobox(index){
    var divID = "probox" + index + "content";
    if(openprobox == divID){
        divID = '';
    }
    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openprobox + "','" + divID + "')", 33);
    openprobox = divID;
}
function animate(lastTick, timeLeft, closingId, openingId){
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;
    var opening = (openingId == '') ? null : document.getElementById(openingId);
    var closing = (closingId == '') ? null : document.getElementById(closingId);
    
    if(timeLeft <= elapsedTicks){
        if(opening != null){
            opening.style.height = contentHeight + 'px';
        }
        if(closing != null){
            closing.style.display = 'none';
            closing.style.height = '0px';
        }
    return;
    }
    timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft/TimeToSlide) * contentHeight);
  if(opening != null){
      if(opening.style.display != 'block'){
          opening.style.display = 'block';
      }
      opening.style.height = (contentHeight - newClosedHeight) + 'px';
  }
  if(closing != null){
      closing.style.height = newClosedHeight + 'px';
  }
  setTimeout("animate(" + curTick + "," + timeLeft +",'" + closingId + "','" + openingId + "')", 33);
}
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیرفعال است یا پشتیبانی نمی شود!<br />
</noscript>

<div id="proboxmain" class="proboxmain">
<!-- منوی شماره 1 -->
  <div class="proboxtitle" onclick="runprobox(1);">
  تیتر باکس 1
  </div>
  <div id="probox1content" class="proboxcontent">
  محتوای باکس آکاردئونی 1
  </div>
<!-- منوی شماره 2 -->  
  <div class="proboxtitle" onclick="runprobox(2);">
  تیتر باکس 2
  </div>
  <div id="probox2content" class="proboxcontent">
  محتوای باکس آکاردئونی 2
  </div>
<!-- منوی شماره 3 -->  
  <div class="proboxtitle" onclick="runprobox(3);">
  تیتر باکس 3
  </div>
  <div id="probox3content" class="proboxcontent">
  محتوای باکس آکاردئونی 3
  </div>
<!-- منوی شماره 4 -->  
  <div class="proboxtitle" onclick="runprobox(4);">
  تیتر باکس 4
  </div>
  <div id="probox4content" class="proboxcontent">
  محتوای باکس آکاردئونی 4
  </div>
</div>
<hr />
برای بررسی ویژگی های منو، بر روی یکی از آیتم ها کلیک کنید.
</body>
</html>
پیش نمایش
دسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ساخت افکت رنگی با جاوا اسکریپت (JavaScript)
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS
» ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
commentنظرات (۳۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محسن
۱۱:۵۱ ۱۳۹۵/۰۳/۳۱
سلام و عرض ادب
بابت تمام زحمات شما متشکرم
سوالی که برای اکثر دوستان پیش اومده (افزایش ارتفاع به مقدار نیاز، یعنی ارتفاع رو ما تعیین نکنیم) :
کافی هست که بجای مقدار :
opening.style.height = contentHeight + 'px';

مقدار زیر را درج کنید :
opening.style.display = 'block';
opening.style.height = 'auto';
مقدار اول در کد دوبار تکرار شده و باید هر دو ویرایش بشن
موفق باشید
پاسخ: 
سپاس فراوان از به اشتراک گذاری راه حل.
نویسنده: حسین
۱۴:۰۰ ۱۳۹۷/۰۳/۱۷
سلام. داداش میتونی همینو تبدیل به منوی وردپرسی کنی؟
پاسخ: 
لطفا در این رابطه به انجمن های وردپرس مراجعه کنید.
نویسنده: behrouz
۱۲:۰۶ ۱۳۹۷/۰۹/۱۱
سلام خسته نباشید ممنون از مطلبتون
فقط یه سوال
وقتی میخوام یه متن چند خطی وارد کنم همشو پشت هم مینویسه چجوری میتونم اخر یه متن چی بزارم که متن بعدی رو از خط بعدی شروع کنه؟؟؟؟؟
پاسخ: 
برای رفتن متن به خط جدید می توانید از تگ br استفاده کنید، مثال:
متن اول<br>متن دوم
نویسنده: behrouz
۱۴:۴۷ ۱۳۹۷/۰۹/۱۱
خیلی ممنون بعد یه سوال دیگه چجوری متن انگلیسی رو چپ چین کنم؟
ممنون از راهنماییتون
پاسخ: 
برای نمایش به صورت چپ چین، متن انگلیسی را به شکل زیر درج کنید:
<div style="direction: ltr;">English Text</div> 
نویسنده: پروین نقوی
۱۸:۵۹ ۱۳۹۹/۱۲/۲۰
سلام ممنون از مطالب خوبتون. یسوال داشتم من به title خصوصیت border-redius دادم و میخواستم وقتی رو تایتل کلیک میشه بوردر ردیوس های پایین (هم چپ هم راست) صفر بشوند. آیا شما میدونین این خصوصیت رو چگونه و کجا باید در کد اسکریپت اضافه کنم؟؟؟؟؟
یعنی
border-bottom-right-redius=0, border-bottom-left-redius=0
پاسخ: 
ابتدا به بلاک مربوط به تیتر یک آی دی منحصر به فرد اختصاص دهید، مثال:
<div id="proboxtitle-1" class="proboxtitle" onclick="runprobox(1);">
سپس تابع runprobox را به شکل زیر ویرایش کنید:
function runprobox(index){
var target = document.getElementById("proboxtitle-" + index);
var divID = "probox" + index + "content";

if(openprobox == divID){
divID = '';
}

if(target.style.borderBottomLeftRadius === '0px'){
target.style.borderBottomLeftRadius = '8px';
target.style.borderBottomRightRadius = '8px';
} else {
target.style.borderBottomLeftRadius = '0px';
target.style.borderBottomRightRadius = '0px';
}

setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openprobox + "','" + divID + "')", 33);
openprobox = divID;
}
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





4 × 8
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

form شریفی
در:
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز سال نو رو تبریک میگم بهتون ، امیدوارم که خودتون و خانوادتون همیشه سالم و سلامت باشید و امسال پر از...
۱۳۹۹/۱۲/۳۰

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

form احمد
در:
سلام مجدد عذرخواهی میکنم یه موردی دیگه بود فراموش کردم در مورد سوال هدر بگم اینکه روی لوکال به هدر ارسال میشه ولی روی هاست...
۱۳۹۹/۱۲/۲۸

form احمد
در:
با سلام خسته نباشید ببخشید قبلا یه سری دستورات جی کوری رو از خودتون گرفتم وقتی فیلدهای فرمم تکمیل شده است توسط هدر بره به...
۱۳۹۹/۱۲/۲۸

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷

form احمد
در:
با سلام و خسته نباشید ببخشید داخل جیکوری یدونه متغییر دارم الان میخوام همین متغییر رو با یه عدد دیگه جمع کنم ولی وقتی علامت...
۱۳۹۹/۱۲/۲۶
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.