X
تبلیغات
رایتل
ستون بندی نوشته ها - کدهای حرفه ای وبلاگ و سایت
کدهای Css3 , JavaScript, PHP و HTML
ستون بندی نوشته ها
دوشنبه 15 فروردین 1390 ساعت 11:23 | نوشته ‌شده به دست ایمان فـخــار

تا چندی پیش برای نوشتن یک مقاله به شکل مقاله jQuery  (در ادامه مطلب) و انتشارش در سطح نت باید به فریم های پیچیده استایل بندی یا تیبل ها مراجعه می کردیم و معمولا چیدمان مرتب این ستونها کار سخت و زمانبری بود اما CSS3 این کار رو به یک کد کوتاه تبدیل کرده

در ادامه مطلب مقاله ای را با موضعیت jQuery  از وبلاگ وبکاران بخونید که با استفاده از این پارامتر به سه مجموعه دو ستونه سه ستونه و چهار ستونه تبدیل شده و با استفاده از کد column-count مقالات چند ستونه بنویسید (تمرین کنید)

کد نمونه :

.newspaper {direction:rtl;
            -moz-column-count:2;
            -webkit-column-count:2;
             column-count:2;}
 

jQuery (جی کوئری) یک کتابخانه جاوا اسکریپت سبک وزن چند مرورگری می باشد که برای ساده کردن نوشتن اسکریپ های سمت مشتری در HTML طراحی شده است. jQuery امروزه محبوبترین کتابخانه جاوا اسکریپت در حال استفاده است. jQuery نرم‌افزار بازمتن و رایگان است که تحت دو پروانه:
GNU General Public License (GNU GPL)
یا به طور ساده تر (GPL) و
Massachusetts Institute of Technology (MIT)
منتشر می شود.

دستور زبان jQuery به گونه ای طراحی شده است که عمل هدایت یه پرونده را آسان تر کرده است , بدین صورت که می توان حرکات انیمیشین ایجاد کرده و در رویداد های صفحه استفاده کند و به وسیله آن می توان نرم‌افزار های مبتنی بر Ajax را ایجاد و توسعه داد. jQuery همچنین این اختیار را به برنامه نویسان می دهد که افزایه هایی برای متابخانه جاوا اسکریپت ایجاد کنند . جدا از این ها jQuery به توسعه دهندگان این اختیار را می دهد که تکه برنامه های سطح پایین مبادله ای (ارتباط مرورگر با کاربر) یا انیمیشنی و حتی افکت های پیشرفته و سطح بالا و ایجاد اشیا فرضی را تولید کنند. به کارگیری همه این اجزای jQuery کمک می کند صفحات وب قدرتمند و داینامیک (پویا) داشته باشیم.

ویژهگی ها
jQuery شامل ویژگی های زیر می باشد: گزینش عناصر مدل شیء‌گرای سند (DOM) به وسیله موتور گزینش Sizzle به عناصر موجود در پرونده دسترسی پیدا کرد و ان ها تغییر و دستکاری نمود. کنترل اسان و قدرتمند تر رویدادها (Events) دستکاری CSS ایجاد افکت و حرکات انیمیشین توسعه دادن افزایه ها برنامه های کوچک سودمند
استفاده
کتابخانه jQuery معمولا تنها یک فایل حاوااسکریپت است که شامل همه DOM ها و Event ها و افکت های و تابع های مربوط به ای جکس می شود. فایل jQuery را می توان به طرق مختلفی به صفحه وب متصل کرد که در ادامه این روش ها را معرفی می کنیم.(کد1)
jQuery همچنین می تواند از طریق Google AJAX Libraries API در صفحه بارگذاری شود. (کد2)
یا از طریق HTTP:  (کد3)
مایکروسافت همچنین jQuery را بر روی سرویس AJAX CDN (سرویسی است که با توجه به موقعیت جغرافیایی شما درخواست را به نزدیکترین سرور به محل زندگی شما راهنمایی می کند) میزبانی می کند. (کد4)
برای استفاده از jQuery دو شیوه وجود دارد :
  • به وسیله تابع $ که از الگوی factory method ایجاد شده است. این تابع ها معمولا "دستورات" نامیده می شوند.
  • به وسیله توابع $.prefixed .این ها توابع سودمندی هستند که مستقیما به اشیا سروکار ندارند.
برای نمونه دستررسی و انجام تغییرات بر روی یک گره DOM با تابع $ شروع می شود و به همراه یک رشته انتخابگر CSS (selector) خواهد امد که در نتیجه jQuery می تواند به عناصر صفحه وب دسترسی پیدا کند و ان ها را دستکاری بنماید. برای مثال: (کد5) در این خط ابتدا تمام تگ های p که quote صفت کلاس آنها است و در تگ div که صفت کلاس آن test است را پیدا کرده و به هرکدام از عناصر پیدا کرده یک صفت کلاس blue اضافه کرده و بعد از آن سرعت حرکت انیمیشنی آنها را آهسته قرار می دهد.
در حقیقت توابع $ و add مجموعه عناصر مورد نیاز را واکشی کردند در حالی که توابع addClass و slidedown گره های بازگردانده شده تحت تاثیر قرار دادند.
متد ها پیشوندی .$ متدهای مفید و اسانی هستند که تنظیمات و رفتار های سراسری را تحت تاثیر قرار می دهند . برای مثال در ادامه از از تابعی به نام each استفاده کرده ایم: (کد6)
این تابع ارقام 234 را در پرونده می نویسد.
این امکان وجود دارد که در خواست های مبتنی بر ای جکس را از طریق $.ajax و متد های وابسته انجام دهیم و تبادل داده انجام دهیم. (کد7)
در این مثال برنامه داده های name=john و location=boston را به صفحه some.php ارسال می کند و وقتی این درخواست با موفقیت به پایان رسید تابعی فراخوانده می شود تا این اتفاقات را به کاربر اعلام کند.
کد1 <script type="text/javascript" src="jQuery.js"></script>
کد 2 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
</script>
کد 3<script type="text/javascript" src="http//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> کد 4<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> کد5$("iv.test").add("p.quote").addClass("blue").slideDown("slow"); کد6$.each([1,2,3], function() {
document.write(this + 1);
});
کد7 $.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
چاپ این مطلب: کلیک کنید

(0 لایک)
نظرات (3)
چهارشنبه 17 فروردین 1390 ساعت 17:23
سلام
اولا: ممنونم از اینکه به وبلاگ من سر زدید
ثانیا: من هم نخواستم که با وبلاگ من تبادل لینک کنید
سوما:من توی کار کدنویسی و برنامه نویسی هستم
خواستم بدونم آیا شما میتونید بهم بگید که توی وبلاگ نویسی چطور میتونم توی صفحات جداگانه چندتا پست بطور مستقل و با بخش "نظر دهید"بذارم.بطوری که با وارد کردن مطالب هر پست این بخش هم بور اتوماتیک اضافه بشه(مثل بخش نظر دهید صفحه ویترین وبلاگ من)
و لازم نباشه من از کدهای مختلف استفاده کنم

اینو بلدید؟؟؟؟ میتونید کمکم کنید
امتیاز: 0 0
جمعه 18 شهریور 1390 ساعت 02:25
سلام امیدوارم حالت خوب باشه از مطالب وبلاگت واقعا لذت بردن اگه امکان داره منو راهنمایی کن خیلی خوشم اومد از این css3 میخوام حرفه ای بشم یا علی
منتظرماااااااااااااااااااااااا
امتیاز: 0 0
پاسخ:
سلام من رو ببخش مدتی نبودم
من در خدمتتون هستم فقط نمی دونم دقیقا چه خدمتی ازم ساخته است
یکشنبه 28 خرداد 1391 ساعت 05:25
سلام.این مقالتون درباره ستونی کردم متن بود،اما میخام قالب سه ستونه وبلاگم رو به چهار ستونه تبدیل کنم.لطفا منو راهنمایی کنید.
امتیاز: 0 0
پاسخ:
برای تبدیل قالب کلا باید مسیر دیگه ای رو برید
اول باید دید قالبتون بر اساس table هاست یا layer در خصوص table باید بعد از هر </tr> یک کد <td></td> اضافه کنید و داخل این کدها مطالب ستون جدید را بریزید ولی در layer ها حتما باید قالب بررسی بشه
برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
نام :
پست الکترونیک :
وب/وبلاگ :
ایمیل شما بعد از ثبت نمایش داده نخواهد شد
 
ابر برجسب
آمار
بازدیدکنندگان : 304152