آگهی
article

ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry

javascript

از جمله امکانات مورد نیاز در طراحی رابط کاربری سایت ها و وبلاگ ها پنل های جمع شونده (Collapsible Panel) هستند که می توان از آنها برای نمایش امکاناتی نظیر منوی سایت یا دسته بندی محتوای طولانی و مواردی از این دست استفاده کرد، روش ایجاد این پنل ها نیز بسته به نیاز و هدف برنامه نویس صفحه وب می تواند متفاوت باشد از جمله استفاده از کتابخانه جاوا اسکریپتی جی کوئری (jQuery)، کتابخانه موتولز (Mootools)، استفاده از کدها و توابع خودنوشت و...  به هر صورت در این مطلب قصد داریم آموزش ایجاد پنل جمع شونده را به کمک جاوا اسکریپت (JavaScript) و فریم ورک Spry (که در برخی نسخه های برنامه ادوبی دریم ویور (Adobe Dreamweaver) نیز استفاده شده) ارائه کنیم، کد ارائه شده در این مطلب در عین سبکی (کم حجمی) از قابلیت سازگاری خوبی با مرورگرهای استاندارد برخوردار است و در کنار کدهای جاوا اسکریپت قابلیت ایجاد تغییرات سفارشی از طریق ویرایش فایل CSS نیز وجود دارد که می توانید بر اساس سلیقه خودتان آن را تنظیم کنید.

استفاده از فریم ورک Spry برای ایجاد پنل جمع شونده


Spry عنوان فریم ورک جاوا اسکریپتی است که توسط شرکت ادوبی (Adobe) به صورت متن باز (Open-source) توسعه یافته، از این فریم ورک می توان در ایجاد امکانات مورد نیاز در طراحی رابط کاربری صفحات وب استفاده کرد که یکی از این امکانات می تواند پنل های جمع شونده یا به اصطلاح Collapsible Panel باشد، در نمونه کد زیر نحوه ایجاد دو پنل جمع شونده به کمک این فریم ورک را ملاحظه می کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد پنل جمع شونده با فریم ورک Spry</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab">منو</div>
  <div class="CollapsiblePanelContent">نمایش محتوای شما!</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab">منو</div>
  <div class="CollapsiblePanelContent">نمایش محتوای شما!</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
</script>
</body>
</html>
پیش نمایش
توضیح:
- به محل قرار گیری فایل ها و تگ های جاوا اسکریپت دقت کنید، فایل SpryCollapsiblePanel.js و SpryCollapsiblePanel.css را در قسمت head صفحه ایمپورت کرده و تکه کد مربوط به اسکریپت (تعریف متغیر CollapsiblePanel و فراخوانی متد) را پس از تگ div اصلی پنل قرار دهید.
- با ویرایش فایل SpryCollapsiblePanel.css می توانید تنظیمات ظاهری و استایل دلخواه خود را اعمال کنید.
- برای ایجاد پنل های مختلف در یک صفحه باید ابتدا به هر بلاک اصلی div، یک آی دی اختصاص دهید سپس در قسمت اسکریپت در زیر متغیر CollapsiblePanel1 آن آی دی را در متغیری جدید (به فرض CollapsiblePanel2) اضافه کنید (در نمونه کد دو پنل ایجاد شده که با پیروی از ترتیب شماره گذاری ها می توان به هر تعداد پنل در صفحه ایجاد کرد).

دانلود فایل های پنل جمع شونده با Spry


برای بدست آوردن نمونه سورس کد و فایل JS و CSS پنل، می توانید بر روی لینک پیش نمایش (در بالا) کلیک کرده سپس از سورس کد صفحه استفاده نمائید، همچنین کل فایل ها به صورت یکجا از لینک زیر قابل دریافت است:
دانلود فایل های پنل جمع شونده با Spry
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ساخت افکت رنگی با جاوا اسکریپت (JavaScript)
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
» اعتبار سنجی فرم های وب با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
commentنظرات (۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: س
زمان: ۱۸:۵۲:۰۸ - تاریخ: ۱۳۹۱/۱۲/۲۱
خیلی جالب بود.
دست شما درد نکنه
نویسنده: amirchermahini
زمان: ۱۶:۴۶:۲۵ - تاریخ: ۱۳۹۱/۱۲/۲۶
با سلام و عرض ادب
در قسمت پیش نمایش من شاهد باز شدن منو ها بودم اما با نوشتن خودم نمیشه
حتی کدهای شما رو کپی و پیست هم کردم و جواب نمیده چرا ؟
با تشکر از مطالب عالی و اموزنده شما
پاسخ: 
باید سورس های JS و CSS را نیز در کنار صفحه HTML قرار دهید، برای این کار هم از طریق برنامه دریم ویور و هم از طریق نمونه آنلاین می توانید کدها را ذخیره کنید.
فایل JS:
http://webgoo.ir/example/javascript/SpryAssets/SpryCollapsiblePanel.js
فایل CSS:
http://webgoo.ir/example/javascript/SpryAssets/SpryCollapsiblePanel.css
نویسنده: علی
زمان: ۰۸:۵۰:۴۷ - تاریخ: ۱۳۹۲/۰۱/۱۰
با سلام و تشکر از سایت بسیار خوبتون
من کد نویسی وارد نیستم ولی کارهایی که گفتید انجام دادم کد جاوا اسکریپت را نمی دونم کجا و چطوری ایمپورت کنم.
پشت سر هم با کد بعدی که مربوط به فایلهای اصلی بود داخل قسمت منبع ریختم ولی نشد
پاسخ: 
برای استفاده از اینگونه کدها باید دانش و تجربه اولیه مبانی وب را داشته باشید، به هر صورت کافی است مطابق نمونه ابتدا آنها را آپلود کرده و با جایگزینی آدرس ها، در هر جا از قالب یا مطالب وبلاگ یا سایتتان که امکان پشتیبانی و نمایش کدهای HTML را دارد، آن را قرار دهید.
نویسنده: پوریا
زمان: ۱۹:۵۴:۳۵ - تاریخ: ۱۳۹۲/۰۴/۰۵
با سلام و تشکر بابت این مطلب مفید.
دوست عزیز ممکنه بفرمایید چطور میشه تعیین کرد در ابتدای کار، کدوم پنل باز و کدوم پنل بسته کرد؟
طوری که چند تا پنل موجود بسته و تنها یکی باز باشه و سپس کاربر پنل دلخواه خود رو باز یا بسته کنه.
ممنون
پاسخ: 
سفارشی سازی این کد بر اساس API Spry به راحتی امکان پذیر است، برای حالت مد نظر شما کافی است تنظیمات قسمت زیر را ویرایش:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel12");
</script>
و هر پنلی که می خواهید در ابتدا بسته باشد را به روش نمونه زیر تغییر دهید:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false, openClass:"CollapsiblePanelClose"});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
</script>
در اینجا ما پنل اول را به صورت پیش فرض بسته ایم.
تنظیمات قابل اعمال:
- closedClass با مقدار نام یک کلاس (مقدار پیش فرض: null)
- contentIsOpen با مقدار true یا flase (مقدار پیش فرض: true)
- duration با مقدار هزام ثانیه (مقدار پیش فرض: 500)
- enableAnimation با مقدار true یا false (مقدار پیش فرض: true)
- focusedClass با مقدار نام یک کلاس (مقدار پیش فرض: null)
- hoverClass با مقدار نام یک کلاس (مقدار پیش فرض: null)
- openClass با مقدار نام یک کلاس (مقدار پیش فرض: null)
- enableKeyboardNavigation با مقدار true یا false (مقدار پیش فرض: true)
- openPanelKeyCode با مقدار عدد کلیدهای صفحه کلید (مقدار پیش فرض: number)
به طور مثال عدد 40 مربوط به دکمه جهت نمای پائین است.
- closePanelKeyCode با مقدار عدد کلیدهای صفحه کلید (مقدار پیش فرض: number)
به طور مثال عدد 38 مربوط به دکمه جهت نمای بالا است.
نویسنده: پوریا
زمان: ۱۹:۳۰:۵۹ - تاریخ: ۱۳۹۲/۰۴/۰۶
یک دنیا ممنون
کامل و جامع گفتید
متشکرم
نویسنده: الهام
زمان: ۱۵:۲۴:۱۴ - تاریخ: ۱۳۹۲/۰۴/۱۴
سلام
خسته نباشید
من یه سوال داشتم . چطوری میشه با کد جاوا همین طوری با کلیک بر روی منوی مورد نظر صفحه ای کوچک تر از صفحه اصلی توی همون صفحه اصلی باز بشه که وقتی باز شد صفحه اصلی تار شود (غیر فعال) که با گذاشتن دکمه ای خروج توی صفحه دوم، از صفحه دوم بیایم بیرون و صفحه اصلی دوباره فعال بشه
پاسخ: 
این کار نیاز به کدنویسی پیشرفته و آموزشی جداگانه دارد، شاید نمونه های آن در وب در قالب جی کئوری وجود داشته باشد که باید جستجو کنید.
نویسنده: ابوالفضل
زمان: ۱۶:۲۴:۳۱ - تاریخ: ۱۳۹۲/۰۴/۱۸
سلام من میخوام دو منو باشد اولی بسته باشد و دومی باز باشد.
می خوام زمانی که بر روی منوی اولی کلیک شد منو باز شود و بعد از دو ثانیه منو دوم بسته شود خواهش می کنم کمکم کنید خیلی بهش نیاز دارم
بی نهایت از شما بابت سایت خوبتون سپاسگذارم
پاسخ: 
منوی مد نظرتان را یا باید در وب جستجو کنید و یک نمونه آماده پیدا کنید یا اینکه آن را بنویسید، متاسفانه به دلیل کمبود فرصت امکان نوشتن آن وجود ندارد.
نویسنده: fatima
زمان: ۱۱:۰۸:۱۰ - تاریخ: ۱۳۹۲/۰۵/۰۳
سلام. من چطور میتونم فایل CSS رو تغییر بدم. آخه همچین فایلی برای دانلود نیست
پاسخ: 
آدرس فایل CSS:
http://webgoo.ir/example/javascript/SpryAssets/SpryCollapsiblePanel.css
نویسنده: sama
زمان: ۱۴:۳۴:۱۶ - تاریخ: ۱۳۹۲/۰۵/۱۶
سلام خسته نباشید
لطفا کمکم کنید که چطور میتونم با استفاده از کدهای جاوا و css یک tree menu در صفحه وب در زیر منو ابشاری ام ایجاد کنم.
لطفا کدهاش رو و اینکه در کدوم قسمت برنامه dreamweaver باید بنویسم راهنمایم کنید.
با سپاس فراوان............
پاسخ: 
هر چند دقیقا نمی دانیم چه نوع منوی درختی مد نظر شما است، اما در این خصوص کدی آماده در اختیار نداریم، چند نوع مختلف منو در سایت آموزش داده شده، کافی است عبارت "منو" را در قسمت جستجو وارد کنید.
نویسنده: sama
زمان: ۰۰:۲۳:۰۴ - تاریخ: ۱۳۹۲/۰۵/۱۷
اجازه بدید سوالم رو به صورت دیگر بیان کنم
من در صفحه اصلی وب یه منوی کشویی نوشتم می خوام در زیر منوی کشویی در سمت راست صفحه اصلی وب چند ارگومان یا عنوان قرار بدم که وقتی روی یکی از این عنوان ها میرم زیر منوهاش رو با اتصال خط چین به والدش نشان بده و برای بار دوم که روی عنوان والد میرم زیر مجموعه اش جمع بشه. و اینکه کد منو درختی رو در کجا ذخیره کنم؟
و یه سوال دیگر چطور می تونم در صفحه اصلی وبم دکمه راست کلیک رو میزنم صفحه ام right click menu باشه؟
شدیدا به راهنمای شما استاد بزرگوار احتیاج دارم لطف کنید کمکم کنید
سپاسگذارم
پاسخ: 
در مورد منوی درختی:
در حال حاضر کدی آماده برای این نوع منو در اختیار نداریم (شاید در آینده آموزشی درباره آن در سایت منتشر شود)، اما اگر در وب همان عنوان "tree menu" را جستجو کنید، نمونه های زیادی پیدا خواهید کرد، منظورتان از ذخیره کد منو احتمالا روش درج آن است، باید فایل های CSS یا JS منو را در یک دایرکتوری یا در یک سایت آپلود کرده و در صفحه خود آنها را وارد کنید، حتی می توانید به صورت مستقیم تمام کدها را در یک صفحه داشته باشید.
در مورد سوال دوم:
برای این کار باید منوی پیش فرض مرورگر را غیر فعال و محتویات مورد نظر خودتان را چاپ کنید:
<script type="text/javascript">
if(document.addEventListener){
document.addEventListener('contextmenu', function(e){
document.write('کد منوی شما در حالت راست کلیک');
e.preventDefault();
}, false);
}
else{
document.attachEvent('oncontextmenu', function(){
document.write('کد منوی شما در حالت راست کلیک');
window.event.returnValue = false;
});
}
</script>
البته غیر فعال کردن تنظیمات اولیه مرورگر به هیچ وجه توصیه نمی شود و در وب معمول نیست (در وب بر خلاف نرم افزارهای تحت ویندوز و...، با محدودیت های خاصی روبرو هستیم و تنها در چارچوب استانداردهای فراگیر بین مرورگرهای مختلف باید امکانات یک صفحه وب تعریف شود، هر امکانی را نمی توان به راحتی و به درستی ایجاد کرد).
نویسنده: مسعود
زمان: ۱۱:۳۶:۱۶ - تاریخ: ۱۳۹۲/۰۵/۲۴
با سلام .
استاد ببخشید . این کدی که گذاشتین رو من می خوام مثلا رو دکمه ی ادامه مطلب پیاده کنم که وقتی ادامه مطلب رو میزنیم بقیه باز بشه . مشکلی که وجود داره اینه که من می خوام فقط رو لینک ادامه مطلب که کلیک می کنی این اتفاق میفته و این کد برای یه div هست . ایشالله که منظورم رو متوجه شدین ! میشه یه توضیح بدین که چی کار کنم ؟
پاسخ: 
کل محتوایی که باید به صورت باکس باشد را درون یک بلاک CollapsiblePanel قرار دهید، قسمت لینک را درون CollapsiblePanelTab و قسمت ادامه مطلب را در بخش CollapsiblePanelContent، بدین ترتیب با کلیک بر روی لینک، محتوا نمایش داده می شود، برای تغییر جلوه ظاهری نیز از استایل CSS استفاده کنید.
نویسنده: مسعود
زمان: ۰۱:۳۶:۳۷ - تاریخ: ۱۳۹۲/۰۵/۲۵
با سلام مجدد . آقا تبریک میگم به این سایت بسیار خوبتون . واقعا خیلی عالیه هر چی بگم کم گفتم . فقط اگه مبحث جی کوئری رو هم ارئه بدین که دیگه بی نظیر میشه .
بازم ممنونم از سایت بسیار عالیتون
پاسخ: 
در کوتاه مدت امکانپذیر نیست، اما شاید در آینده بخشی را به این فریم ورک اختصاص دهیم.
نویسنده: مسعود
زمان: ۲۱:۳۶:۳۱ - تاریخ: ۱۳۹۲/۰۵/۲۸
با سلام .
استاد ببخشید من این کد رو می خواستم استفاده کنم جوری که مثلا چند تا باکس باشه . بعد شما گفتین که آیدیش باید تغییر کنه فقط و مثلا 1 و 2 هست تو باکس بعدی بشه 3 و 4 .
این کد منو یه نگاه بندازین خواهشا ببینید باید چی کار کنم!
<?php
if (mysql_num_rows($man) > 0)
{
$i=0 ;
$j= 1 ;
while ($row_manage = mysql_fetch_array($man))
{
$matn .= '

<div class="div">
<div class="title_s">
<div class="date_sms"> 1392/05/27 </div>
<div class="title_sms">'.$row_manage['subject'].' </div>
</div>
<div class="line"> </div>
<br />
<br />
'.$row_manage['description'].'
<div id="CollapsiblePanel1" class="div2">
<a class="CollapsiblePanelTab">ادامه مطلب</a>
<div class="div1">
<br />
<br />
'.$row_manage['con_description'].'
</div>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel'.$i.' = new Spry.Widget.CollapsiblePanel("CollapsiblePanel'.$i.'",{contentIsOpen:false, openClass:"CollapsiblePanelClose"});
var CollapsiblePanel'.$j.' = new Spry.Widget.CollapsiblePanel("CollapsiblePanel'.$j.'");
</script>

' ;

$i = $i + 2 ;
$j = $i + 1 ;
}
}
?>
پاسخ: 
نباید کدها را حساب نشده بنویسید! ابتدا به خروجی مورد انتظار نگاه کنید، در قسمت تب ها نیاز به تکرار بلاک های CollapsiblePanel با شماره id متفاوت دارید، این مورد را می توان در حلقه while خروجی گرفت، اما اگرچه قسمت داخل تگ script باید به همین صورت تکرار شود، اما خود تگ اسکریپت تنها یک بار باید چاپ گردد، لذا باید با شرط در حلقه باشد، نکته دیگر اینکه باید متغیری داشته باشید که در هر دور حلقه تنها یک واحد افزایش پیدا کند:
<?php
if (mysql_num_rows($man) > 0)
{
$i=1 ;
while ($row_manage = mysql_fetch_array($man))
{
$matn .= '<div class="div">
<div class="title_s">
<div class="date_sms"> 1392/05/27 </div>
<div class="title_sms">'.$row_manage['subject'].' </div>
</div>
<div class="line"> </div>
<br />
<br />
'.$row_manage['description'].'
<div id="CollapsiblePanel'. $i .'" class="div2">
<a class="CollapsiblePanelTab">ادامه مطلب</a>
<div class="div1">
<br />
<br />
'.$row_manage['con_description'].'
</div>
</div>
</div>';
if($i <= 1){
$matn .= '<script type="text/javascript">';
}

$matn .= 'var CollapsiblePanel'.$i.' = new Spry.Widget.CollapsiblePanel("CollapsiblePanel'.$i.'",{contentIsOpen:false, openClass:"CollapsiblePanelClose"});';

if($i == mysql_num_rows($man)){
$matn .= '</script>';
}

$i++;
}
}
?>
نکته: کد تست نشده اما قاعدتا باید طبق چنین الگویی خروجی مورد نظر را چاپ کنید.
نویسنده: مسعود
زمان: ۲۲:۰۹:۵۵ - تاریخ: ۱۳۹۲/۰۵/۲۸
با سلام . ببخشید استاد من اگه خواسته باشم وقتی روی دکمه "منو" کلیک می کنم که صفحه باز و بسته میشه ، وقتی روش کلیک شد (منو) مثلا نوشته منو عوض بشه به یه کلمه دیگه مثلا "باز" چی کار باید بکنم ؟
پاسخ: 
برای این کار باید ابتدا یک id به عنوان منوها اختصاص دهید، سپس با رویدادهایی مانند onclick در جاوا اسکریپت یک تابع را فراخوانی کنید که به فرض با متد innerHTML مقادیر عنوان منو را به صورت داینامیک تغییر دهد، نوشتن این تابع نیاز به صرف مدت زمانی است که متاسفانه به دلیل کمبود فرصت از انجام آن معذوریم.
نویسنده: نیما
زمان: ۲۱:۳۰:۱۷ - تاریخ: ۱۳۹۲/۰۸/۰۶
سلام ، خیلی ممون از سایت خوبتون
من یه سوال داشتم ، چطور میتونم وقتی Combobox رو انتخاب میکنم مثلا وقتی گزینه اول باشه یه عنصری رو مخفی کنه و دومی نمایش بده ، میشه کمکم کنین استاد ؟
پاسخ: 
این مورد را باید با JavaScript کدنویسی کنید، به تگ select رویداد onchange اختصاص دهید و با this.value مقادیر تگ را به عنوان آرگومان به یک تابع بدهید:
<script type="text/javascript">
function changeIt(value, num){
//بستن تمام باکس ها
for(var i = 1; i <= num; i++){
document.getElementById('box-' + i).style.display = 'none';
}
//نمایش انتخاب شده
document.getElementById('box-' + value).style.display = 'block';
}
</script>
<select onchange="changeIt(this.value, 3);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="box-1">متن 1</div>
<div id="box-2">متن 2</div>
<div id="box-3">متن 3</div>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





3 × 3
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form مهدی
در:
خیلی خیلی ممنونم از وقتی که گذاشتید.. لطف کردید
۲۱:۵۳:۳۵ ۱۳۹۹/۰۴/۲۴

form mahtab
در:
ببخشین چرا وبلاگ من تو لبتاپ دوستم باز نمیشه ؟؟؟ واسه ی ویروس هم اسکن کرده اما نوشته چیزی نیس چیکار کنیم ؟؟؟؟ ...
۱۴:۳۲:۳۳ ۱۳۹۹/۰۴/۲۴

form مهدی
در:
تبدیل کنم؟
۱۲:۱۸:۲۸ ۱۳۹۹/۰۴/۲۴

form sepideh
در:
سلام. من یک لندینگ پیج رو به صفحه اصلی سایت ریدایرکت 301 کردم. اگر بخوام تمام لینک های داخلی لندینگ رو (صفحات دنباله) رو...
۱۷:۱۱:۴۰ ۱۳۹۹/۰۴/۲۳

form ا
در:
ببخشید کدها رو کجا میزنیم؟
۱۵:۳۲:۵۷ ۱۳۹۹/۰۴/۲۳

form نیلوفر
در:
سلام. من تازه کار هستم و توی سایتی که طراحی کردم یه سرچ باکس گذاشتم. ارتباط با پایگاه داده هم داره و نتایج رو نشون...
۱۲:۵۳:۴۳ ۱۳۹۹/۰۴/۲۳

form مهدی
در:
سلام من از کد زیر استفاده کردم ولی وقتی که اعمال میشه کل css های سایتم میپره.. چه باید بکنم
۰۹:۵۵:۵۰ ۱۳۹۹/۰۴/۲۳

form سلماسی
در:
سلام ایا اگر از وبسایت شخصی کسی بازدید کنیم صاحب وبسایت شماره ی ما را می بیند
۲۱:۳۱:۵۳ ۱۳۹۹/۰۴/۲۲

form mahdi
در:
سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم...
۱۹:۱۳:۱۵ ۱۳۹۹/۰۴/۲۲

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

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

form اریا
در:
سلام و درود بزرگوار چه دستوری باید بنویسیم تا فقط مقدارهای خاصی از ارایه بتونیم نمایش بدیم. مثلا یک ارایه 6 خونه ای...
۱۶:۴۷:۳۱ ۱۳۹۹/۰۴/۲۰

form کافه کتاب
در:
سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون
۱۴:۵۱:۴۳ ۱۳۹۹/۰۴/۲۰

form سجاد
در:
دمتون گرم. خیلی زحمت کشیدید
۱۳:۴۳:۱۱ ۱۳۹۹/۰۴/۲۰

form KhashayarPrk
در:
سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.
۱۳:۱۳:۴۷ ۱۳۹۹/۰۴/۲۰
form Oliver
در:
چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم
۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸
form محمد
در:
با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...
۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵
form آیدا
در:
سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...
۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴
form علی
در:
سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...
۰۹:۳۰:۴۹ ۱۳۹۹/۰۴/۱۴
form sina2000
در:
با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...
۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳
form محمد امین
در:
سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...
۱۸:۲۸:۲۴ ۱۳۹۹/۰۴/۱۱
form ترنم
در:
سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...
۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱
form ا
در:
سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟
۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷
form amir
در:
سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...
۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷
form محمدباقر حسیبیان
در:
من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...
۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶
form ...
در:
سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...
۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵
form مجتبی
در:
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴
form متین
در:
سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.
۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴
form mahdi
در:
سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...
۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳
form امید
در:
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳
form ali
در:
با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...
۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳
form علی
در:
سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...
۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳
form oscar
در:
درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...
۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲
form علی
در:
با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت
۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱
form Farzad
در:
الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...
۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰
form Farzad
در:
سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...
۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰
form شیما طیبی
در:
سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....
۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹
در انتظار بررسی: ۰