ممنون میشم راهکار بدید
$("#new1").click(function () {
var ID = "test1";
var Title = "فرم۱";
$(‘#myDiv’).append(
‘<div class="centerDiv" id=’ + ID + ‘"Frm"’ + ‘title=’ + Title + ‘>’ +
‘<div class="Handle" >’ +
‘<img src="images/close.gif" class="Close" title="Close"/>’ +
.
.
.
‘</div>’+
‘</div>’);
$(‘.centerDiv[id= "' +ID + '"]‘).next(‘div.Handle’).append(‘<span>’ + Title + ‘</span>’);
.
.
.
می خواستم بدونم چطور میتونم با استفاده از JQuery وب پارت ها رو به کار بگیرم به طوری که Postback نداشته باشم و جابجایی عناصر توی صفحه مثل پلاگین Sortable جی کوئری انجام بگیره؟
توی اینترنت هم گشتم و توی جستجو هام فقط این لینک به ظاهر به درد بخور اومد ولی نتونستم ازش سر در بیارم.
دوستان می تونند راهنمایی کنند؟
ممنون میشم اگه اطلاعای دارید من رو راهنمایی کنید.
هدف از ایجاد این تاپیکم اینه که در درجه ی اول خودم از نظرات و پیشنهادات و انتقادات دوستان استفاده کنم و کارم رو بهتر کنم و در اضای این لطف شما عزیزان منم به سهم خودم به سوالات دوستانی که میخوان همچین چیزایی رو در سایت های خودشون داشته باشند و …. پاسخ بدم و راهنماییشون کنم
فقط دوستان دقت کنند که چون من کدهام و قالب رو اکثرا خودم دستی نوشتم نمیتونم به یک یک دوستان توضیحات کامل و جامعی (مثلا کد آماده و هلو برو تو گلو
) بدم
کمک های من در مورد کدها در حده راهنمایی احتمالی به منابعی که استفاده کردم یا کپی / پیست کدهایی هست که خودم نوشتم هست و نه بیشتر
از مقدمه بگزریم این شما و این هم اخرین کار طراحی سایت من که تا الان حدودا ۲ سال و اندی به طول کشیده و کماکان در مرجله دولاپمنت هست
به نظره من بعضی طرح ها رو آدم باید برای دلش بزنه نه منافع مادی که این طرح ها هیچ وقت تمومی ندارن معمولا
برسیم به اطلاعات: (دامنه اصلی فیل شده متاسفانه، میتونید جای دامنه اصلی با این دامنه برید: metal-station1.tk – چه کنیم دیگه کار فرهنگی به ما نیومده گویا!×!)
صفحه ایندکس سایت که استاتیک و فریم طراحی شده و با ajax و rss اطلاعات رو از انجمن میگیره و نمایش میده
رادیو آنلاین سبک شناسی سایت که استاتیک و با فریم و فلش طراحی شده و به صورت pop-up باز میشه
البته برنامه نویسی این رادیو برای ۲-۳ سال پیش هست برای همین یه مقدار دموده شده به قولی
فایل های ام پی تری هم اول با جت آودیو به بیت ریت مورد نظر تبدیل و بعد با برنامه swish jukebox به فلش تبدیل شدند (دردسر زیاد داره :دی)
رادیو آنلاین دوم سایت که با هدف سبک شناسی اومد ولی ناقص مونده، این رادیو اسکریپت هست و قابلیت دریافت فایل mp3 از تو یه فولدر خاص روی سرور رو داره و همینوط خواندن IDE TAG ها و نمایش اونها، به مراتب ساده تره ولی من که خودم زیاد باهاش حال نکردم، خوبش اینه که با ftp فقط نیاره که mp3 ها رو آپلود کنیم و بعد فرار کنیم! بقیش با خودشه
http://metal-station.net/ads
http://metal-station.net/links
خوب این دوتا هم صفحات استاتیک هستند که جداگونه برنامه نویسی شدند برای مصارف خاصه و عامه!
چیزه خاصی ندارن به یک فرم سندر php هم وصل هستند برای گرفتن اطلاعات field ها و ارسال ایمیل، برای اینکه کار با کلاس باشه ایمیل اصلی که گوگل هست روی دامنه انداختم و ایمیل ها به اسمه info و با دامنه سایت برای کاربرها فرستاده میشه، هیمنطور از قابلیت vacation ایمیل گوگل هم سواستفاده کردم و یه اتو ریپلای ساختم برای کلاس بازم بیشتر
خوب حالا اصله کاری که خوده انجمن هست به این آدرس:
http://metal-station.net/forum
انجمن ویبولتین ورژن ۳٫۶ بوده که الان ۳٫۸ هست، قالب رو خودم روی قالب دیفالت وی بولتین نوشتم که میشه گفت ورژن دارک همون قالب پیشفرض هست، اکثر تغییراتی که تو صفحه اول سایت میبینید دستی انجام شدند و با یه نگاه به سورس راحت میتونید اطلاعات هر کدوم رو ببنید چون برای راحتی خودم و شما کدهای هر قسمت رو دسته بندی و با کامنت مشخص کردم؛ این اواخر هم از jquery و css3 توش استاده کردم که یه شکل و نمای بهتری داده
از بالا به پایین:
چیزهای کلی رو اشاره کردم اگر چیز خاصی مدنظورتون هست اشاره کنید
نظرتون رو هم حتما بگید ترجیحا تشکر خالی نزنید چون هدفم از این تاپیک اینه که لول کارم رو ارتقا بدم
سوالی چیزی بود هم در خدمتم
راستی یه بخشه ویکی مانند هم در حال اضافه شدن هست که اطلاعات گروه ها توش قرار بگیره با انجمن bridge شه ولی زمان میبره
ممنون از همگی
موفق و موید باشید – داریـــــــوش
موفق باشید
یه گزارش سی ام اس نیوز : نسخه جدید سیستم مدیریت محتوای نیوک فارسی ، پس از ۵ روز تاخیر ( تاریخ انتشار اعلام شده : ۱۳۸۹/۱۲/۲ ) با تغییراتی بسیار زیاد و بومی سازی های انجام شده توسط تیم پشتیبانی ، در دسترس عموم قرار گرفت .
در انتشار این نسخه تاخیری چند روزه رخ داد که امیدواریم این تاخیر در جهت بهبود و افزایش کارایی این سیستم قدرتمند مورد استفاده قرار گرفته باشد .
البته با توجه به اینکه سایت اصلی نیوک دیگر نسخه ای را منتشر نخواهد کرد و این نسخه به صورت کامل توسط مرجع نیوک فارسی منتشر شده است و خدمات ارائه شده توسط مرجع نیوک فارسی در این نسخه ، بسیار قابل توجه و قدردانیست ، اما برای نزدیک شدن به معیارهای جهانی باید کمی بیشتر در اعلام تاریخ انتشار نرم افزار دقت کرد تا تاخیری در کار نباشد .
نیوک فارسی در این رابطه عنوان کرد : به لطف و عنایت خدا پس از ماه ها تلاش ؛ نسخه ۸٫۳ نیوک فارسی به بهره برداری رسید .
بحمدالله امکانات قرار گرفته شده در این نسخه بسیاری از کاستی های موجود را پوشش داده و این امکان را برای کاربران نیوک فراهم ساخته تا از جدیدترین متدهای روز دنیا در زمینه وب بهرمنده شوند.
- ویرایش ۸٫۳ دارای امکانات بسیار متعددی است از جمله قدرت بالا در زمینه سئو که دارای یک سیستم اختصاصی بهینه سازی موتورهای جستجو است که نتیجه چند ماه آنالیز گروه نیوک فارسی در این زمینه میباشد ، از جمله قالبیت های سئو این نسخه سرعت بسیار بالا در ایندکس مطالب در جستجو گر گوگل میباشد.
- مبحث امنیت طبق روال نسخه های گذشته دارای اهمیت بسیار بالایی بوده و در این سخه به صورت ساختاری به بررسی کدهای نیوک پرداختیم و با ارائه نسخه جدید MTSN این فرایند را تکمیل کردیم.
- یکپارچه سازی نسخه و بهینه سازی ساختار کلی باعث شد تا سرعت لود صفحات به میزان قابل توجهی بالا رود و این امر به عینه پس نصب و یا آپدیت به نسخه ۸٫۳ مشخص است
- بخش های جدیدی از جمله پنل sms ، سیستم گزارش گیری ، مدیریت فایل و …. در این نسخه گنجانده شده که قابلیت های نسخه ۸٫۳ را منحصر به فرد نموده است
برخی از تغییرات اعمال شده در این نسخه :
- بروز رسانی نسخه انجمن نیوک
- امکان کسر امتیاز از خبرها با دکمه های + و -
- حل و بهینه سازی مشکل موتور جستجوی phpnuke
- اضافه کردن سبد خرید و همچنین پیگیری سفارشات به ماژول فروشگاه
- بررسی کردن کرنل و امنیت نیوک و حذف حتی باگ هایی که مهم نبودند به طوری که اگر حتی سیستم امنیتی مشهد تیم Bypass شد باز هم در مقابل حملات امن باشد
- بهینه سازی سرعت سیستم phpnuke
- بهینه سازی بخش هایی که به سرور فشار می آوردند
- حذف نگهبان نیوک و بهینه سازی MTSN برای جایگزینی نگهبان نیوک
- تغییر بخش اعضای آنلاین که در صورتی که مهمان وارد سایت شود دو قسمت اول آی پی آن نشان داده شود
- بهینه سازی بلوک اعضای آنلاین
- اضافه شدن ماژول شاخه بندی که می توان به صورت داینامیک شاخه ها و زو زیر شاخه های مورد نیاز سایت خود ا ایجاد و مدیریت نمایید
- اضافه شدذن انتخاب قالب جدید و همچنین آپلود قالب از بخش مدیریت قالب ها در تنظیمات سیستم
- اضافه شدن نوع تاریخ در سربرگ عمومی بخش تنظیمات سیستم که مشخص می کند تاریخ سایت قمری – شمسی یا میلادی باشد
- امکان اضافه شدن نمایش لینک برای اعضاء سایت
- امکان تعیین نوع امتیاز دهی که به دو حالت ستاره ای یا مثبت و منفی می باشد
- امکان فعال و غیرفعال سازی نظرات برای ماژول های مقالات و فروشگاه و … از بخش تنظیمات سیستم
- تغییر نوع فیلترنیگ متغیر ها در ساختار کلی نیوک بصورت خلاصه و مفید تر که باعث شده سرعت لود رو بهینه تر کنه
- یکپارچگی آدرس های خبری
- ایجاد نسخه موبایل و امکان هدایت اتوماتیک در صورتی که از طریق تلفن همراه کاربران به این نسخه وارد شوند
- امکان دادن دسترسی به منوهای اصلی مدیریت به کاربرانی که مدیر میشوند.برداشتن محدودیت دادن دسترسی
- امکان drag & drop کردن بلوکها برای تعیین موقعیت عمودی در مدیریت بلوکها
- نمایش نظرات تأیید نشده برای مدیر در ادامه مطلب
- امکان قراردادن پاپ آپ به هر آدرسی همراه با پلاگینهای جی کوئری در هر جای سایت
- مدیریت کامل اشتراک گذاریها در مدیریت سایت
- محدود کردن شاخه ها ، زیر شاخه ها فایلهای ماژول دانلود و دادن حق دسترسی به آنها
- اضافه کردن کلمات فارسی به فرهنگنامه
- آپشنی کردن عکس موضوعات اخبار و محصولات و امکان آپلود عکس دلخواه برای هر موضوع در مدیریت
- استفاده از اجکس در بلوک نظرسنجی و همچنین ثبت IP و کوکی برای جلوگیری از رأی چند باره در نظرسنجی
- اضافه شدن قابلیت جستجوی انجمن به ماژول جستجو برای راحتی کاربران و جستجوی بهتر
- استفاده از اجکس در قسمت تنظیمات سیستم مدیریت برای دسترسی و سوئیچ سریع بین قسمتهای مختلف
- صفحه بندی شدن قسمت آخرین خبرهای ارسالی در مدیریت سایت (۲۰ مطلب ویژه) مانند صفحه بندی اخبار در صفحه اصلی
- اضافه شدن جستجو بر اساس نام خبر به این قسمت برای دسترسی سریع به خبر مورد نظر برای ویرایش یا حذف
- اضافه شدن قابلیت مرتب سازی اخبار بر اساس امتیاز و بازدید
- طراحی قالب جدید و کاملا اختصاصی با امکانات JQuery در نسخه جدید
- اضافه شدن مدیریت فیلد های ثابت برای غیرفعال / فعال ، ضروری / غیرضروری کردن فیلد هایی که هنگام ثبت نام به کاربر نشان داده می شود .
– اضافه شدن تقریباً تمامی بخش ها و ماژول ها در بخش ایجاد مدیر جدید بدین صورت که شما می توانید برای مدیرانی که می خواهید انتخاب نمایید تک تک بخش هایی که می خواهید یک مدیر به آن دسترسی داشته باشد را تیک بزنید در نسخه کنونی این گزینه های محدود هستند .
– اضافه شدن زبان در بخش ایجاد مدیر جدید که می توانید زبان پیش فرض برای مدیری که می خواهید انتخاب کنید تعیین کنید .
- اجکس شدن اکثر قسمتهای مدیریت بلوکها برای اعمال تغییرات در بلوکها (ویرایش ، حذف و …)
برای دریافت این نسخه به اینجا مراجعه فرمایید
پایان خبر – /
و حالا یه مشکل دیگه
وقتی که با تابع get جی کوئری Script رو می گیرم بدون هیچ عملی خودش ۲ بار اسکریپت رو اجرا می کنه ولی تابع load این مشکل رو نداشت تابع getScript کارش چیه ؟ فکر کنم اون کار منو راه بندازه
خیلی ممنون می شم ….
:قلب:
:rose:
شاید با یک جستجوی ساده بتوانید کتابهای زیادی را در مورد موضوعات مختلف پیدا کنید اما در این پست با ۱۰ کتاب آنلاین رایگان برای طراحان وب آشنا می شوید.
۱. A Practical Guide to Designing for the Web
هدف این کتاب آموزش طراحی وب با استفاده از اصول طراحی گرافیک است. این کتاب شامل ۵ بخش که هر کدام مفهومی از دانش گرافیک را پوشش می دهد.
۲. Getting Real
این کتاب محصولی است از شرکت ۳۷signal که تولید کننده نرم افزارهای آنلاین است و محصولاتش بیش از ۱ میلیون نفر در سراسر دنیا استفاده می شود. این کتاب شامل فلسفه های شرکت در زمینه های کاری، طراحی،بازاریابی و برنامه نویسی است.
۳. The Elements of Typographic Style
این کتاب در مورد تایپوگرافی در وب بوده به شما آموزش می دهد چگونه با تکنیکهای HTML و CSS بتوانید تایپوگرافی درستی را داشته باشید.
این کتاب مباحث پایه ای جی کوئری را شرح می دهد.
۵. Web Style Guide
این کتاب مباحث پایه طراحی وب را مورد بررسی قرار می دهد. جالب است بدانید این کتاب ویرایش سوم خود را پشت سر گذاشته است.
این کتاب مباحث usability را پوشش داده و لینک به مقالات و آموزشهای مختلفی را در بر دارد.
۷. Web Designer’s Success Guide
این کتاب به شما کمک می کند بتوانید تبدیل به یک freelancer شوید و برای خودتان کار کنید.
۸. The Web Book
این کتاب تمام اطلاعات برای طراحی وب از اول را شامل می شود. این پست از ثبت نام دامنه شروع کرده تا ساخت یک سایت با PHP و MYSQL پیش می رود.
همانطور که از نام کتاب مشخص است مباحث مربوط به HTML5 را تحت پوشش قرار می دهد.
۱۰. Integrating Accessibility Throughout Design
به شما در طراحی سایتی بسیار دسترسی پذیرتر کمک می کند.
کتابهای بالا همه به زبان انگلیسی است اما اگر علاقه مند به مطالعه به زبان فارسی هستید به تازگی سایت ITT کتابی را در رابطه با آموزش HTML منتشر کرده است که می توانید آنرا دانلود کنید.
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>
و کد حاواش اینه:
<script type=" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>
با چه کدی و چه روشی ۵ تا فیلد رو بزاریم توی اسلایدر؟! آیا مثلا قبل توی یه گرید ویو باشه؟
ممنون میشم راهنمایی کنید
لینک کد اسلایدر
http://www.dreamcss.com/2009/04/crea…y-sliders.html
- قالب رو کلا توی فتوشاپ زدم و آخر تبدیلش کردم (البته جونم در اومد، چون همه کارشو خودم تهنایی انجام دادم :green:).
- قالب تمام سی اس اس و از تکنولوژی آجاکس و جی کوئری هم استفاده کردم!
- هفت روز طول کشید تا کاملا تموم بشه،
- سی ام اس این قالب هم دیتالایف انجین هست.
کیفیت و حجم عکس یکم خیلی کم شده :green:برای دیدن کل سایت روی عکس کلیک کنید.
ببخشید یکم جمله بندیم و نگارشم خوب نیست، ممنون میشم نظراتون رو بگید :rose::wink:
.:. ویرایش شده توسط عرفان .:.
شاید با یک جستجوی ساده بتوانید کتابهای زیادی را در مورد موضوعات مختلف پیدا کنید اما در این پست با ۱۰ کتاب آنلاین رایگان برای طراحان وب آشنا می شوید.
۱. A Practical Guide to Designing for the Web
هدف این کتاب آموزش طراحی وب با استفاده از اصول طراحی گرافیک است. این کتاب شامل ۵ بخش که هر کدام مفهومی از دانش گرافیک را پوشش می دهد.
۲. Getting Real
این کتاب محصولی است از شرکت ۳۷signal که تولید کننده نرم افزارهای آنلاین است و محصولاتش بیش از ۱ میلیون نفر در سراسر دنیا استفاده می شود. این کتاب شامل فلسفه های شرکت در زمینه های کاری، طراحی،بازاریابی و برنامه نویسی است.
۳. The Elements of Typographic Style
این کتاب در مورد تایپوگرافی در وب بوده به شما آموزش می دهد چگونه با تکنیکهای HTML و CSS بتوانید تایپوگرافی درستی را داشته باشید.
این کتاب مباحث پایه ای جی کوئری را شرح می دهد.
۵. Web Style Guide
این کتاب مباحث پایه طراحی وب را مورد بررسی قرار می دهد. جالب است بدانید این کتاب ویرایش سوم خود را پشت سر گذاشته است.
این کتاب مباحث usability را پوشش داده و لینک به مقالات و آموزشهای مختلفی را در بر دارد.
۷. Web Designer’s Success Guide
این کتاب به شما کمک می کند بتوانید تبدیل به یک freelancer شوید و برای خودتان کار کنید.
۸. The Web Book
این کتاب تمام اطلاعات برای طراحی وب از اول را شامل می شود. این پست از ثبت نام دامنه شروع کرده تا ساخت یک سایت با PHP و MYSQL پیش می رود.
همانطور که از نام کتاب مشخص است مباحث مربوط به HTML5 را تحت پوشش قرار می دهد.
۱۰. Integrating Accessibility Throughout Design
به شما در طراحی سایتی بسیار دسترسی پذیرتر کمک می کند.
کتابهای بالا همه به زبان انگلیسی است اما اگر علاقه مند به مطالعه به زبان فارسی هستید به تازگی سایت ITT کتابی را در رابطه با آموزش HTML منتشر کرده است که می توانید آنرا دانلود کنید.
اگر شما هم برنامه نویس و توسعه دهنده باشید حتما با مشکل استفاده و یافتن ادیتورهای متن HTML برای بخش های از سایتهایی که طراحی میکنید روبرو شده اید. پیدا کردن ادیتوری رایگان و با امکانات مناسب از مسائل برنامه نویسان میباشد. در این پست قصد دارم ۱۰ ادیتوراکثرا رایگان و بعضا اوپن سورس را به شما معرفی کنم که بتوانید از آنها در پروژه های خود استفاده نمایید. البته ضعف تمامی آنها این است که بصورت پیش فرض “راست چین” را پشتیبانی نمیکنند اما با توجه به در اختیار بودن سورس این ادیتورها شما میتوانید این قابلیت را در انها بگنجانید :
ادیتوری بسیار ساده، کارآمد و سبک و قابلیت خصوصی سازی آن هم جالب توجه است. شما میتوانید بخش های مورد نظر خود را به راحتی دانلود و فقط از آنها استفاده نمایید.
TineMCE بسیار کاربردی و با محیطی کاربرپسندانه و مشابه ورد. این ادیتور در ورد پرس و بسیاری از CMS های دیگر مورد استفاده قرار گرفته. اپن سورس است و بسیار قدرتمند
CKeditor ورژن جدید ادیتور FCKeditor میباشد که تمامی نقاط ضعف خود را برطرف کرده و بسیار کاربرپسند و کاربردی و دارای محیطی مانند ورد و Open Office میباشد.
ادیتور توسعه داده شده توسط تیم یاهو
Markitup در حقیقت یک افزونه جی کوئری است و همچنین یک WYSIWYG نمیباشد اما تمامی قابلیتهای ابتدایی یک WYSIWYG را داراست، همچنین شما متیوانید نتیجه کدهای خود را توسط دکمه preview در همان لحظه و در پایین این ادیتور مشاهده نمایید.
FreeTextBox ادیتوری مخصوص Asp.net میباشد، پس میتوان حدس زد که این نرم افزار اوپن سورس نمیاشد اما نسخه رایگان آن امکانات خوبی را در اختیار شما قرار میدهد.
همانطوری که از نام این ادیتور بر می آید، ادیتوری بر اساس کتابخانه موتولز (MooTools)
ادیتوری با قابلیتهای فراوان و زیاد اما متاسفانه هنوز با گوگل کرئم سازگار نشده است
اگر با جداول زیاد سر وکار دارید این ایدتور بهترین انتخاب برای شما میباشد. همچنین قابلیت استفاده برای زبانهای برنامه نویسی PHP و asp.net
باز هم پلاگین دیگری که توسط کتابخانه جی کوئری توسعه یافته است، بسیار سبک و با قابلیت خصوصی سازی بسیار بالا
پرتال نیوک لرن نرم افزاری است که شما می توانید پس از دانلود , آن را به هاست ( فضای سایت ) خود منتقل کنید و مراحل نصب آن را طی کنید .
برای یادگیری نصب پرتال نیوک لرن به این بخش مراجعه کنید :
http://www.nukelearn.com/article108.html
ولی اگر می خواهید بدانید چرا باید از پرتال نیوک لرن برای ایحاد سایت استفاده کنید :
پرتال نیوک لرن بر پایه پرتالی قدیمی و معروف در ایران توسعه داده شده است . این پرتال ادامه پرتالی به نام ایران نیوک است که زمانی در ایران مشهورترین پرتال به شمار می رفت . توسعه ی این پرتال در ۵ سال احیر موجب شده که پرتال ما به سطح پایداری و کاربردی مطلوب خود برسد .
در نسخه اول نیوک لرن ما شاهد صدها تغییر هستیم که این می تواند بسیار به کیفیت آن بیافزاید .
اولین نسخه و انتشار آن :
نسخه ۱٫۰٫۰٫۰ پرتال نیوک لرن در حالی منتشر شده است که ۸ مرحله توسعه آلفا که فقط در اختیار توسعه دهندگان ( حامد مومتی – امیرحسین نیکوکار – اوریا بوستانی – مهدی خادم معارف – فرشاد غضنفری ) بوده است و در ۸ مرحله توسعه و تست بتا با توسعه دهندگان ( حامد مومنی – فرشاد غضنفری ) و تمام دوستان داوطلب طی شده است . و این یعنی ۱۶ مرحله تست و توسعه امکانات .
از مهمترین امکانات صورت گرفته در اخرین نسخه :
- موتور اختصاصی قالب های پرتال نیوک لرن و سیستم کش
- مدیریت کاملا مستقل و همراه با فناوری آجاکس
- کار بر روی امنیت پرتال
- انجمن های phpbb3
- تولید محتوا به صورت PDF فارسی
- فریم ورک جی کوئری و پلاگین های آن
- ذخیره خودکار در هنگام نوشتن مطلب
- کد امنیتی به صورت سوالی و تصویری
- سیستم تگ گذاری بر روی مطالب و …
- بخش کاربری جدید ماژول دانلودی ها
- ویرایشگر ckeditor 3.2
- مدیریت کاملا آجاکسی وپیشرفته مدیریت تحریریه
- و ده ها امکان بزرگ دیگر و صدها تغییر و تحول کوچک لیست کامل امکانات و تغییرات این نسخه را می توانید در لینک زیر بخوانید
http://www.nukelearn.com/wiki/index.php/Usv_features
دانلود پرتال نیوک لرن نسخه ۱٫۰٫۰٫۰
http://nukelearn.com/downloads-53.html
این نسخه تنها برای کسانی است که می خواهند از ابتدا نصب و استفاده کنند
سی ام اس تاک برای این تیم و این سیستم پرتال ساز قوی فارسی آرزوی موفقیت روز افزون دارد
سلام, امیدوارم پست قبلی که ” ۲۰ افکت جی کوئری برای متن ” بود رو دیده باشید چون طبق قولی که در اون پست داده بودم قصد دارم یکی از رایج ترین افکت هایی که در صفحات وب میبینید یعنی بزرگتر و کوچکتر کردن اندازۀ فونت رو بهتون آموزش بدم. فقط خدمتتون عرض کنم که این پست بیشتر از پستهای دیگه می طلبه که جاوا اسکریپت بلد باشین. با اینکه اینجا قراره آموزش جی کوئری داده باشه من تمام تلاشم رو کردم که ساده و مختصراندکی از کدهای جاوا اسکریپت رو هم توضیح بدم. امیدوارم که لذت ببرید.
خب ابتدا متنی تهیه می کنیم و بالای آن یک لینک با آی دی Larger و یک لینک دیگر با آی دی Smaller می سازیم :
<body>
<a href="#" id="larger">بزرگتر</a>
<br/>
<a href="#" id="smaller">کوچکتر</a>
<p>متن</p>
</body>
سپس متنی تهیه می کنیم که روی آن تست کنیم. من پانزده جمله که حاصل عمر گابریل گارسیا مارکز بود انتخاب کردم. حالا سراغ اصل ماجرا که کد های جی کوئری هست میریم. طبق معمول ابتدا کل کد رو می نویسم سپس تک تک توضیح می دم :
$(function() {
$('a').click(function() {
var os = $('p').css('font-size');
var num = parseFloat(os);
var uom = os.slice(-2);
if(this.id == 'larger') {
$('p').css('font-size', num * 1.4 + uom);
} else
$('p').css('font-size', num / 1.4 + uom);
})
})
دیگه حتماً بعد از ۸ جلسه با کد function و click آشنا هستید… پس میریم سراغ
var os = $('p').css('font-size');
var مخفف کلمۀ variable به معنی متغیر هست. Os هم مخفف کلمۀ orginal size هست. در این کد ما فقط قصد داریم که متغیر سایز رو برای پاراگراف یا همون p تعریف کنیم. دقت کنید که ما می تونستیم همینجا سایز پیش فرض رو تعیین کنیم روی مثلاً ۳۰ پیکسل :
var os = $('p').css('font-size' , ‘۳۰px’);
خب سراغ کد بعد میریم :
var num = parseFloat(os);
کسانی که جاوا اسکریپت بلد هستند معنی این کد رو خیلی خوب متوجه میشن. ببینید کار کد parseFloat در اینجا اینه که مقدار اولیه اندازۀ فونت رو میگیره. اینجا os یا سایز اصلی رو میگیره. نوشتن این کد ضروریه چون نیاز داریم تا در کد های بعدی به سایز اصلی کدمون اضافه بشه و باید سایز اصلی با این کد استخراج بشه.
var uom = os.slice(-2);
خب با این کدقصد داریم تا واحد اندازه گیریمون رو مشخص کنیم. Uom مخفف unit of measure هست. Slice هم یک دستور جاوا اسکریپت هست که کلمات یا استرینگ ها رو تفکیک می کنه. ببینید اینجا چون px یا em که واحد های مد نظر ما هستند ۲ حرفی هستند ما از -۲ اسفاده کردیم. یعنی فقط px یاem رو بگیر. برای کسانی که جاوا اسکریپت بلد نیستند و می خوان فعلاً این کد رو بهتر بفهمن پیشنهاد می کنم مثال های اینجا رو ببین.
پس تا حالا با num مقدار فونت و با nom واحد فونت رو مشخص کردیم. حالا میریم سراغ بزرگتر کردن فونت ! ببینید اگر قرار بود فقط قابلیت بزرگتر کردن فونت وجود داشته باشه می تونستیم از کد زیر استفاده کنیم :
$(function() {
$('a#larger').click(function() {
var os = $('p').css('font-size');
var num = parseFloat(os);
var uom = os.slice(-2);
$('p').css('font-size', num * 1.4 + uom);
})
})
کد بالا به این معنی هست که اگر روی لینک با آی دی larger کلیک کردیم ( با توجه به تعریف num وnom ) ، سایز فونت p رو ضربدر ۱٫۴ کن و واحدش هم بذار کنارش !کافیه این کد رو جایگزین کد فایل های سورسی که دانلود کردید بذارید و نتیجه رو ببینید. می تونید به جای ۱٫۴ از ۲ استفاده کنید. اونوقت با هر کلیک فونت شما ۲ برابر خواهد شد.
شما می تونید دقیقاً یک کد دیگه برای کوچکتر کردن فونت مثل کد بالا بنویسید فقط باید به جای * از / استفاده کنید. یعنی با هر بار کلیک اندازۀ فونت رو تقسیم بر ۱٫۴ کند ! به صورت زیر :
$(function() {
$('a#smaller').click(function() {
var os = $('p').css('font-size');
var num = parseFloat(os);
var uom = os.slice(-2);
$('p').css('font-size', num / 1.4 + uom);
})
})
ولی ما نمی خوایم ۲ تا کد مثل هم داشته باشیم . می خوایم ببینیم میشه دو تا کد بالا رو با هم تلفیق کرد یا نه. خب سراغ کد اصلی میریم. دوباره می نویسمش :
$(function() {
$('a').click(function() {
var os = $('p').css('font-size');
var num = parseFloat(os);
var uom = os.slice(-2);
if(this.id == 'larger') {
$('p').css('font-size', num * 1.4 + uom);
} else
$('p').css('font-size', num / 1.4 + uom);
})
})
ببینید ما می خوایم وقتی روی a با آی دی larger کلیک کردیم فونت بزرگ بشه و در غیر این صورت کوچیک بشه. پس درستش اینه که از یک if و else استفاده کنیم. در کد بالا بعد از if از this.id استفاده کردیم که this اینجا همون a است. یعنی اگر a#larger بود فونت رو ضربدر ۱٫۴ کن و اگر اینطور نبود فونت رو تقسیم بر ۱٫۴ کن !
قسمت اضافی : حالا که فقط دو تا لینک توی صفحه داریم می تونیم باز هم کد رو کوچکتر کنیم :
$(function() {
$('a').click(function() {
var os = $('p').css('font-size');
var num = parseFloat(os);
var uom = os.slice(-2);
$('p').css('font-size', num / 1.4 + uom);
if(this.id == 'larger') {
$('p').css('font-size', num * 1.4 + uom);
}
})
})
یعنی هر لینکی تو صفحه بود فونت رو چیک کن ولی اگر آی دیش larger بود بزرگش کن ! و چون فقط یک لینک smaller به غیر از larger در صفحا موجود هست پس کد درست کار می کنه.
نمی دونید آموزش از طریق متن و غیر حضوری چقدر برای کسی که می خواد یاد بده و کسی که می خواد یاد بگیره دشواره … واقعاً دوست داشتم برای هر درس فقط یک پادکست تهیه می کردم که توی زمان کمتری توضیح بیشتری هم بدم ولی با سرعت اینترنتی که داریم ممکنه دیدن ویدئو یا دانلود اون برای مخاصب کمی دشوار باشه. به هر حال اگر هدف یادگیریه ممکنه با دوباره خوندن مطلب و کار با سورس فایلهای و مطرح کردن سئوال در کامنتها کارتون آسونتر بشه.
پستهای مرتبط :
آموزش جی کوئری در پانزده روز : روز هشتم
آموزش جی کوئری در پانزده روز : روز هفتم
آموزش جی کوئری در پانزده روز : روز ششم
آموزش جی کوئری در پانزده روز : روز پنجم
آموزش جی کوئری در پانزده روز : روز چهارم
آموزش جی کوئری در پانزده روز : روز سوم
آموزش جی کوئری در پانزده روز : روز دوم
آموزش جی کوئری در پانزده روز : روز اول
مقدمه ای بر آموزش jQuery در ۱۵ روز
امروز به عنوان استراحت بین آموزش هامون براتون ۲۰ نمونه از افکتهای جی کوئری روی متن رو آماده و جمع آوری کردم که مطمئنم خوشتون میاد چون هم ساده هستند هم کاربردی. البته در هفت روزی که تا پایان سری پانزده روزۀ آموزش جی کوئری داریم چند تا از همین افکت ها رو توضیح خواهم داد ولی شما اگر در استفاده از هر کدوم از این افکتها به مشکل برخوردید در قسمت نظرات بپرسید. دوستان دقت کنید تمام افکتها نمایش ( دمو ) دارند فقط ممکن است در لینک به اسم Demonstration یا See in action یا Example نام گذاری باشد. امیدوارم لذت ببرید.
۱٫ با استفاده از این افکت می توانید به متن خود outline , shadow gradient و mirror اضافه کنید.
۲٫ این افکت به کل متن یا پاراگراف شما خاصیت gradient می دهد.
۳٫ عکس کاملاً گویاست. این افکت باعث میشود متن شما بیرون یا درون صفحه نشان داده شود.
۴٫ حتماً می دونید که قابلیت shadow در css3 بوجود اومد و بعضی از مرورگرها مثل IE که از اون حمایت نمی کنن قابلیت نشان دادن متن با shadow نیستند. ولی این افکت به شما کمک خواهد کرد تا با IE هم بتوانید برای متن shadow ایجاد کنید.
۵٫ این افکت واقعاً کاربردی و زیباست. با این پلاگین می توانید کاری کنید که متنی که به هم ریخته است به صورت زیبایی خوانا شود یا حتی از نو نوشته شود.
۶٫ خیلی جالب میشه اگر با حرکت موس متن شما تغییر رنگ یا تغییر اندازه بده و حتی با هم این کار رو انجام بده…
۷٫ حتماً دوست دارید هنگام لود شدن کامل صفحه متنی شروع به نوشته شدن بکنه …
۸٫ این هم نوعی از افکت بالاست که می تونه متن رو کلمه به کلمه بنویسه یا نوشتن چند پاراگراف رو با هم شروع بکنه.
۹٫ اگر شک دارید که روزی جی کوئری جای فلش رو خواهد گرفت این افکت رو ببینید… حتماً روی حروف کلیک کنید و به این فکر کنید که می تونید جای حروف از اسم خودتون یا لینک بخش های مختلف سایتتون استفاده کنید …
۱۰٫ من شدیداً به این افکت علاقه دارم. ساده . زیبا و کاربردی … سایتی نیست که نشه این افکت رو توش استفاده کرد.
۱۱٫ این هم انواع shadow و gradient روی متن.
۱۲٫ خوبه که مخاطب بتونه انتخاب کنه که متن رو با چه رنگی و به خصوص با چه gradient ببینه
۱۳٫ یا هر چیز که می نویسن به صورت gradient همونجا نشون داده بشه …
۱۴٫ حتماً با خاصیت hover در css آشنا هستید. حالا فکر کنید وقتی موس رو روی لینکی میبرید رنگ لینک به مرور از رنگی که هست به رنگ دلخواهتون تبدیل بشه ! عالی نیست ؟
۱۵٫ حالا تصور کنید که خاصیت بالا برای بک گراند متن هم انجام شود. یا با هر بار حرکت موس روی لینک ، لینک به رنگ جدیدی در بیاید !
۱۶٫ رنگ نوشته و کلاً هر تگ و المان HTML که دوست دارید به صورت پیوسته عوض کنید. واقعاً افکت جالبیه با اینکه یه مقدار سرعت تعویض رنگ برای دمو زیاد هست ولی می تونه خیلی کاربردی باشه.
۱۷٫ حتماً دیدید که چند سالیه بین متن ریز روزنامه ها تکه ای میان متن با فونت بزرگ مهمترین قسمت مطلب نوشته شده. شما می تونید با نقل قول ها هم این کار را با قرار دادن کدی ساده بکنید…
۱۸٫ از عکس پیداست … با نصب پلاگین این اتفاق در وبلاگ یا سایت شما هم خواهد افتاد.
۱۹٫ هر چه تعداد کلمات شما در پاراگراف بیشتر باشد فونت به صورت خودکار کوچکتر می شود و بالعکس.
۲۰٫ انواع سیستم زوم برای متن را دیدید، در cms جوملا اغلب پوسته ها ایم امکان رو دارند ولی این زوم از جنس دیگریست.
پستهای مرتبط :
نحوه ساخت پس زمینه متحرک وب سایت توسط jQuery
آموزش جی کوئری در پانزده روز : روز هشتم
آموزش جی کوئری در پانزده روز : روز هفتم
آموزش جی کوئری در پانزده روز : روز ششم
آموزش جی کوئری در پانزده روز : روز پنجم
آموزش جی کوئری در پانزده روز : روز چهارم
آموزش جی کوئری در پانزده روز : روز سوم
آموزش جی کوئری در پانزده روز : روز دوم
آموزش جی کوئری در پانزده روز : روز اول
مقدمه ای بر آموزش jQuery در ۱۵ روز
افکتی که امروز یاد خواهیم گرفت بسیار کاربردی و مورد استفاده است. در بسیاری از سایت ها دیدید که هنگام حرکت موس عکسی کنار می رود و نوشته یا عکس زیر آن نمایان می شود. البته من در آموزش امروز ازطرح های قدیمیه خودم استفاده کردم تا روز ولنتاین یا به عبارت درست والنتین رو با جی کوئری ترکیب کنم ! و به این نحو روز عشاق رو به همۀ عاشقان ITT تبریک بگم.
کاری که قرار است انجام بدیم به این صورت است که دو عکس رو دقیقاً روی هم قرار می دهیم و با استفاده از جی کوئری کاری می کنیم که عکسی که رو قرار دادیم به طرف راست حرکت کند. البته معمولاً در سایتها عکس به سمت پایین حرکت می کند که به آن هم به صورت زیر انجام می شود. برای این کار ابتدا عکس ها رو مطابق کد زیر بین تگی با class به نام wrap قرار می دهیم.
<body>
<div class="wrap">
<img src="01.jpg" alt="image" />
<img src="02.png" class="front" alt="image" />
</div>
</body>
خب میبینید که فقط برای عکسی که رو قرار دارد class تعریف کردم چون با عکس زیری اصلاً کاری نداریم. حالا باید سراغ css و ویرایش ظاهری عکس ها بریم که در این آموزش خیلی مهم هست.
<style type="text/css">
body {
background-color:#000;
}
.wrap {
width: 340px;
height: 610px;
position: relative;
overflow: hidden;
float: right;
}
img {
position: absolute;
top: 0;
left: 0;
}
</style>
ابتدا رنگ صفحه رو مشکی کردیم. برای wrap اندازۀ طول و عرض عکسمون رو مشخص می کنیم و position رو به حالت relative قرار می دیم تا بتونیم عکس رو با استفاده از float در گوشۀ راست صفحه قرار بدیم. مهمترین بخش overflow هست. این خاصیت برای اتفاقات و ظواهریست که بیرون از کادری که تعریف کردیم اتفاق می افتد. مثلاً الان که من مقدار hidden رو تعریف کردم یعنی اگر عکس از طول ۳۴۰px و ارتفاع ۶۱۰px خارج شد آن را نشان نده ! برای img هم position رو به صورت absolute قرار دادم تا عکس ها دقیقاً روی هم بیافتند.
دقت کنید اگر مقادیر position و overflow رو پاک کنید خواهید دید که عکس ها به چه حالتی در خواهند آمد. پیشنهاد می کنم حتماً با پاک کردن و اضافه کردن مقادیر مختلف و دیدن نتیجه درک خودتون رو از المان های سازندۀ صفحات وب بیشتر کنید برای سهولت این کار حتماً پیشنهاد سر آشپز ، آخر همین آموزش رو مطالعه کنید.
الان ما دو عکس داریم که روی هم قرار گرفته اند و باید سراغ کد جی کوئری بریم تا با حرکت موس عکس رویی رو به مقدار ۳۴۰px به طرف راست حرکت بدیم. من ابتدا کد رو می نویسم سپس به تفکیک توضیح میدم :
<script type="text/javascript">
$(function() {
$('.wrap').hover(function() {
$(this).children('.front').stop().animate({ "left" : '340px'}, 1000);
}, function() {
$(this).children('.front').stop().animate({ "left" : '0'}, 800);
});
});
</script>
توضیح کد :
* hover : وقتی صحبت از حرکت موس روی عکس میشه از خاصیت hover استفاده می کنیم و چون حرکت عکس روی wrap مد نظرمون هست کد را به صورت بالا شروع می کنیم.
* this : در آموزش های گذشته توضیح دادیم و حتماً می دانید که اینجا برای صدا زدن .wrap از آن استفاده کردیم.
* children : در جی کوئری این کد به معنای پیدا کردن هست. حتی شما می تونید به جای children از find هم استفاده کنید یعنی شما می خواهیم تگی که class با نام front دارد پیدا کنید و بقیۀ کد ها رو برای اون انجام بدید. ( کد children و find تفاوت کوچیکی داره که در آموزش های بعدی توضیح خواهم داد. )
* stop : کافیه شما stop رو پاک کنید و ببینید چه بلایی سر افکت میاد ! با این حال توضیحش خالی از لطف نیست. با بکار بردن stop می گوییم عکسی که در حال حرکت است در هر جایی که هست باستد و دستورات بعدی انجام شود. اگر از Stop استفاده نکنیم و موس رو با سرعت چندین بار روی عکس ببریم خواهیم دید که عکس مدام رفت و آمد می کند و تمام حرکات را تا انتها انجام میدهد. ( در آموزش جلسۀ هفتم از stop استفاده نکردیم، می توانید برای مثال نمایش روز هفتم را ببینید )
* animate : چون قرار است عکس حرکت کند از animate استفاده می کنیم که قبلاً آشنا شدید. فقط دقت کنید که ما قصد داریم عکس رو به راست بفرستیم پس می گوییم از left به اندازۀ ۳۴۰ پیکسل به راست برو ! این اشتباه رایجیه که خودم زیاد تکرار می کنم و به اشتباه right می نوسم اکثراً. و در نهایت سرعت رفتن عکس رو ۱ ثانیه یا ۱۰۰۰ میلی ثانیه و سرعت برگشت عکس رو ۰٫۸ ثانیه تنظیم کردم.
* اگر آموزش روز هفتم رو متوجه شده باشید قسمت دوم که برگشت عکس هست احتیاج به توضیح ندارد فقط باید دقت کنید که برای left از منفی ۳۰۰ استفاده نکنید و عکس باید به جای اول خودش یعنی ۰ بازگردد.
پیشنهاد سر آشپز :
فکر می کنم تعداد زیادی از کسانیکه به ITT سر می زنند از فایرفاکس عزیز استفاده می کنند در این صورت معرفی افزونه یا پلاگین Firebug خالی از لطف نیست. برای کسانیکه احتمالاً تا کنون کار با این افزونه رو تجربه نکردن میگم که با استفاده از یکی از ویژگی های این افزونه به صورت آنی می تونید مقادیر css و تگ ها رو عوض کنید و نتیجه رو همون لحظه ببینید. این کار خیلی به یادگیری من کمک کرد. اصلاً نگران پیچیدگی این افزونه هم نباشید چون کار با اون بسیار راحته. این افزونه رو از اینجا روی فایرفاکس نصب کنید و همین الان تغییرات رو روی نمایش آموزش امروز شروع کنید.
پستهای مرتبط :
آموزش جی کوئری در پانزده روز : روز هفتم
آموزش جی کوئری در پانزده روز : روز ششم
آموزش جی کوئری در پانزده روز : روز پنجم
آموزش جی کوئری در پانزده روز : روز چهارم
آموزش جی کوئری در پانزده روز : روز سوم
آموزش جی کوئری در پانزده روز : روز دوم
آموزش جی کوئری در پانزده روز : روز اول
مقدمه ای بر آموزش jQuery در ۱۵ روز
