آموزش jQuery Mobile > مقدمه آموزش jQuery Mobile
آموزش نصب و به کار بردن jQuery Mobile بر روی سیستم
مقدمه :
دو راه کلی برای اضافه کردن کدهای jQuery Mobile به سایت یا برنامه خود و بکارگیری
آن وجود دارد ،که در ادامه به تشریح هر دو خواهیم پرداخت :
- روش اول اتصال به یک سیستم فراهم کننده کدهای jQuery یا ( CDN ) و سپس لینک سایت یا
برنامه به آن .
- روش دوم دانلود کتابخانه jQuery بر روی سیستم و سپس ایجاد لینک درون سیستم ای برای
برنامه یا وب سایت .
روش اول - اتصال به یک سرور فراهم کننده کدهای jQuery یا ( CDN ) :
یک سرور فراهم کننده jQuery یا به اصطلاح انگلیسی ( CDN ( Content Delivery Network
، سروری است که می توانید از طریق اینترنت به آن متصل شده و کتابخانه jQuery را از
روی آن بخوانید .
در این روش نیاز به نصب هیچ برنامه یا اطلاعاتی بر روی سیستم نیست و فقط کافی است تا
در کد برنامه ، همانند قطعه کد زیر ، به
فایل استایل شیت ( CSS ) مورد نظر و کتابخانه jQuery که دارای پسوند js است
، لینک های اتصال به سرور را قرار دهید :
|
کد
|
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
|
نکته : تگ <meta> با نام viewport در بخش <head> کد صفحه
فوق ، تعیین می کند که مرورگر چگونه درجه Zoom و ابعاد صفحه را کنترل کند .
به صورت پیش فرض ، دستگاه های موبایل فرض می کنند که عرض صفحات 900 پیکسل هستند . این
عرض مقدار پیش فرض برای ابزارهای رومیزی ( کامپیوتر شخصی ) بوده و در همه آنها درست
کار می کند . اما در موبایل یا تبلت اندازه و زوم صفحه ممکن است تغییر کند . بنابراین
با تعیین خواص viewport ، مرورگر با تنظیم اندازه صحیح در هر دستگاه ، صفحه را به صورت
صحیح نمایش می دهد .
روش دوم - دانلود فایل های jQuery بر روی سیستم و ایجاد لینک درونی :
اما برای زمانی که می خواهید کتابخانه jQuery را بر روی سیستم خود نصب کرده ، بایستی
آن را از روی سایت منبع آن یعنی http://jquerymobile.com/download
دانلود کنید .
سپس همانند کد زیر ، لینک های لازم را برای اتصال به فایل های js ایجاد کنید :
|
کد
|
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="jquery.mobile-1.4.2.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
</head>
|
نکته 1 : توجه داشته باشید که در لینک های اتصال ، آدرس صفحات را
به صورت صحیح قرار دهید .
نکته 2 : شاید برایتان جای سوال باشد که چرا در تگ <script>
، خاصیت نوع زبان اسکریپت یا " type = " text / javascript را قرار نداده
ایم . زیرا این کار در
HTML 5 ضروری نمی باشد ، به دلیل اینکه جاوا اسکریپت تنها زبان اسکریپتی استاندارد
در HTML 5 می باشد .
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :