ff2

در یک ماه اخیر روی این سیستم خیلی کار کردیم و الان میتونم بگم به وضعیت کاملن پایداری رسیده . ساختار کد نویسی بخش GUI کاملا تغییر کرده و با پشتیبانی کامل از سیستم قالب های استاندارد زوپس حجم کد ها مخصوصا کد های HTML و PHP کاهش چشمگیری پیدا کرده . و سرعت بارگذاری بخش مدیریت به شدت افزایش پیدا کرده . همینطور با پشتیبانی سراسری از jquery  خیلی از مشکلات برای فراخونی کتاب خانه ها رفع شده . به نظرم نسخه فعلی به پایداری مناسبی رسیده و باگ هاش هم تا حد قابل قبولی رفع شده و بهتره چیز جدیدی برای نسخه زوپس ۲.۴ بهش اضافه نشه . فعلا دارم روی یه سری ویژگی برای نسخه بعدی کار میکنم البته پیشرفت زیادی نداشته .

مهمترین ویژگی که هفته پیش اضافه شد  باعث بهبود بسیار زیاد توی کار شد پشتیبانی از چیزی بوده که بهش میگن (( theme factory )) . این بعث شد حجم کد نویسی کاهش زیادی پیدا کنه و کد نویسی راحت تر بشه . همینطور بهمون اجازه داد که کد های html رو به خارج از فایل های php منتقل کنیم. حالا نیاز خیلی کمتری به کد های php ‌احساس میشه . چون دلیلی نداره دوباره کد هایی که قبلا نوشته شدن رو بنویسیم . فقط برای مدیریت فایل های زبان , منو ها , و همینطور لود کردن فایل های css و کتاب هانه های جاوا از کد های php استفاده میکنیم .

حالا حجم کد ها خیلی کم شده ما حدود ۳۵۰ خط کد html داریم و ۴۵۰ خط کد php ! البته ۳۵۰۰ خط کد css داریم :دی

بعد از چند ماه کار نسخه نهایی قالب مدیریت اکسیژن برای زوپس ۲.۴ آماده شد . توی این پست میخوام مقداری در مورد امکانات جدید اضافه شده توضیح بدم

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

(دنباله…)

بعد از چند ماه که کمبود وقت اجازه نمیداد هفته پیش تونستم یه قالب جدید بسازم . اسمش رو گذاشتم Air که دلیلش استفاده از افکت ها و تصویر های تم جدید kde به اسم air هستش .

این قالب رو میتونید از  اینجا دانلود کنید .

شما برای استفاده از دستورات jquery باید ابتدا فروم ورکر اصلی ٰ رو به صفحتون لینک بدید. توی قسمت هدر کدهاتون اضافش کنید

مثلا به این شکل



<script xsrc=“jquery.js”></script>

خوب حالا میتونید کد ها خودتون رو اضافه کنید و این کد با استفاده از توابع موجود در این فروم ورکر اجرا میشن .

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



<html>
<
head>
<
script xsrc=“jquery.js”></script>
<script>
$(document).ready(function(){
$(”.poem-stanza”).addClass(”highlight”);
});
</script>
<link rel=”stylesheet” type=”text/css”   xhref=”style.css” />
</head>

<body>
<h1>hello world</h1>
<div class=”author” >voltan</div>
<div class=”cap” id=”cap1″ >
<h2 class=”captitle”">cap title</h2>
<div class=”poem”>
<h3 class=”poem-title”>div 2</h2>
<div class=”poem-stanza”>
<div>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1</div>
<div>test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</div>
<div>test 3 test 3 test 3 test 3 test 3 test 3 test 3 test 3</div>
<div>test 4 test 4 test 4 test 4 test 4 test 4 test 4 test 4</div>
</div>
</div>
test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1
<div class=”poem”>
<h4 class=”poem-title”>div 2</h2>
<div class=”poem-stanza”>
<div>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1</div>
<div>test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</div>
<div>test 3 test 3 test 3 test 3 test 3 test 3 test 3 test 3</div>
<div>test 4 test 4 test 4 test 4 test 4 test 4 test 4 test 4</div>
</div>
</div>
</div>
</body>
</html>

و از استایل های مثل این استفاده کنید



body 
{
background-color:    #dedede;
}
h1 {
font-size:            25px;
}
h2 {
font-size:            20px;
}
h2 {
font-size:            15px;
}
.
poem {
margin:               2px;
}
.
highlight {
font-size:            32px;
background-color:     #fff;
color:                #eb0be0;
border:               1px #E18A00 solid;
}

همونطور که در کد های بالا میبیند از این دستور ساده استفاده کردیم

$(document).ready(function() {
$(’.poem-stanza’).addClass(’highlight’);
});

این دستور چیکار میکنه؟

به طور خلاصه کارش اینه که میاد و یه کلا css دیگه رو به جای کلاس قبلی قرار میده . توی کد های اچ تی ام ال دقت کنید. ما کلاسی به این اسم داریم : poem-stanza در حالی که در کد های css این کلاس موجود نیست . ولی در کد های سی اس اس کلاسی به این اسم داریم : highlight. خوب میشه خیلی ساده با کد بالا کای کرد که برای کلاس اولی از کد های کلاس دومی استفاده کنه . البته در این مثال شاید اگه مستقیم اسم کلاس رو عوض میکردیم صفحه ما به همون شکل نمایش داده میشد ولی جلوتر خواهید دید که با کد های jquery میشه افکت های دیگه ای هم به صفحه اضافه کرد که خیلی از این افکت ها رو مستقیما با کد های سی اس اس نمیشه به دست آورد و یا شما مجبورید ده ها خط کد جاوا و اچ تی ام ال بنویسید ولی با jquery تنها با سه یا چهار خط کد میتونید اون افکت رو ایجاد کنید.

خوب ساختار این تابع jquery که نوشته شد به این شکله

از $() برای گرفتن یک کلاس از صفحه استفاده کردیم

از .addClass() برای اضافه کردن یک کلاس در صفحه استفاده کردیم

و از $(document).ready(); برای اجرا کردن یک کد در صفحه استفاده کردیم .
این یه مثال خیلی سادس ولی برای شروع و برای اینکه مطمءن بشیم توابع jquery برای ما کار میکنه بهتره با این مثال ساده شروع کنیم.

نکته مهم : در عبارت addClass حتما از حرف C بزرگ استفاده کنید . اگه از cکوچیک استفاده کنید کدتون ممنه در ویندوز کار کنه ولی لینوکس کار نخواهد کرد .


XPressME Ver.1.09 SP2(included WordPress 2.7.1) (0.174sec. )
Last Design
شبکه دوستان
‌لیست نویسندگان
آمار