article

ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS

javascript-tabbed-panel

استفاده از پنل چند سربرگی یا Tabbed Panel از جمله روش های متداول در طراحی وب با متدهای حرفه ای محسوب می شود که امروزه در اغلب برنامه های کاربردی تحت وب می توان نمونه ای از آن را مشاهده کرد، به طور خلاصه پنل های چند سربرگی، بلاک هایی هستند که با وجود مستقل و چندگانه بودن، به نحوی با رابطه ای تعاملی در کنار هم قرار می گیرند که از نظر کاربر، مجموعه ای مشترک دیده می شوند، طراحان وب معمولا از ترکیب قابلیت های جاوا اسکریپت و CSS این نوع پنل ها را خلق و در مواردی مانند سایت های خبری، سایت های دانلود، پنل مدیریت سیستم های مدیریت محتوا، نمایش آمار و نمودارها و... از آنها استفاده می کنند.

فواید استفاده از پنل چند سربرگی


استفاده از این نوع پنل ها به صرفه جویی در میزان فضای اشغال شده از صفحه، زیبایی و همچنین انسجام بخشی بیشتر به رابط کاربری (User Interface) سایت کمک می کند، در نتیجه کاربر نهایی تجربه بهتری از پایش در برنامه تحت وب شما خواهد داشت.

معایب استفاده از پنل چند سربرگی


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

نحوه ایجاد پنل چند سربرگی


همان طور که اشاره شد، برای ایجاد پنل چند سربرگی یا Tabbed Panel باید به صورت ترکیبی از جاوا اسکریپت و CSS استفاده کنیم، در اینجا نیز CSS نقش شکل دهنده و جاوا اسکریپت جهت ایجاد رفتار تعاملی به کار می رود، برای شروع کد HTML پنل را به صورت زیر می نویسیم.
<div class="tabbed-container">
<div class="tabbed-menu">
<div class="tabbed-button" id="tabbed-button-1">تیتر دکمه 1</div>
<div class="tabbed-button" id="tabbed-button-2">تیتر دکمه 2</div>
<div class="tabbed-button" id="tabbed-button-3">تیتر دکمه 3</div>
<div class="tabbed-button" id="tabbed-button-4">تیتر دکمه 4</div>
</div>
<div class="tabbed-wrapper">
<div id="tabbed-box-1">محتوای باکس 1</div>
<div id="tabbed-box-2">محتوای باکس 2</div>
<div id="tabbed-box-3">محتوای باکس 3</div>
<div id="tabbed-box-4">محتوای باکس 4</div>
</div>
</div>
همان طور که ملاحظه می کنید کد بالا از سه بلاک اصلی (tabbed-container، tabbed-menu و tabbed-wrapper) تشکیل شده، بلاک div با کلاس tabbed-container در واقع نقش نگهدارنده یا container سایر عناصر را داشته و در بالاترین سطح قرار می گیرد، tabbed-menu بلاکی است که دکمه مربوط به هر پنل در آن به نمایش در خواهد آمد و tabbed-wrapper بلاکی برای قرار گرفتن باکس محتوا است.
نکته کلیدی که در این کد به چشم می خورد نحوه تنظیم id در قسمت tabbed-button و tabbed-box است که در انتهای آنها یک شماره متناظر درج شده، از این شماره در هنگامی که قصد ایجاد رفتار تعاملی با جاوا اسکریپت را داریم استفاده خواهیم کرد؛ اکنون تکه کد جاوا اسکریپتی زیر را نیز به صفحه خود اضافه می کنیم.
<script type="text/javascript">
function closeBox(num){
    //بستن تمام باکس ها در اولین بارگذاری
    for(var i = 1; i <= num; i++){
        document.getElementById("tabbed-box-" + i).style.display = "none";    
    }
}
function openSelected(button, box){
    //باز کردن باکس انتخاب شده در اولین بارگذاری
    document.getElementById(button).className = ("tabbed-button-open");
    document.getElementById(box).style.display = "block";        
}
function openBox(button, box, num){
    var tabbed_div = document.getElementById(box).style.display;
    
    //بستن تمام باکس ها و باز کردن باکس انتخاب شده
    if(tabbed_div != "block"){
        for(var i = 1; i <= num; i++){
            document.getElementById("tabbed-box-" + i).style.display = "none";
            document.getElementById("tabbed-button-" + i).className = ("tabbed-button");
        }        
        document.getElementById(button).className = ("tabbed-button-open");
        document.getElementById(box).style.display = "block";        
    }        
}
</script>
این کد از سه تابع تشکیل شده، تابع closeBox تمام باکس های پنل را به حالت بسته (display:none) تغییر می دهد، این تابع در بارگذاری اولیه صفحه (یعنی زمانی که صفحه فراخوانی می شود) به کار می رود، تابع openSelected با دریافت id مربوط به دکمه و باکس انتخاب شده، آن را به حالت کلاس tabbed-button-open و block تبدیل می کند (دکمه انتخاب شده و باکس مربوط به آن نمایش داده می شود)، این تابع نیز در بارگذاری اولیه صفحه به کار می رود، تابع openBox نیز در واقع کار دو تابع closeBox و openSelected را به صورت داینامیک انجام می دهد، در نتیجه با انتخاب هر سربرگ، دکمه به حالت انتخاب شده و باکس نمایش داده می شود.
پس از درج کد بالا در قسمت head صفحه، قسمت HTML را نیز در قسمت زیر به صورتی که مشاهده می کنید ویرایش کنید.
<div class="tabbed-button" id="tabbed-button-1" onclick="openBox(this.id, 'tabbed-box-1', 4);">تیتر دکمه 1</div>
<div class="tabbed-button" id="tabbed-button-2" onclick="openBox(this.id, 'tabbed-box-2', 4);">تیتر دکمه 2</div>
<div class="tabbed-button" id="tabbed-button-3" onclick="openBox(this.id, 'tabbed-box-3', 4);">تیتر دکمه 3</div>
<div class="tabbed-button" id="tabbed-button-4" onclick="openBox(this.id, 'tabbed-box-4', 4);">تیتر دکمه 4</div>
این کار برای اختصاص دادن رویداد onclick به دکمه های پنل است (به شماره های متناظر توجه داشته باشید).
سپس در انتهای کدهای HTML مربوط به پنل، تکه کد جاوا اسکریپت زیر را نیز اضافه کنید.
<script type="text/javascript">
//بستن تمام باکس ها در اولین بارگذاری
closeBox(4);
//باز کردن باکس انتخاب شده در اولین بارگذاری
openSelected("tabbed-button-1", "tabbed-box-1");
</script>
در آخرین مرحله باید استایل CSS مربوط به پنل چند سربرگی را به صفحه خود اضافه کنیم، بنابراین استایل زیر را نیز ترجیحا در قسمت head صفحه درج می کنیم.
<style type="text/css">
.tabbed-container{
    position:relative;
    margin-top:12px;
    border:1px solid #FFF;
}
.tabbed-menu{
    margin-top:0px;
    margin-bottom:0px;
    line-height:14px;
    position:absolute;
}
.tabbed-wrapper{
    border:1px solid #E5E5E5;
    margin-top:25px;
    margin-bottom:12px;
    padding:12px;
}
.tabbed-button{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#F9F9F9;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #E5E5E5 solid;    
    cursor:pointer;
    color:#999;
}
.tabbed-button:hover{
    background:#F5F5F5;    
    color:#999;        
}
.tabbed-button-open{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#FFF;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #FFF solid;    
    color:#000;    
}
</style>
نکته کلیدی در این نوع موارد نحوه استفاده از خاصیت position با دو مقدار relative و absolute است، همان طور که ملاحظه می کنید، بلاک والد به صورت relative و بلاک فرزند به صورت absolute مقداردهی شده، این کار باعث می شود تا مرورگر خواص بلاک سطح پائین تر را به صورت تابعی از بلاک اصلی پردازش کند.

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


در زیر مثال و پیش نمایش آنلاین پنل چند سربرگی کامل شده را ملاحظه می کنید.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | ایجاد پنل چند سربرگی در وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.tabbed-container{
    position:relative;
    margin-top:12px;
    border:1px solid #FFF;
}
.tabbed-menu{
    margin-top:0px;
    margin-bottom:0px;
    line-height:14px;
    position:absolute;
}
.tabbed-wrapper{
    border:1px solid #E5E5E5;
    margin-top:25px;
    margin-bottom:12px;
    padding:12px;
}
.tabbed-button{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#F9F9F9;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #E5E5E5 solid;    
    cursor:pointer;
    color:#999;
}
.tabbed-button:hover{
    background:#F5F5F5;    
    color:#999;        
}
.tabbed-button-open{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#FFF;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #FFF solid;    
    color:#000;    
}
</style>
<script type="text/javascript">
function closeBox(num){
    //بستن تمام باکس ها در اولین بارگذاری
    for(var i = 1; i <= num; i++){
        document.getElementById("tabbed-box-" + i).style.display = "none";    
    }
}
function openSelected(button, box){
    //باز کردن باکس انتخاب شده در اولین بارگذاری
    document.getElementById(button).className = ("tabbed-button-open");
    document.getElementById(box).style.display = "block";        
}
function openBox(button, box, num){
    var tabbed_div = document.getElementById(box).style.display;
    
    //بستن تمام باکس ها و باز کردن باکس انتخاب شده
    if(tabbed_div != "block"){
        for(var i = 1; i <= num; i++){
            document.getElementById("tabbed-box-" + i).style.display = "none";
            document.getElementById("tabbed-button-" + i).className = ("tabbed-button");
        }        
        document.getElementById(button).className = ("tabbed-button-open");
        document.getElementById(box).style.display = "block";        
    }        
}
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!</noscript>
<div class="tabbed-container">
<div class="tabbed-menu">
<div class="tabbed-button" id="tabbed-button-1" onclick="openBox(this.id, 'tabbed-box-1', 4);">تیتر دکمه 1</div>
<div class="tabbed-button" id="tabbed-button-2" onclick="openBox(this.id, 'tabbed-box-2', 4);">تیتر دکمه 2</div>
<div class="tabbed-button" id="tabbed-button-3" onclick="openBox(this.id, 'tabbed-box-3', 4);">تیتر دکمه 3</div>
<div class="tabbed-button" id="tabbed-button-4" onclick="openBox(this.id, 'tabbed-box-4', 4);">تیتر دکمه 4</div>
</div>
<div class="tabbed-wrapper">
<div id="tabbed-box-1">محتوای باکس 1</div>
<div id="tabbed-box-2">محتوای باکس 2</div>
<div id="tabbed-box-3">محتوای باکس 3</div>
<div id="tabbed-box-4">محتوای باکس 4</div>
</div>
</div>
<script type="text/javascript">
//بستن تمام باکس ها در اولین بارگذاری
closeBox(4);
//باز کردن باکس انتخاب شده در اولین بارگذاری
openSelected("tabbed-button-1", "tabbed-box-1");
</script>
<hr>
با اندکی آشنایی با CSS و JavaScript می توانید پنل را به صورت سفارشی ویرایش کنید.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
commentنظرات (۳۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: طراح جوان
۱۶:۱۶ ۱۳۹۲/۱۰/۲۸
فوق العاده کاربردی ؛ مچکرم.
ممنون میشم اگه به سوالاتی که از فرم تماس ازتون میپرسیم جواب بدید.
با تشکر
پاسخ: 
در صورتی که سوالات موارد زیر را شامل نشود حتما به آنها پاسخ داده می شود:
- سوالات کلی و مشکلاتی که رفع آنها نیاز به صرف زمان خیلی زیادی است.
- مشکلاتی که برای رفع آن هیچ تلاشی نکرده باشید.
- سوالات حاوی کدها و اسکریپت های حجیم و خیلی طولانی.
- درخواست کد و اسکریپت آماده.
- درج ایمیل اشتباه.
نویسنده: حسین
۱۸:۲۳ ۱۳۹۲/۱۱/۰۳
با سلام
من یه سوال داشتم در مورد این که چه طور صفحه اصلی سایت مان فقط در مرورگر های خاصی باز شود. مثلا در همه ی مرورگر ها به جز اینترنت اکسپلورر مشاهده شود.
از سایت خوبتون ممنونم خواهش می کنم جوابم رو بدید!!!
پاسخ: 
سلام
برای این کار باید از PHP استفاده کنید، مثال:
<?php
if(preg_match('/MSIE/i', $_SERVER['HTTP_USER_AGENT'])){
header("Location: http://webgoo.ir");
exit;
}
?>
نویسنده: RapiD
۲۰:۵۴ ۱۳۹۲/۱۱/۰۳
عالی بود ممنون
یک آموزش هم برای انواع هاور کردن در CSS آموزش بدید مثلا یکی از آموزش هایی که در وب فارسی خیلی خیلی کمه هاور کردن از پایین به بالا مثلا یک عکس هستش که به این صورت که موقع هاور شدن عکس به بالا بره و عکس زیریش مشاهده بشه .. نمیدونم متوجه شدید منظورم رو یا نه ... ممنون
پاسخ: 
آموزش مد نظر شما مبحث زیادی ندارد که در یک مطلب جداگانه مطرح شود، کافی است یک بلاک با عرض و ارتفاع مشخص تعریف (به فرض div با عرض و ارتفاع 24 پیکسل) و برای پس زمینه آن یک عکس با ارتفاع دو برابر ارتفاع بلاک داشته باشید (یعنی عکسی با ابعاد 24 در 48 پیکسل) که تصویر حالت عادی (24 پیکسل) در بالا و تصویر حالت فعال در پائین باشد، سپس در استایل CSS مربوط به بلاک، در حالت عادی پس زمینه را به صورت نمونه زیر داشته باشید:
background:url(image/bg.png) top no-repeat;
و در حالت فعال پس زمینه را به صورت زیر تغییر دهید:
background:url(image/bg.png) bottom no-repeat;
نویسنده: حمید
۰۱:۵۸ ۱۳۹۲/۱۱/۰۵
واقعا بحث خیلی کاربردی را مطرح کردید من خیلی خوش حال شدم.
ممنون.
نویسنده: رویا
۱۸:۴۸ ۱۳۹۲/۱۱/۰۵
من با واژه های پنل - افکت - باکس آشنایی ندارم میشه بیشتر توضیح بدهید ممنون میشم
پاسخ: 
لطفا در فرهنگ لغات انگلیسی - فارسی جستجو کنید!
نویسنده: الهام
۲۰:۲۵ ۱۳۹۲/۱۱/۱۳
سلام
من چهار تا فرم طراحی کرده بودم که می خواستم به شکل چند برگی در بیاد. به جای کلمه محتوای باکس ها کد های فرم هام را با head ,body مختص به خودش قرار دادم. هر فرمم دارای اعتبارسنجی مختص به خودش است. حالا فقط در پیش نمایشم فرم اول را نمایش میده با اعتبار سنجی های مربوط به صفحه آخرم. بقیه ی سربرگها هم هیچگونه نمایشی وجود نداره. چی کار کنم؟؟؟؟
پاسخ: 
سلام
نباید در یک صفحه HTML از چند تگ body و head استفاده کنید، هر چند به ظاهر سربرگ ها متفاوت هستند، اما این حالت فقط نمایشی است و در سورس صفحه مانند یک صفحه معمولی کدهای HTML تعریف می شوند، فرم ها نیز نباید چند گانه باشند (اگر باشند باید هر کدام یک دکمه ارسال داشته باشند که در این صورت چند سربرگی بودن خیلی ضرورتی ندارد و منطقی نیست).
نویسنده: مهسا
۱۸:۳۲ ۱۳۹۲/۱۱/۱۵
در مورد Captcha هم یه اموزش بذارید. واسه اشنایی بیشتر و افکت هایی که میشه به اعداد و حروف یا پس زمینه و این چیزا بهش داد
پاسخ: 
در کوتاه مدت امکانپذیر نیست، در صورت امکان در مطالب آینده منتشر خواهد شد.
نویسنده: وحید
۲۰:۴۱ ۱۳۹۲/۱۱/۱۶
سلام خسته نباشید
حتما دیدین بعضی از سایت ها یه قسمت دارن که دقایق حضور اون کاربر رو نشون میده
مثلا یه ساعت تو سایت انلاین باشی می نویسه :
دقایق فعال : 60 دقیقه
حتما تو پایگاه داده برای هر کاربر به صورت جدا محاسبه و ذخیره میشه.
میشه راهنمایی و یه مثال بزنید اگه امکانش هست
ممنون
پاسخ: 
سلام
برای این کار باید چند مبحث مختلف را فرا بگیرید:
- بحث سشن ها و کوکی در PHP.
- بحث تاریخ و زمان در PHP.
- بحث تاریخ و زمان در جاوا اسکریپت (در صورتی که نیاز به نمایش به صورت زنده و... باشد).
مثال ساده ای برای این کار وجود ندارد، باید یک سیستم طراحی کنید که بسته به هدف شما کار ذخیره و به روزرسانی تاریخ در دیتابیس و همچنین نمایش به کاربر را انجام دهد.
نویسنده: شریف
۰۹:۵۷ ۱۳۹۲/۱۲/۰۸
با تشکر فراوان از سایت خوبتون
پیرو سوال دوستمون RapiD این رو نوشتم ولی کار نکرد
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ساخت منوی اینتراکتیو</title>
</head>

<body>
<head>
<style type="text/css">
<!--
#b a{
display:block;
width:100px;
height:75px;
background:url(images/sub_1.jpg) top no-repeat;
}
#b a:hover, #b a:focus{
background:url(images/sub_1.jpg) bottom no-repeat;
}
-->
</style>
</head>
<body>
<div id="b">
<a href="#">text</a>
</div>
</body>
</html>
پاسخ: 
کد شما اصلاح شد!
نویسنده: علی
۱۳:۲۹ ۱۳۹۲/۱۲/۰۸
سلام سایتتون واقعا آموزش های مفیدی میزاره و خیلی چیزا از شما یاد گرفتم !
با تشکر - موفق باشید
www.best-web.ir
نویسنده: میثم
۱۷:۴۶ ۱۳۹۲/۱۲/۱۵
مرسی مثل همیشه عالی بود
نویسنده: mavg
۱۹:۴۵ ۱۳۹۲/۱۲/۱۵
ممنون از آموزشهای جالب شما در مثال عنوان شده اگر بخواهیم بجای محتوای باکس یکسری از مطالب شامل پاراگراف و عکس و غیره نمایش داه شود چکار باید کنیم؟ و اصولا می توامن در یک فایل HTML فایل دیگری را صدا زده تا محتویات آن اجرا گردد اگر نه روش اصولی چیست؟
پاسخ: 
اگر با HTML آشنا باشید، می دانید که درون تگ های div می توانید هر نوع محتوای مد نظرتان را درج کنید، این محتوا هم می تواند شامل تگ ها (به طور مثال تصویر) باشد هم شامل متن ساده، در اینجا هم کافی است به جای عبارت های پیش فرض محتوای مد نظرتان را قرار دهید، در مورد بخش دوم سوال، در HTML امکان ورود اطلاعات فایل دیگر در صفحه وجود ندارد، البته با Ajax این کار ممکن است که آموزش های خاص خود را دارد.
نویسنده: علی
۱۳:۴۶ ۱۳۹۲/۱۲/۱۹
سلام ، بسیار عالی بود موفق باشید
نویسنده: mavg
۱۰:۵۵ ۱۳۹۳/۰۱/۰۴
در وب سایت خود از روش پنل چند سربرگی شما استفاده نموده ام لیکن وقتی تحت وردپرس بالا می آید همه مطالب گنجانده شده در هر سربرگی به طور یکجا نمایش داده شده و مطالب با هم ادغام می شود
پاسخ: 
باید ببینید آیا سورس های لازم برای اجرای پنل به درستی در صفحه وارد شده اند، به خصوص قسمت مربوط به کدهای جاوا اسکریپت، در هر صورت حل مشکل نیازمند بررسی بیشتر است.
نویسنده: mavg
۱۶:۵۲ ۱۳۹۳/۰۱/۱۴
از روش پنل چند برگی استفاده نموده ام لیکن در هنگام مشاهده سایت محتویات برگه ها روی هم نمایش داده می شود. راه حل چیست؟
پاسخ: 
لطفا مثال و پیش نمایش آنلاین را با کدهای درج شده در سایتتان مقایسه کنید! طبق بررسی ما بخش اصلی کدها را درج نکرده اید!
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





7 × 8
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form mohadeseh
در:
ممنون از راهنماییتون مشکلم حل شد
۱۳۹۹/۰۷/۲۸

form محمد
در:
سلام. یک کد نوشته ام بدین صورت: وقتی صفحه باز شده یک پنجره پیام خالی با یک ok باز شده هر چه ok را...
۱۳۹۹/۰۷/۲۸

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

form mohadeseh
در:
الان کد من که توی تگ <head> گزاشتم میخواستم بدونم ایا امکانش هست که توی تگ link که ایکون رو باهاش اوردم بتونم...
۱۳۹۹/۰۷/۲۷

form mohadeseh
در:
سلام ببخشید لطفا راهنمایی کنید که چجوری title برای favicon در html بزارم؟ جوری که وقتی موس روی icon قرار بگیره متن...
۱۳۹۹/۰۷/۲۷

form ryomaechizen
در:
سلام. اگه حافظه وب پر بشه و مجبورا عکسا کپی باشن چطور باید مشکل بارگزاریشون حل بشه؟
۱۳۹۹/۰۷/۲۶

form رونا
در:
پرونده فرستاده شده نمی‌تواند به wp-content/uploads/2020/10 برود. سلام این ارور برای چی رخ می ده
۱۳۹۹/۰۷/۲۵

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

form سینا
در:
چگونه میتوانیم با استفاده از HTML فرمول شیمیایی مواد را بنویسیم؟ با عدد اتمی، جرمی و بار اتمی
۱۳۹۹/۰۷/۲۱

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

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

form امیرحسین
در:
عالی بود. خیلی ممنونم. ولی هر چند کلمه داخل آرایه داشته باشم به همون میزان خروجی گرفته میشه. من اگه 10 کلمه در آرایه داشته...
۱۳۹۹/۰۷/۲۱

form سعادتی
در:
سلام کاش روش برطرف کردن این بهم ریختگی رو هم توضیح میدادید. ممنون
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
موفق شدم اینو پیدا کنم. ولی میخوام کلمات تکراری داخلشون نباشه. مثال AAA فقط یک بار در اون خط وجود داشته باشه.
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
سلام. نه محدودیت زمانی وجود نداره.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام خسته نباشید. میخوام از این تابع برای بدست آوردن لیست های متفاوت استفاده کنم. مثلا یه آرایه داشته باشم. امیدوارم کمکم...
۱۳۹۹/۰۷/۲۰
form ابوالفضل
در:
سلام وقتتون بخیر من میخوام یه افزونه برای مرورگر کروم طراحی کنم و میخوام یه متنی رو هر سری از سایت دریافت کنه و...
۱۳۹۹/۰۷/۲۰
form mahdi
در:
سلام چطور می تونم از ip خارجی استفاده کنم؟ برای دریافت لانچر میخام. مرسی
۱۳۹۹/۰۷/۱۹
form احسان عباسی
در:
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری...
۱۳۹۹/۰۷/۱۷
form شبنم
در:
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
۱۳۹۹/۰۷/۱۷
form احمد
در:
با عرض سلام مجدد ساختار کلی دستورم به این صورت هست. بعد از حلقه وایل اون دیو کلاس 1 و 2 و 3 میخواهم...
۱۳۹۹/۰۷/۱۶
form احمد
در:
با عرض سلام ببخشید چطوری میتونم یه قسمت از تگ ها رو داخل حلقه وایل رد کنم دوباره تگ های بعدی داخل حلقه قرار بگیرن...
۱۳۹۹/۰۷/۱۶
form ابوالفضل
در:
سلام واقعا من خیلی گشتم تا بتونم این آموزش رو پیدا کنم چون واقعا نمی دونستم چی بنویسم تا یک رتبه بندی برای نتایج جستجو...
۱۳۹۹/۰۷/۱۵
form mahtab
در:
سلام وقتتون بخیر ببخشید میشه بفرمایید چجوری کلیپ رو بزاریم وبلاگ ؟؟ بی زحمت کامل بفرمایین ممنون و متشکر
۱۳۹۹/۰۷/۱۴
form Saeid Azari
در:
سلام ببخشید اگه امکانش هست سوال منو جواب بدید یکم گیج شدم...من یک کد html دارم که باید یک سایت درست کنم و ان را...
۱۳۹۹/۰۷/۱۳
form ابوالفضل
در:
سلام یک سوال دارم چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو...
۱۳۹۹/۰۷/۱۳
form parnian
در:
با سلام با توجه به این که این مطلب در سال 91 نوشته شده ایا تغیری هم کرده؟ مثلا استفاده و مهم بودن تگ های...
۱۳۹۹/۰۷/۱۳
form fahimeh
در:
سلام من دارم پروژه واسه دانشگاه مینویسم طراحی سایتو کردم برای کار با پایگاه داده دستور insert و delete کار میکنه ولی...
۱۳۹۹/۰۷/۱۲
form امین
در:
با عرض سلام ببخشید یه فرم دارم اخر فرمم یه دکمه دارم میخواستم بدونم چطوری باید بعد از کلیک کردن دکمه به صفحه دیگه انتقال...
۱۳۹۹/۰۷/۱۱
form محسن
در:
سلام من از فرم ساز گرویتی استفاده میکنم آیا امکان استفاده همچین چیزی رو میتونم داخلش داشته باشم آیا کدی داره که در قسمت...
۱۳۹۹/۰۷/۱۱
form مالکی
در:
چرا وبلاگم بالا نمی یاد
۱۳۹۹/۰۷/۰۹
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید نمونه کد رو اگر امکانش هست نگاه کنید که چطوری این متغییری رو که بدست اوردم در...
۱۳۹۹/۰۷/۰۹
form الناز
در:
سلام وقتتون بخیر. چطور میشه برنامه ای رو در php نوشت که کدملی رو تبدیل به شماره دانشجویی کنه اگه برام بنویسید ممنون میشم.
۱۳۹۹/۰۷/۰۹
form محمد
در:
سلام من میخواستم بدونم چه طوری میشه بدون اینکه از کاربر بپرسی که میخواهد از حساب خروج پیدا کند خود سایت بفهمد که کاربر از...
۱۳۹۹/۰۷/۰۹
form احمد
در:
با سلام ببخشید چطوری باید در جکوری از یک متغییر در صفحات دیگه استفاده کنم مثال دو عدد را باهم جمع کردم و ریختم داخل...
۱۳۹۹/۰۷/۰۹
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸
form Moshtagh
در:
سلام و خسته نباشید بنده چند روزه که وقتی اطلاعات ورود به وبلاگم رو وارد تیترها و کلیک میکنم با چنین پاسخی مواجه میشم...
۱۳۹۹/۰۷/۰۸
form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷
form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴
form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳
form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲
form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.