یک پلاگین جی کوئری به اسم cue-points که با کمک html5 به شما این قابلیت رو میده که به ویدئو های خودتون ترجمه یا به عبارت درست (sub Title ) اضافه کنید.
نحوه کارش هم بسیار آسون هست. کافیست پس از ضمیمه کردن پلاگین به صفحه تون کد زیر را وارد کنید.
[js]
$(document).ready(function(){
var slides = {5:"Hello World"}
cuepoint.init(slides);
cuepoint.play();
});
[/js]
جهت دریافت پلاگین به اینجا مراجعه کنید
تمام طراحان وب در حال حاضر با یک معضل بزرگ و مشترکی در انجام طراحی صفحات وب مواجه هستند. و اون هم مرورگر وب جهنمی یعنی Internet Explorer است. Internet Explorer به راستی اشک طراحان وب رو درآورده. امکان نداره یک پروژه رو انجام بدهیم و شاهد نا هماهنگی هایی در نسخه های مختلف این مرورگر نباشیم.
از تمامی این ناهماهنگی ها بگذریم می رسیم به پیشتیبانی نکردن از ابزار ها جدید. یکی از این ابزار ها CSS3 می باشد .که با ظهورش قدرت زیادی به پویا کردن صفحات وب ارائه کرد. متاسفانه Internet Explorer در هیج کدام از نسخه های جدید و پایدارش از این ابزار پشتیبانی نمی کند. از آنجایی که این مرورگر بر روی کامپیوتر خیلی از کاربران نصب می باشد، متاسفانه بیشتر بازدید کنندگان وب سایت ها از این مرورگر جهنمی بهره می بردند.
در بازار وب مخصوصا در ایران کارفرمایان و مشتریان خواهان استفاده از آخرین ابزار ها و تکنولوژی های روز در وب سایتشان هستند. و از طرف دیگر چون هنوز درصد زیادی از بازدید کنندگان از این مرورگر استفاده میکنند. مجبورند یکی را انتخاب کنند یا هماهنگی با Internet Explorer یا استفاده از نوآوری های وب. در این وسط ما طراحان وب هستیم که هلاک می شویم تا در مرحله اول مشتری را توجیه کنیم و در مرحله دوم وب سایت را با Internet Explorer هماهنگ کنیم.
در راستای همین مشکلات یک برنامه نویس خوش ذوق به نام Jason Johnston که اتفاقا از دیار کفر و استکبار هم هست به همراه چند تن دیگر از برنامه نویس بیکار دنیای اوپن سورس (اصطلاحی که برنامه نویسان ایرانی برای توجیه کردن خود که چرا در پروژه های اوپن سورس شرکت نمی کنند )، پروژه ای را شروع کردنند تا بتوان CSS3 را در نسخه های فراگیر Internet Explorer رو شبیه سازی و استفاده کرد.
اسم این پروژه CSS3PIE هست. در این پروژه به کمک جاوا اسکریپت خاصیت های ارائه شده در Css3 را شبیه سازی می کنند.همکنون 2 نسخه ارائه دادند که در نسخه اول مشکلات زیادی به همراه بود و در آخرین نسخه که من در یکی از پروژه های دولتی از CSS3PIE بهره بردم ، هیچ مشکل خاصی نه خودم شاهدش بود نه کسی گزارش داده.
CSS3PIE در حال حاضر می تواند از این خاصیت های CSS3 زیر پشتیبانی و آنها را به خوبی شبیه سازی کنید.
شما فقط کافیست فایل PIE.htc در روت وب سایت خود کپی نمایید. و در هر کجا که از خاصیت های CSS3 بهره میگیرید فقط خط زیر را درج نمایید.
[css]
behavior: url(PIE.htc);
[/css]
همانند مثال زیر :
[css]
#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(PIE.htc);
}
[/css]
نسخه نمایشی این شبیه ساز خالی از لطف نیست . دوستانی که به مشکلی برخوردند ابتدا به راهنمای این اسکریپت مراجعه نمایند و در صورت رفع نشدن مشکل در قسمت نظرات اعلام کنند.
#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}همينطور که ميدونيم JQUERY يک کتابخانه جاوا اسکريپت هست . پس نياز هست مقداري آشنايي با اين زبان کلاينت سايد داشته باشيد.
اما از همه مهمتر شما بايد با تگ ها و المنت هاي html و xhtml آشنايي داشته باشيم. در اين پست سعي مي کنم موارد ضروري، که بايد حتما بلد باشيد رو مختصري توضيح ميدهم!!
هر عنصر يا المنت مي توانيد داراي بخش هاي زير باشد.
1- صفات (Attribute’s) : شامل صفت هايي هستند که ما به عنصرهاي داخل صفحات ميدهيم. مانند title,dir,lang, hight,widthو
name ……
[html]
<div dir="rtl" lang="fa" title="hello"></div>
[/html]
نکته : در خيلي از عنصر ها صفات خاص دارند يا صفاتي که در ساير عنصر ها هستند رو ندارند.
2- شناسه يکتا ( ID ) : ما مي توانيم به هر عنصر يک شناسه يکتا اختصاص بديم تا بتونيم به راحتي از ساير عنر هاي هم نوع شناسايي و انتخاب کنيم
[html]
<div id="maindiv"></div>
[/html]
3- کلاس (class) : تعريف کلاس هم يک نوع شناسه هست. هم ميتواند يکتا باشد. هم يکتا نباشد. و بيشتر در صفحاتي که بر پايه css طراحي مي شود استفاده مي شود.
[html]
<div class="hidediv"></div>
[/html]
4- سبک (style) : به کمک اين صفت مي توانيد صفاتي که براي ظاهر عنصر مورد استفاده ميگيرند رو در اين صفت و inline قرار بديد
[html]
<div style="width:30px; height:40px; background:#CCCCCC;"></div>
[/html]
سوال اينجاست اينها به چه درد ما ميخوره؟!
سوال خوبي هست. بايد خدمتتون عرض کنم که براي کنترل عنصر ها توسط جاوا اسکريپت ما نياز داريم که بتونيم عنصر مورد نظرمون رو سريع پيدا کنيم. راه هاي زيادي هست براي شناسايي. شايد سريع ترين راهي که مد نظرتون بياد اين هست که ما ميتوانيم کل عنصر ها رو اسکن کنيم و عنر مورد نظر رو پيدا ميکنيم. اما به نظر شما اين کار درست و بهينه اي هست؟ شايد در صفحاي که ما ميخواهيم اين کار رو انجام بديم صدها عنصر همانند وجود داشته باشه؟ اونقت به نظر شما چه مقدار وقت بايد صرف پيدا کردن عنصر مورد نظرمون بکنيم؟
در مطلب بعدي خواهيم ديد که ما توسط jquery چه طور به کمک موارد بالا يعني شناسه ها ، کلاسها يا نوع عنصر به راحتي عنصر مورد نظرمون رو پيدا خواهيم کرد.
JQuery یک فریمورک جاوا اسکریپت می باشد. اما اصلاً یک فریمورک چیست؟ و فقط مورد نیاز یک برنامهنویس است یا یک طراح وب هم میتواند از آن بهره ببرد؟
نمیدانم وقتی صحبت از فریمورک میشود چه تعریفی برای آن در ذهن دارید. بطور کلی میتوان فریمورک را مجموعهای از ابزارها، کتابخانهها، قراردادها و بهترین شیوهها تعریف کرد بطوریکه سعی میکنند وظایف روتین را به سوی مدلهای جامعی سوق دهند که دوباره میتوانند مورد استفاده قرار بگیرند. هدف این است که به یک طراح یا توسعه دهنده اجازه داده شود تا بر روی وظایفی که در انجام پروژه مهم هستند تمرکز کند. البته وقتی صحبت از فریمورک میشود الزاماً در مورد چیزی که ساخته شده، بصورت پکیج در آمده و برای عموم منتشر شده حرف نمیزنیم. چرا که ممکن است یک فریمورک منحصراً برای شما یا تیم شما باشد.(منبع الوان وب)
همینطور که در بالا توضیح داده شد. jquery یک کتابخانه از توابع آماده شده برای جاوا اسکریپت می باشد. در این زمینه فریمورک های دیگری هم وجود دارند. همانند Prototype و MooTools و فریمورک معروف یاهو با نام YUI .که هر کدوم از این فریمورک ها داری معایب و مزایای مختص خود هستند.