ستون بندی نوشته ها

تا چندی پیش برای نوشتن یک مقاله به شکل مقاله 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 );
}
});