تالار گفتگوی گروه های کامپیوتر دانشگاه پیام نور
آموزش ساخت یک منوی پایین افتادنی چندگانه - نسخه قابل چاپ

+- تالار گفتگوی گروه های کامپیوتر دانشگاه پیام نور (http://www.ecg-pnum.ir/forum)
+-- انجمن: آمـــوزش (/forumdisplay.php?fid=94)
+--- انجمن: طراحی وب (/forumdisplay.php?fid=100)
+--- موضوع: آموزش ساخت یک منوی پایین افتادنی چندگانه (/showthread.php?tid=459)

صفحه‌ها: 1 2


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - 871226518 - 12-17-2012 11:37 PM

با سلام
میخواستم بدونم چطور میشه در جاوااسکریپت یک متغیر سراسری رو داخل یک فانکشن مقداردهی کنم بطوری که بیرون از فانکشن هم اون مقدار رو داشته باشه و بتونم در سراسر برنامه ازش استفاده کنم؟
متشکرم


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - جوادیان - 12-18-2012 02:38 AM

(12-17-2012 11:37 PM)871226518 نوشته شده توسط:  با سلام
میخواستم بدونم چطور میشه در جاوااسکریپت یک متغیر سراسری رو داخل یک فانکشن مقداردهی کنم بطوری که بیرون از فانکشن هم اون مقدار رو داشته باشه و بتونم در سراسر برنامه ازش استفاده کنم؟
متشکرم

سلام . یه صفحه html که مثالی از یه متغیر سراسری در جاوااسکریپت هست متغیر x در این فایل متغیر سراسری به حساب می آید . البته متغیرهای سراسری تنها در یک صفحه در جاوااسکریپت وجود دارد

لینک دانلود فایل = http://up.toca.ir/images/fapq2aj2pdyjx7vs1bm.zip


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - 871226518 - 12-18-2012 08:12 AM

نقل قول: سلام . یه صفحه html که مثالی از یه متغیر سراسری در جاوااسکریپت هست متغیر x در این فایل متغیر سراسری به حساب می آید . البته متغیرهای سراسری تنها در یک صفحه در جاوااسکریپت وجود دارد

لینک دانلود فایل = http://up.toca.ir/images/fapq2aj2pdyjx7vs1bm.zip

تشکر میکنم از شما ولی متاسفانه به این شکل جواب نگرفتم.در واقع کاری که میخوام انجام بشه به این صورت هست:
یک تابع با یک پارامتر ورودی رو در onclick یک لینک فراخوانی میکنم ،حالا میخوام اون متغیرم رو با این پارامتر مقدار دهی کنم.یعنی از اول که متغیر رو تعریف کردم هیچ مقداری بهش ندادم ومقداردهی اولیه هم درون تابع انجام میشه.
من فایلم رو همراه با توضیحات اینجا میذارم ممنون میشم راهنمایی کنید.
لطفا commentهای داخل فایل رو که فارسی نوشتم به ترتیب شماره بخونید.
[attachment=163]


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - جوادیان - 12-18-2012 09:18 PM

(12-18-2012 08:12 AM)871226518 نوشته شده توسط:  تشکر میکنم از شما ولی متاسفانه به این شکل جواب نگرفتم.در واقع کاری که میخوام انجام بشه به این صورت هست:
یک تابع با یک پارامتر ورودی رو در onclick یک لینک فراخوانی میکنم ،حالا میخوام اون متغیرم رو با این پارامتر مقدار دهی کنم.یعنی از اول که متغیر رو تعریف کردم هیچ مقداری بهش ندادم ومقداردهی اولیه هم درون تابع انجام میشه.
من فایلم رو همراه با توضیحات اینجا میذارم ممنون میشم راهنمایی کنید.
لطفا commentهای داخل فایل رو که فارسی نوشتم به ترتیب شماره بخونید.

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

http://up.toca.ir/images/bab6ncbo4o2w7xzdi71a.zip = لینک فایل

برای کار با آژاکس هم پیشنهاد میکنم از متدهای اصلی آژاکس استفاده نکنید. فکر میکنم اگه از jquery استفاده کنین خیلی کارتون راحت تر میشه و با یک خط کد کل کارها رو انجام میدید و قدرت کد و مطابقتش با مرورگرها نیز بیشتر است. بعضی از مرورگرها ممکن است از getElementById پشتیبانی نکنند یا از innerHtml ولی این کدها را به راحتی میتونین با jquery بنویسین .
یا مثلا اگه از jquery استفاده کنین میتونین راحت اطلاعات ارسال شده از سرور رو توسط json بگیرین.


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - 871226518 - 12-19-2012 06:18 AM

(12-18-2012 09:18 PM)جوادیان نوشته شده توسط:  سلام. خواهش میکنم. اینجا هم جواب میده فقط شما تابع showResult را فراخوانی نکرده اید. برای اینکه متغیر مقدار دهی شود باید این تابع فراخوانی شود تا متغیر مقدار دهی شده و سپس از آن استفاده کنید. دو دکمه اضافه کردم به صفحه که یکی متغیر را مقدار دهی میکند و دیگری متغیر را نمایش می دهد . قبل از مقداردهی متغیر آن را تعریف نشده نمایش می دهد.

http://up.toca.ir/images/bab6ncbo4o2w7xzdi71a.zip = لینک فایل

برای کار با آژاکس هم پیشنهاد میکنم از متدهای اصلی آژاکس استفاده نکنید. فکر میکنم اگه از jquery استفاده کنین خیلی کارتون راحت تر میشه و با یک خط کد کل کارها رو انجام میدید و قدرت کد و مطابقتش با مرورگرها نیز بیشتر است. بعضی از مرورگرها ممکن است از getElementById پشتیبانی نکنند یا از innerHtml ولی این کدها را به راحتی میتونین با jquery بنویسین .
یا مثلا اگه از jquery استفاده کنین میتونین راحت اطلاعات ارسال شده از سرور رو توسط json بگیرین.

البته من فراخوانی کرده بودم ولی اون قسمت از کد رو برای شما ارسال نکردم.نمی دونم قبل از این کدوم قسمت رو اشتباه نوشته بودم که کار نمی کرد بهرحال الان درست شد و سپاسگزارم.
در رابطه با Ajax هم حقیقتش jQuery رو بلد نیستم اتفاقا یک مشکل بزرگ هم با همین کدهای Ajax دارم و اصلا کارنمیکنه تا حالاهم دلیلشو نفهمیدم.
یک منو که تشکیل شده از چند لینک دارم و میخوام با کلیک روی هرکدوم صفحه ی مربوط به اون در کادر زیرینش نمایش داده شه.با استفاده از متدهای اصلی Ajax که کار کردم ، روی onclick هرلینک تابع موجود در کدهای Ajax رو با یک پارامتر خاص فراخوانی کردم و فایل php که قرار بود اطلاعاتش در کادر نمایش داده شه حاوی یک ساختار switch case بود که یکی یکی پارامترها رو چک میکرد و page مربوطه رو include میکرد.
این در یک سیستم جواب میداد و در سیستم دیگه خیر.
حالا چیزی که من در کدهای jQuery دیدم اینطوری نبود و فقط برای یک دکمه یا یک لینک خاص یک تابع رو اجرا و یک فایل php رو در کادر مورد نظر نمایش میده.میخوام ببینم اگه بخوام این مورد رو که عرض کردم با jQuery پیاده سازی کنم باید دقیقا چطور عمل کنم.
اگر امکانش براتون هست فایل کدهای jQuery رو برام بذارید تا جایگزین کنم.
تشکر فراوان از شما


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - 871226518 - 12-19-2012 07:46 AM

در ضمن یک سوال دیگه هم دارم.میخوام تابعی که در onclick لینک فراخوانی میشه فقط در صورتی اجرا شه که کاربری که کلیک رو انجام میده به سایت login کرده باشه و درغیر اینصورت سیستم پیام بده که لطفا ابتدا login کنید.
کاری که انجام دادم این بود که دو تا لینک که در onclick یکی تابع مورد نظرم بود و در دیگری alert با پیغامی جهت login کاربر،تعریف کردم.اولی رو بشرط اینکه session کاربر ایجاد شده باشه نمایش میده و در غیر اینصورت دومی رو نمایش میده.جواب که گرفتم ولی میخوام ببینم این راه درست و منطقیه یا روش بهتری برای این کار وجود داره؟چون خیلی از قسمت های سایت نیاز هست که برای کاربران مهمان عمل نکنند.
تشکر مجدد


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - جوادیان - 12-19-2012 10:26 AM

(12-19-2012 07:46 AM)871226518 نوشته شده توسط:  در ضمن یک سوال دیگه هم دارم.میخوام تابعی که در onclick لینک فراخوانی میشه فقط در صورتی اجرا شه که کاربری که کلیک رو انجام میده به سایت login کرده باشه و درغیر اینصورت سیستم پیام بده که لطفا ابتدا login کنید.
کاری که انجام دادم این بود که دو تا لینک که در onclick یکی تابع مورد نظرم بود و در دیگری alert با پیغامی جهت login کاربر،تعریف کردم.اولی رو بشرط اینکه session کاربر ایجاد شده باشه نمایش میده و در غیر اینصورت دومی رو نمایش میده.جواب که گرفتم ولی میخوام ببینم این راه درست و منطقیه یا روش بهتری برای این کار وجود داره؟چون خیلی از قسمت های سایت نیاز هست که برای کاربران مهمان عمل نکنند.
تشکر مجدد

برای جی کوئری کدهاشو میشه گذاشت ولی خوب باید یه مقداری آشنایی با جی کوئری داشته باشین که البته خیلی هم سخت نیست اگه آشنایی با جاوااسکریپت و سی اس اس دارین باهش زیاد مشکلی پیدا نمیکنین سریع میشه یاد گرفت. فکر کنم اگه بخوان از جی کوئری استفاده کنین تو کدهاتون باید یه کم باهش آشنا شین . من تابع مربوط به پست را در زیر قرار میدم البته قبل از اینکه کد ها رو بنویسین باید فایل جی کوئری رو اضافه کنین. داخل script بعدی کدهاتون رو قرار میدهید.

لینک فایل = http://up.toca.ir/images/p7sdig260evb1s0znh.zip

تو این فایل یه مثال کوچیک زدم که از تابع post استفاده میکنه. تمام محتویات فولدر رو باید در localhost بریزید.

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

البته یه چیز دیگه فکر کنم بهتر بود این پست رو تو قسمت دیگه ای میزدید چون این قسمت مربوط به آموزش ساخت منوی پایین افتادنی است.

موفق باشین.


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - 871226518 - 12-19-2012 08:29 PM

(12-19-2012 10:26 AM)جوادیان نوشته شده توسط:  برای جی کوئری کدهاشو میشه گذاشت ولی خوب باید یه مقداری آشنایی با جی کوئری داشته باشین که البته خیلی هم سخت نیست اگه آشنایی با جاوااسکریپت و سی اس اس دارین باهش زیاد مشکلی پیدا نمیکنین سریع میشه یاد گرفت. فکر کنم اگه بخوان از جی کوئری استفاده کنین تو کدهاتون باید یه کم باهش آشنا شین . من تابع مربوط به پست را در زیر قرار میدم البته قبل از اینکه کد ها رو بنویسین باید فایل جی کوئری رو اضافه کنین. داخل script بعدی کدهاتون رو قرار میدهید.

لینک فایل = http://up.toca.ir/images/p7sdig260evb1s0znh.zip

تو این فایل یه مثال کوچیک زدم که از تابع post استفاده میکنه. تمام محتویات فولدر رو باید در localhost بریزید.

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

البته یه چیز دیگه فکر کنم بهتر بود این پست رو تو قسمت دیگه ای میزدید چون این قسمت مربوط به آموزش ساخت منوی پایین افتادنی است.

موفق باشین.

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


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - Eb7f - 12-23-2012 10:51 PM

در مورد نحوه ی دسترسی و استایل دهی به لیست ها بیشتر توضیح بدین !


RE: آموزش ساخت یک منوی پایین افتادنی چندگانه - elias.f - 12-24-2012 07:07 AM

(12-23-2012 10:51 PM)Eb7f نوشته شده توسط:  در مورد نحوه ی دسترسی و استایل دهی به لیست ها بیشتر توضیح بدین !

چه عجب یک نفر سوال مرتبط با این موضوع پرسید.
تیم پشتیبانی چرا پستی که مرتبط با موضوع نیست رو منتقل یا حذف یا .... نمیکنید؟ این موضوع در بیشتر صفحات هست!!

نحوه دسترسی رو میگمموفق
اما استایل دهی یه دنیا اطلاعاته!! استایل دهی به کجای لیست و چه استایلی؟ میخواین چه شکلی بشه!
استایل دهی رو میتونین با آزمون و خطا هم برین که بهترین جواب رو میگیرین.

دسترسی به لیست ها هم خیلی سادست.
شما به جز مواردی که کلاس و آیدی تعریف میکنید، در لیست ها میتونید عناصر زیر لیست رو نشونه گیری کنیدموندن!
فرض کنید به کل لیست یک کلاس داده باشید و همین کافیه.
شما باید برای هر تگی که درون این لیست قرار میگیره از روش های زیر استفاده کنید:

حالت اول : مثلا شما میخواین که تمام المان ها یا همون گزینه های لیست رو تغییر فونت بدید. خب باید بگید هرچی تگ li دارم رو نشونه بگیر یا انتخاب کن و بعد این فونت رو بش بدین.
به عنوان نمونه کد :
کد:
.nav li
هرچی li درون تگی با کلاس nav داریم رو انتخاب میکنه. دیگه کار نداره که این تگ li در زیر لیست اول باشه یا در زیر لیست 10ام.
بیشتر بگم؟عصبانی
باشهنمیره تو مخ
مثلا کد بالا تمام li های زیر رو حتی تا آخرین عمق انتخاب میکنه:
کد php:
<ul class="nav">
    <
li>//انتخاب میشود
        
<ul>
            <
li>//انتخاب میشود
                
<ul>
                
                    <
li>//انتخاب میشود
                    
</li>
                    
                    <
li>//انتخاب میشود
                    
</li>
                    
                </
ul>
            </
li>
            
            <
li>//انتخاب میشود
            
</li>
        </
ul>
    </
li>
    
    <
li>//انتخاب میشود
        
<ul>
            <
li>//انتخاب میشود
            
</li>
            
            <
li>//انتخاب میشود
            
</li>
        </
ul>
    </
li>
</
ul

حالت دوم:
اما یه موقع هست که شما فقط میخواین که گزینه های زیر لیست اول انتخاب بشن.
باید برای انتخابشون اینجوری بنویسین:
کد:
.nav > li
خب این کد فقط li های اولین عمق را انتخاب میکند:
کد php:
<ul class="nav">
    <
li>//انتخاب میشود
        
<ul>
            <
li>
                <
ul>
                
                    <
li>
                    </
li>
                    
                    <
li>
                    </
li>
                    
                </
ul>
            </
li>
            
            <
li>
            </
li>
        </
ul>
    </
li>
    
    <
li>//انتخاب میشود
        
<ul>
            <
li>
            </
li>
            
            <
li>
            </
li>
        </
ul>
    </
li>
</
ul