یک پلاگین جی کوئری به اسم cue-points که با کمک html5 به شما این قابلیت رو میده که به ویدئو های خودتون ترجمه یا به عبارت درست (sub Title ) اضافه کنید.
نحوه کارش هم بسیار آسون هست. کافیست پس از ضمیمه کردن پلاگین به صفحه تون کد زیر را وارد کنید.
[js]
$(document).ready(function(){
var slides = {5:"Hello World"}
cuepoint.init(slides);
cuepoint.play();
});
[/js]
جهت دریافت پلاگین به اینجا مراجعه کنید
در شروع کار با jquery اول باید jquery رو نصب کنیم. البته اصطلاح نصب درست نیست. اما چیزی جایگزین پیدا نکردم.
در مرحله اول نیاز هست شما آخرین نسخه کتابخانه jquery رو از سایت jquery.com دانلود کنید. کافیه وارد سایت بشید و در منو های بالای سایت گزینه دانلود رو انتخاب کنید.
در حالت کلی سه مدل برای دانلود وجود دارد :
1- Minified : که خیلی فشرده شده و برای استفاده تجاری استفاده میشه و 15 کیلوبایت هم می باشد.(به دلیل لود شدن سریع)
2- Uncompressed : که به صورت غیر فشرده هست و حجمش حدود 94 کیلو بایت می باشد. و برای توسعه یا فراگیری مورد استفاده قرار میگیرد.
3- Packed : حجمی حدود 29 کیلوبایت داره و به صورت gzip فشرده نشده
در حال حاضر آخرین نسخه jquery ورژن 1.2.3 هست.
بعد از دانلود شما باید کتابخانه را در صفحات خود نصب کنید .
طریق نصب در صفحات همانند کد های زیر می باشد.
اما نحوه نوشتن کدها : در 2 حالت ما میتونیم کدهای خودمون رو بنویسیم 1. به صورت inline : یعنی کدها رو در همون صفحه تایپ کنیم. من پیشنهاد میدم از این روش کمتر استفاده کنید. و سعی کنید زمانی استفاده کنید که کد مربوز به همین صفحه باشه. اگر قرار کد یا تابعه ای که می نویسید در صفحات دیگر هم استفاده شوند. حتما از روش دوم استفاده کنید. 2. به صورت external : در این حالت شما یک فایل با پسوند sample.js ایجاد میکنید. و تمامی کد های خود را در این فایل مینویسید. و سپس فایل sampale.js را در صفحات خود فراخوانی میکنید. بصورت زیر :
[html]
<html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script src="path/to/sample.js" type="text/javascript"></script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
[/html]
و یک پیشنهاد دیگر سعی کنید تمام کد هاتون به صورت تابع نوشته بشه . تا بهینه تر بتونید استفاده کنید.
خوب ما موفق به نصب جی کوئری شدیم. فردا اولین کد خودمون را خواهیم نوشت
همينطور که ميدونيم 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 چه طور به کمک موارد بالا يعني شناسه ها ، کلاسها يا نوع عنصر به راحتي عنصر مورد نظرمون رو پيدا خواهيم کرد.