জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

আস্তে আস্তে আমরা জেকোয়েরি মোবাইল এর সব কিছু শিখে ফেলবো । আজ আমরা শিখবো জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার ।

জেকোয়েরি মোবাইলে সিএসএস৩ ইফেক্টস যোগ করা হয় যার কারনে পেজটি কিভাবে আমাদের সামনে ওপেন হবে তা নির্ধারিত হয় ।

জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস
এক পেজ থেকে অন্য পেজে কিভাবে যাবে তার জন্য জেকোয়েরি মোবাইলের অনেক ধরণের ইফেক্ট আছে । ট্রানজিশন ইফেক্ট ব্যবহার করতে গেলে আপনার ব্রাউজারে অবশ্যই CSS3 3D Transforms সাপোর্ট থাকতে হবে । এজন্য আপনাকে গুগল ক্রোম ১২+ , ইন্টারনেট এক্সপোলার ১০+ , মোজিলা ফায়ারফক্স ১৬+ , সাফারী ৪+, অপেরা ১৫+ ভার্সনের ব্রাউজার ব্যবহার করতে হবে ।
data-transition attribute যোগ করে আমরা খুব সুহজে কোনো লিংকে ট্রানজিশন ইফেক্ট দিতে পারি ।

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

আসুন তাহলে আমরা কিছু data-transition attribute এবং তাদের সম্পর্কে জেনে নেই ।

ট্রানজিশনঃ fade
বর্ণনাঃ এটা ডিফল্টভাবে দেখায় । আস্তে আস্তে পরের পেজকে দেখায় ।

ট্রানজিশনঃ flip
বর্ণনাঃ পিছন থেকে সামনের দিকে পৃষ্ঠা উল্টানোর স্টাইলে পেজ পরিবর্তন করে ।

ট্রানজিশনঃ flow
বর্ণনাঃ পেজকে নিক্ষেপ করে এবং নতুন একটা পেজ উঠে আসে ।

ট্রানজিশনঃ pop
বর্ণনাঃ পপ-আপ ইউন্ডো আকারে পরের পেজ আসে ।

ট্রানজিশনঃ slide
বর্ণনাঃ ডান থেকে বামে স্লাইড আকারে পেজ আসে ।

ট্রানজিশনঃ slidefade
বর্ণনাঃ ডান থেকে বামে স্লাইড অদৃশ্য হতে হতে পরের পেজ আসে ।

ট্রানজিশনঃ slideup
বর্ণনাঃ নিচ থেকে উপরের দিকে স্লাইড আকারে পেজ পরিবর্তন হবে ।

ট্রানজিশনঃ slidedown
বর্ণনাঃ উপর থেকে নিচের দিকে স্লাইড আকারে পেজ পরিবর্তন হবে ।

ট্রানজিশনঃ turn
বর্ণনাঃ পরের পেজে আবর্তন করে পেজ পরিবর্তিত হয় ।

ট্রানজিশনঃ none
বর্ণনাঃ কোনো ট্রানজিশন ইফেক্ট নেই ।

ডিফল্টভাবে কিন্তু আমরা এই fade ট্রানজিশন ইফেক্ট দেখতে পাই ।
এই সকল ইফেক্টগুলো কিন্তু বাম থেক ডানে অথবা পিছন থেকে সামনের ইফেক্ট পরিবর্তন করতে পারি ।
<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>

এই কোডের মাধ্যমে আমরা পেজের ডিরেকশন ঠিক করে দিতে পারি ।

আর এরই ভেতর আমরা কিন্তু জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস শিখে ফেললাম । না বুঝতে পারলে অবশ্যই কমেন্ট করবেন কিন্তু ।

জেকোয়েরি দিয়ে মোবাইল বাটন বানানো

লেখকঃ মোস্তাফিজুর ফিরোজ ।

আমরা প্রত্যেক সাইটে ঢুকলে অনেক ধরণের বাটন দেখি । এগুলো আমাদের সাইটটিকে খুব সহজে ভিজিট করতে আর এক পেজ থেকে হোম পেজ অথবা অন্য কোন পেজে নেভিগেশনে সাহায্য করে । আসুন আজ খুব সহজে জেকোয়েরি দিয়ে বাটন বানানো শিখবো ।

জেকোয়েরি মোবাইল বাটনগুলো সাধারণত হেড এবং ফুটারে বসানো হয়ে থাকে । কারণ এই দুইটি স্থান থেকেই সবাই পেজ নেভিগেশন করতে চায় ।

হেডার বারের কোড সমূহ
হেডার বার বলতে একটা সাইটের পেজের উপরিভাগকে বুঝায় । হেডার সাধারণত একটি পেজের নাম অথবা লোগো অথবা হোম, অপশন অথবা খোঁজার জন্য এক অথবা দুইটি বাটন থাকে ।
আপনি খুব সহজেই হেডারের বাম অথবা ডান সাইডে বাটন যোগ করতে পারেন জেকোয়েরি ব্যবহার করে ।

<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

উপরের কোডটুকু আপনাকে পেজের বাম সাইডে একটা হোম বাটন এবং ডান সাইডে একটা খোঁজ বাটন যুক্ত করতে সাহায্য করবে ।

<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের বাম সাইডে একটা বাটন যুক্ত করতে পারবেন ।

<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের ডান সাইডে একটা বাটন যুক্ত করতে পারবেন ।

মনে রাখবেন হেডারে আপনি একসাথে দুইটির বেশি বাটন রাখতে পারবেন না । কিন্তু ফুটারে বাটনের কোনো সীমাবদ্ধতা নেই । আপনি আপনার ইচ্ছামত বাটন ব্যবহার করতে পারবেন ।

ফুটার বারের কোড সমূহ
একটি পেজের সবথেকে নিচের অংশকে ফুটার বলা হয় । ফুটার হেডারের চেয়ে বেশি পরিবর্তন করা সহজ । এতে বেশি পেজ লিংক, বাটন ইত্যাদি যোগ করে একে আরো বেশি আকর্ষণীয় করে তোলা যায় ।

<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>

এই কোডটি ফুটারে বসিয়ে আপনি খুব সহজে ফেসবুক, টুইটার, ইন্সটাগ্রামের বাটন যোগ করতে পারবেন ।

কিন্তু ফুটারের বাটনগুলো সাধারণত মাঝখানে বসে না । তাই এই জন্য আপনাকে নিচের সিএসএস কোড দিয়ে পরিবর্তন করে নিতে হবে ।
<div data-role="footer" style="text-align:center;">

তাছাড়া আপনি গুরুপ বাটন গুলো ফুটারে নিচের কোড দিয়ে সমান্তরালে অথবা আনুভূমিকভাবে ব্যবহার করতে পারবেন ।

<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div>

হেডার এবং ফুটারের পজিশন ঠিক করা
হেডার এবং ফুটারের পজিশন তিনভাবে ঠিক করা যায় ।
১। ইনলাইনঃ এটা ডিফল্টভাবে যেটা দেয়া থাকে । মানে হেডার এবং ফুটার পেজের উপাদানের সাথে একই লাইনে থাকে ।

২। ফিক্সডঃ হেডার এবং ফুটার যথাক্রমে পেজের উপরে এবং নিচে থাকে ।

৩। ফুল স্ক্রীনঃ এটা ফিক্সড পজিশনের মত । কিন্তু এতে হেডার এবং ফুটার পেজের উপাদান সমূহের উপরে থাকে ।

আসুন তাহলে এবার কোড গুলো দেখে নেই ।
১। ইনলাইন পজিশনের কোডঃ
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

২। ফিক্সড পজিশনের কোডঃ
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

৩। ফুল স্ক্রীন পজিশনের কোডঃ
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

এতে উপরের মত data-position="fixed" রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।

আর এরই ভিতর কিন্তু আমরা খুব সহজে জেকোয়েরি দিয়ে মোবাইল বাটন বানানো শিখে গেলাম । খুব সহজ তাই না । হুম, আমার কাছেও এটা খুব সহজ লাগে । তবুও কোথাও না বুঝলে কমেন্ত করতে ভুলবেন না কিন্তু ।

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

কি খবর ? কেমন আছেন সবাই? আজকে একটু ঠাণ্ডা বেশি, তাই সবাই মনে হয় লেপের ভিতর থেকে ভালোই আছেন । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখাবো ।

jQuery CSS Classes
জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।

Global Classes
এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-corner-all
ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-shadow
ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-overlay-shadow
ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-mini
ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।

Button Classes
<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn
ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-inline
ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-icon-top
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-right
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-bottom
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-left
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-notext
ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।

ক্লাসের নামঃ ui-btn-a|b
ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।

Icon Classes
সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।

ক্লাসের নামঃ ui-icon-action
ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।

ক্লাসের নামঃ ui-icon-alert
ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।

ক্লাসের নামঃ ui-icon-audio
ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-l
ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-r
ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-l
ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-r
ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-l
ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-r
ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d
ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-back
ক্লাসের বর্ণনাঃ ব্যাক বাটন ।

ক্লাসের নামঃ ui-icon-bars
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।

ক্লাসের নামঃ ui-icon-bullets
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।

ক্লাসের নামঃ ui-icon-calendar
ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।

ক্লাসের নামঃ ui-icon-camera
ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।

ক্লাসের নামঃ ui-icon-carat-d
ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-l
ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-r
ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-check
ক্লাসের বর্ণনাঃ চেক মার্ক ।

ক্লাসের নামঃ ui-icon-clock
ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।

ক্লাসের নামঃ ui-icon-cloud
ক্লাসের বর্ণনাঃ মেঘের আইকন ।

ক্লাসের নামঃ ui-icon-comment
ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।

ক্লাসের নামঃ ui-icon-delete
ক্লাসের বর্ণনাঃ ডিলিট বাটন ।

ক্লাসের নামঃ ui-icon-edit
ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।

ক্লাসের নামঃ ui-icon-eye
ক্লাসের বর্ণনাঃ চোখের আইকন ।

ক্লাসের নামঃ ui-icon-forbidden
ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।

ক্লাসের নামঃ ui-icon-forward
ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।

ক্লাসের নামঃ ui-icon-gear
ক্লাসের বর্ণনাঃ সেটিংস বাটন ।

ক্লাসের নামঃ ui-icon-grid
ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।

ক্লাসের নামঃ ui-icon-heart
ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।

ক্লাসের নামঃ ui-icon-home
ক্লাসের বর্ণনাঃ হোম বাটন ।

ক্লাসের নামঃ ui-icon-info
ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।

ক্লাসের নামঃ ui-icon-location
ক্লাসের বর্ণনাঃ লোকেশন বাটন ।

ক্লাসের নামঃ ui-icon-lock
ক্লাসের বর্ণনাঃ তালার আইকন ।

ক্লাসের নামঃ ui-icon-mail
ক্লাসের বর্ণনাঃ মেইল আইকন ।

ক্লাসের নামঃ ui-icon-minus
ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।

ক্লাসের নামঃ ui-icon-navigation
ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।

ক্লাসের নামঃ ui-icon-phone
ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।

ক্লাসের নামঃ ui-icon-power
ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।

ক্লাসের নামঃ ui-icon-plus
ক্লাসের বর্ণনাঃ যোগ বাটন ।

ক্লাসের নামঃ ui-icon-recycle
ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।

ক্লাসের নামঃ ui-icon-refresh
ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।

ক্লাসের নামঃ ui-icon-search
ক্লাসের বর্ণনাঃ সার্চ বাটন ।

ক্লাসের নামঃ ui-icon-shop
ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।

ক্লাসের নামঃ ui-icon-star
ক্লাসের বর্ণনাঃ তারার চিহ্ন ।

ক্লাসের নামঃ ui-icon-tag
ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।

ক্লাসের নামঃ ui-icon-user
ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।

ক্লাসের নামঃ ui-icon-video
ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।

Theme Classes
জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।

ক্লাসের নামঃ ui-bar-(a-z)
ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-body-(a-z)
ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।

ক্লাসের নামঃ ui-btn-(a-z)
ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-group-theme-(a-z)
ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।

ক্লাসের নামঃ ui-overlay-(a-z)
ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।

ক্লাসের নামঃ ui-page-theme-(a-z)
ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।

Grid Classes
গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।

গ্রিড ক্লাসঃ ui-grid-solo
কলামঃ 1
কলামের ব্যাপ্তিঃ 100%
সুসঙ্গত হয়ঃ ui-block-a

গ্রিড ক্লাসঃ ui-grid-a
কলামঃ 2
কলামের ব্যাপ্তিঃ 50% / 50%
সুসঙ্গত হয়ঃ ui-block-a|b

গ্রিড ক্লাসঃ ui-grid-b
কলামঃ 3
কলামের ব্যাপ্তিঃ 33% / 33% / 33%
সুসঙ্গত হয়ঃ ui-block-a|b|c

গ্রিড ক্লাসঃ ui-grid-c
কলামঃ 4
কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d

গ্রিড ক্লাসঃ ui-grid-d
কলামঃ 5
কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e

আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।

jQuery Mobile পরিচিতি

পারিজাত বিশ্বাস (Student of CSE at university of Asia Pacific)
jQuery Mobile হল, মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য একটি web framework.
আপনার jQuery Mobile শুরু করার আগে, নিচের বিষয়গুলো সম্পর্কে মৌলিক জ্ঞান থাকতে হবেঃ
১. HTML
২. CSS
৩. jQuery

jQuery Mobile কি?
jQuery Mobile হচ্ছে মোবাইল web অ্যাপ্লিকেশান তৈরির জন্য touch-optimized web framework.
jQuery Mobile সকল প্লাটফর্ম এ কাজ করে । যেমনঃ
১. iOS
২. অ্যান্ড্রয়েড
৩. ব্ল্যাকবেরি
৪. bada
৫. উইন্ডোজ ফোন
৬. সিম্বিয়ান
৭. পাম অপারেটিং সিস্টেম
৮. MeeGoo
jQuery Mobile হল jQuery library এর উপর নির্মিত ,আপনার যদি jQuery জানা থাকে তবে খুব সহজেই এটি শিখতে পারবেন।
এটি HTML5, CSS3, JavaScript এবং AJAX ব্যবহার করে সংক্ষিপ্ত স্ক্রিপ্টিং এর মাধ্যমে এর কাজ করে।

কেন jQuery Mobile ব্যবহার করবেন ?
jQuery mobile এর স্লোগান হচ্ছে, “ write less, do more”. এটি স্বয়ংক্রিয়ভাবে ওয়েব পেজ ডিজাইন করে যা খুব আকর্ষণীয় ও ব্যবহার করা সহজ এবং যা সকল মোবাইল ডিভাইস এ একই ভাবে কাজ করে ।
পূর্বে প্রতিটা OSOS এর জন্য আলাদা অ্যাপ্লিকেশান ব্যবহার করা হত। যেমনঃ
১. অ্যান্ড্রয়েড ও ব্ল্যাকবেরিতে java ব্যবহার করা হয়।
২. ios এ Objective C ব্যবহার করা হয়।
৩. উইন্ডোজ ফোনএ C# এবং .net ব্যবহার করা হয় ।
jQuery Mobile এই সমস্যার সমাধান করেছে। এটি শুধুমাত্র HTML, CSS and JavaScript ব্যবহার করে, যা সব মোবাইল ওয়েব ব্রাউজার জন্য আদর্শ !
Best Reading Experience (সেরা পড়ার অভিজ্ঞতা)।
jQuery Mobile সব মোবাইল ডিভাইসের উপর কাজ করে, এমনকি যদিও এটা ডেস্কটপ কম্পিউটারের কিছু বিষয় এর সাথে মিল থাকতে পারে ( সীমিত CSS 3 সমর্থন এর কারনে )।

jQuery Mobile Panels
parijat biswas
student of CSE
university of Asia Pacific
jQuery Mobile Panels
jQuery Mobile panel বাম অথবা ডান দিক থেকে অতিরিক্ত content এর সাথে slide out হবে।
panel টি open করতে নিচের বাটন টি click করুন।
OPEN PANEL
একটি panel তৈরি করতে data-role="panel" যোগ করুন <div> element এ ,এবং একটি id নির্ধারণ করুন।
এই <div> element এর ভিতরে যেকোনো html markup বসান, যা আপনি আপনার panel এ display করতে চান।
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
বি.দ্র. : panel markup অবশ্যই header,content এবং jQuery mobile page এবং footer inside এর পূর্বে বা পরে বসবে।
Panel এ প্রবেশ করতে একটি link তৈরি করুন যা panel id <div> কে প্রকাশ করে। যখন ব্যবহারকারী link এ click করবে, তখন panel টি open হবে।
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
নিচে একটি সাধারন উদাহরণ দেওয়া হলঃ
উদাহরণ
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
</div>

<div data-role="header">
<h1>Standard Page Header</h1>
</div>

<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
* নিজে চেষ্টা করে দেখুন।
Closing Panels ( Panel বন্ধ করা )
আপনি panel এর বাইরে click করে বা esc বাটন চেপে panel বন্ধ করতে পারেন।
<div> প্যানেল এ additional data-* যোগ করে আপনি clicking এবং swiping ফিচার disable করতে পারেনঃ
Attribute value description(ব্যাখ্যা)

data-dismissible true | false বাইরে click করলে panel close হবে নাকি হবে না, তা নির্ধারণ করে ।
data-swipe-close true | false swiping করলে panel close হবে নাকি হবে না , তা নির্ধারণ করে ।
আপনি একটি বাটন ব্যবহার করেও panel close করতে পারেনঃ শুধুমাত্র <div> panel এর ভিতরে data-rel="close" এর সাথে একটি link যুক্ত করুন । আপনি href attribute দিয়েও page id point করতে পারবেন যখন ব্যবহারকারী panel close করবে।
উদাহরনঃ
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div>
* নিজে চেষ্টা করে দেখুন।
Panel Display
আপনি panel এর display mode control করতে পারেন data-display attribute দিয়েঃ
Attribute value ব্যাখ্যা
data-display="overlay" প্রদত্ত প্যানেল প্রদর্শন করে
data-display="push" প্যানেল এবং পাতা একই সময়ে animate করে
data-display="reveal" ডিফল্ট। পেজের নিচে panel থাকবে এবং প্রকাশ করবে যেহেতু page slide হবে।

উদাহরনঃ
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">

* নিজে চেষ্টা করে দেখুন।

Positioning Panels ( প্যানেল এর পজিশনিং)
স্বয়ংক্রিয়ভাবে panel পেজের বাম পাশে থাকবে । পেজের ডান পাশে panel নিতে data-position="right" attribute টি ব্যবহার করতে হবে ।
উদাহরনঃ
<div data-role="panel" id="myPanel" data-position="right">
* নিজে চেষ্টা করে দেখুন।
তাছাড়া যখন page scroll করা শুরু হয় page content কোথাই / কিভাবে বসাবেন তা আপনি নির্ধারণ করতে পারবেন। স্বয়ংক্রিয়ভাবে, panel পেজ scroll করতে শুরু করবে( কিন্তু panel content পেজের একদম উপরে থাকবে ) যদি আপনি সবসময়ই panel content প্রদর্শন করতে চান তাহলে data-position-fixed="true" attribute টি panel এ ব্যবহার করুন ।
উদাহরনঃ
<div data-role="panel" id="myPanel" data-position-fixed="true">
* নিজে চেষ্টা করে দেখুন।

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস (jQuery Mobile List Views)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার।)

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস:

জেক্যুয়েরিতে মোবাইল লিস্ট ভিউস এইচটিএমএল এর আদর্শ লিস্টস্: অর্ডার্ড (<ol>) এবং আনঅডার্ড (<ul>).
একটি লিস্ট তৈরি করার জন্য, ="listview" ডাটা-রোলটি <ol> অথবা <ul> এলিমেন্ট এ প্রয়োগ করতে হবে।আইটেমকে ট্যাপাবল (tappable) করার জন্য লিস্ট আইটেম (<li>) এর মধ্যে লিংক স্পেসিফাই করুন:

উদাহরণ:
<ol data-role="listview">
<li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview">
<li><a href="#">List Item</a></li>
</ul>

লিস্টকে বৃত্তাকার কোণ এবং কিছু মার্জিন এর মাধ্যমে স্টাইল করার জন্য "true" এট্ট্রিবিউট ডাটা-ইনসার্ট (data-insert) হিসেবে ব্যবহার করুন:
উদাহরণ:
<ul data-role="listview" data-inset="true">

# ডিফল্টরূপে, একটি লিস্ট আইটেম এর ভিতরে লিংক স্বয়ংক্রিয়ভাবে একটি বাটন এ পরিণত হয় (ui-class="btn" or data-role="button" এগুলোর কোন প্রয়োজন নেই)।

লিস্ট ডিভাইডার (List Dividers
)
লিস্ট ডিভাইডার ব্যবহার করা হয় বিভাগ (categories) /সেকশনস কে সংগঠিত করা এবং গ্রুপ আইটেমস করার জন্য।

একটি লিস্ট ডিভাইডার কে নির্দেশ (specify) করার জন্য data-role="list-divider" এট্রিবিউট একটি <li> এলিমেন্ট এ অন্তভূক্ত করতে হবে:

উদাহরণ:
<ul data-role="listview">
<li data-role="list-divider">Europe</li>
<li><a href="#">Norway</a></li>
<li><a href="#">Germany</a></li>
</ul>

আপনার যদি একটি বর্ণানুক্রমে তালিকা থাকে, (যেমন একটি ফোন বুক)<ol> অথবা <ul> এলিমেন্ট এ data-autodividers="true" এট্রিবিউট jQuery মোবাইল স্বয়ংক্রিয়ভাবে সঠিক ডিভাইডার যোগ করে:

উদাহরণ:
<ul data-role="listview" data-autodividers="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

data-autodividers="true" অ্যাট্রিবিউট আইটেম এর টেক্সট এ প্রথম অক্ষর বড় হাতের অক্ষর দিয়ে বিভক্ত সৃষ্টি করে.

আরো উদাহরণ

Read-only lists
লিঙ্ক ছাড়া তালিকা তৈরি করুন (বাটন হবে না এবং ট্যাপাবল হবে না).

Panels
কিভাবে আপনার লিস্ট আইটেম এ প্যানেল সন্নিবেশ করবেন.

jQuery Mobile Scrollstart
--------------------------------
অনুবাদক: ফয়সাল রকি
-------------------------------

যখন কোনো ব্যবহারকারী কোনো page scroll করা শুরু করে তখন scrollstart ইভেন্টটি কাজ করতে শুরু করে।
উদাহরণ:
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});

লক্ষ্যণীয় বিষয়: iOS ব্যবহৃত device গুলো page scroll এর সময় DOM manipulation কে freeze করে দেয়; সুতরাং যখন কোনো ব্যবহারকারী কোনো page scroll করে তখন কোনো কিছু পরিবর্তন করা সম্ভব হয় না।

jQuery Mobile Scrollstop
যখন কোনো ব্যবহারকারী কোনো page scroll করা বন্ধ করে তখন Scrollstop ইভেন্টটি কাজ শুরু করে।
উদাহরণ:
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});

জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
ফেসবুকঃ www.fb.com/mfir0z

কি খবর সবার? অনেকদিন পর আবার নতুন পোস্ট নিয়ে হাজির হচ্ছি । আজ আমি জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো শেখাবো ।

জেকোয়েরি মোবাইলের লিস্টের আইকনকে সাজানো (jQuery Mobile List Icons)ঃ
ডিফল্টভাবে লিস্টে একটা করে ডানমূখী তীর "carat-r" এট্রিবিউট ব্যবহার করে আইকন হিসেবে থাকে । আপনি একে আপনার পছন্দমত আইকন দিয়ে সাজাতে পারবেন । তাই আপনি যে আইকনকে আপনার মত করে সাজাতে চান তাতে data-icon এট্রিবিউট ব্যবহার করতে হবে ।

<ul data-role="listview">
<li><a href="#">Default is right arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

আপনি উপরের মত করে আইকনগুলোকে সাজাতে পারবেন । আপনি যদি চান কোনো আইকন দেখাবেন না তাহলে আপনাকে data-icon="false" এট্রিবিউট ব্যবহার করতে হবে ।

16x16 Iconsঃ
আইকনের স্টান্ডার্ড সাইজ হলো 16x16px । তাই এই সাইজের আইকন ব্যবহার করার জন্য <img> এলিমেন্ট(<img> element) কে "ui-li-icon" ক্লাসের সাথে যুক্ত করতে হবে ।

<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>

উদাহরণটি দেখুন তাহলেই বুঝতে পারবেন ।

জেকোয়েরি মোবাইল লিস্ট থাম্বনেইলস(jQuery Mobile List Thumbnails)ঃ
কোনো আইকনের ইমেজ সাইজ যদি 16x16px এর বেশি হয় তাহলে তো সমস্যা দেখা দিবে আর অসুন্দর দেখাবে । তাই <img> এলিমেন্টকে লিস্টের প্রথম চাইল্ড এলিমেন্ট(first child element) এর সাথে বসাতে হবে । এর সাথে কোনো ক্লাস নেম ব্যবহার করা লাগবে না । তাহলে দেখবেন যে ইমেজগুলো স্বয়ংক্রিয়ভাবে 80x80px সাইজের হয়ে যাবে । নিচের উদাহরণটি দেখুন তাহলেই বুঝবেন ।

<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>

আপনি স্টান্ডার্ড এইচটিএমএল(standard HTML) ব্যবহার করে লিস্টে তথ্য যুক্ত করতে পারেন । নিচের মত করে আপনি যুক্ত করতে পারেন ।
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>

স্পিলিট বাটনস(Split Buttons)ঃ
আপনি যদি লম্বালম্বি ডিভাইডার বার(vertical divider bar) ব্যবহার করে স্পিলিট লিস্ট(split list) তৈরি করতে চান তাহলে লিংক দুটোকে <li> element এর সাথে ব্যবহার করতে হবে । জেকোয়েরি মোবাইল দ্বিতীয় লিংককে ডান সাইডে একটি ডানমূখী তীরের সাহায্যে বসাবে । এবং ব্যবহারকারীরা যখন ঐ আইকনে মাউস পয়েন্টার রাখবে তখন টেক্সটের সাথে যদি কোনো লিংক থাকে তাহলে সেটা দেখাবে ।

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>

এটাকে আরো বেশি ফাংশন সমৃদ্ধ করতে কিছু পেজ এবং ডায়লগ বক্স কিভাবে যোগ করতে হবে তা দেখি ।
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>

<div data-role="page" id="download" data-dialog="true">

কাউন্ট বাবল(Count Bubble) এর ব্যবহারঃ
আমাদের যখন মেইলবক্সে কোনো মেইল আসে তখন একটা বাবলে কয়টি নতুন ম্যাসেজ এসেছে তার সংখ্যা উল্লেখ করে দেখায় । আপনিও ইচ্ছা করলে আপনার লিস্টে এমন দেখাতে পারবেন জেকোয়েরি ব্যবহার করে । এজন্য আপনাকে ইনলাইন এলিমেন্ট(inline element) যেমন <span> কে "ui-li-count" ক্লাসের সাথে ব্যবহার করে একটি সংখ্যা উল্লেখ করে দিতে হবে ।
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

উপরের মত করে ব্যবহার করুন তাহলে বুঝতে সুবিধা হবে । আর হ্যা, যদি কাউন্ট বাবলে সঠিক কাউন্ট দেখাতে চান তাহলে একে আরো প্রোগ্রাম দ্বারা আপডেট করতে হবে । তার জন্য আপনাকে আরো অনেক কিছু শিখতে হবে । চিন্তা নেই, আজ এটুকু শিখতে থাকুন পরের পোস্টে আমি এটা নিয়ে হাজির হয়ে যাবো ।

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
ওয়েবসাইটঃ www.firoz.me

কি খবর ? কেমন আছেন সবাই? আজকে একটু ঠাণ্ডা বেশি, তাই সবাই মনে হয় লেপের ভিতর থেকে ভালোই আছেন । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখাবো ।

jQuery CSS Classes
জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।

Global Classes
এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-corner-all
ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-shadow
ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-overlay-shadow
ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-mini
ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।

Button Classes
<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn
ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-inline
ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-icon-top
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-right
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-bottom
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-left
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-notext
ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।

ক্লাসের নামঃ ui-btn-a|b
ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।

Icon Classes
সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।

ক্লাসের নামঃ ui-icon-action
ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।

ক্লাসের নামঃ ui-icon-alert
ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।

ক্লাসের নামঃ ui-icon-audio
ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-l
ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-r
ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-l
ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-r
ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-l
ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-r
ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d
ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-back
ক্লাসের বর্ণনাঃ ব্যাক বাটন ।

ক্লাসের নামঃ ui-icon-bars
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।

ক্লাসের নামঃ ui-icon-bullets
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।

ক্লাসের নামঃ ui-icon-calendar
ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।

ক্লাসের নামঃ ui-icon-camera
ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।

ক্লাসের নামঃ ui-icon-carat-d
ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-l
ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-r
ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-check
ক্লাসের বর্ণনাঃ চেক মার্ক ।

ক্লাসের নামঃ ui-icon-clock
ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।

ক্লাসের নামঃ ui-icon-cloud
ক্লাসের বর্ণনাঃ মেঘের আইকন ।

ক্লাসের নামঃ ui-icon-comment
ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।

ক্লাসের নামঃ ui-icon-delete
ক্লাসের বর্ণনাঃ ডিলিট বাটন ।

ক্লাসের নামঃ ui-icon-edit
ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।

ক্লাসের নামঃ ui-icon-eye
ক্লাসের বর্ণনাঃ চোখের আইকন ।

ক্লাসের নামঃ ui-icon-forbidden
ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।

ক্লাসের নামঃ ui-icon-forward
ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।

ক্লাসের নামঃ ui-icon-gear
ক্লাসের বর্ণনাঃ সেটিংস বাটন ।

ক্লাসের নামঃ ui-icon-grid
ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।

ক্লাসের নামঃ ui-icon-heart
ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।

ক্লাসের নামঃ ui-icon-home
ক্লাসের বর্ণনাঃ হোম বাটন ।

ক্লাসের নামঃ ui-icon-info
ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।

ক্লাসের নামঃ ui-icon-location
ক্লাসের বর্ণনাঃ লোকেশন বাটন ।

ক্লাসের নামঃ ui-icon-lock
ক্লাসের বর্ণনাঃ তালার আইকন ।

ক্লাসের নামঃ ui-icon-mail
ক্লাসের বর্ণনাঃ মেইল আইকন ।

ক্লাসের নামঃ ui-icon-minus
ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।

ক্লাসের নামঃ ui-icon-navigation
ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।

ক্লাসের নামঃ ui-icon-phone
ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।

ক্লাসের নামঃ ui-icon-power
ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।

ক্লাসের নামঃ ui-icon-plus
ক্লাসের বর্ণনাঃ যোগ বাটন ।

ক্লাসের নামঃ ui-icon-recycle
ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।

ক্লাসের নামঃ ui-icon-refresh
ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।

ক্লাসের নামঃ ui-icon-search
ক্লাসের বর্ণনাঃ সার্চ বাটন ।

ক্লাসের নামঃ ui-icon-shop
ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।

ক্লাসের নামঃ ui-icon-star
ক্লাসের বর্ণনাঃ তারার চিহ্ন ।

ক্লাসের নামঃ ui-icon-tag
ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।

ক্লাসের নামঃ ui-icon-user
ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।

ক্লাসের নামঃ ui-icon-video
ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।

Theme Classes
জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।

ক্লাসের নামঃ ui-bar-(a-z)
ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-body-(a-z)
ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।

ক্লাসের নামঃ ui-btn-(a-z)
ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-group-theme-(a-z)
ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।

ক্লাসের নামঃ ui-overlay-(a-z)
ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।

ক্লাসের নামঃ ui-page-theme-(a-z)
ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।

Grid Classes
গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।

গ্রিড ক্লাসঃ ui-grid-solo
কলামঃ 1
কলামের ব্যাপ্তিঃ 100%
সুসঙ্গত হয়ঃ ui-block-a

গ্রিড ক্লাসঃ ui-grid-a
কলামঃ 2
কলামের ব্যাপ্তিঃ 50% / 50%
সুসঙ্গত হয়ঃ ui-block-a|b

গ্রিড ক্লাসঃ ui-grid-b
কলামঃ 3
কলামের ব্যাপ্তিঃ 33% / 33% / 33%
সুসঙ্গত হয়ঃ ui-block-a|b|c

গ্রিড ক্লাসঃ ui-grid-c
কলামঃ 4
কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d

গ্রিড ক্লাসঃ ui-grid-d
কলামঃ 5
কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e

আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।

jQuery মোবাইল ইভেন্টস

Riaz-ul-haque Mian

 
নিচে সকল jQuery মোবাইল ইভেন্টস এর তালিকা ও বর্ণনা দিয়াওয়া হলো : (প্রতিটা ইভেন্ট কে () method. দ্বারা buind করতে হবে)
1. Hashchange : বুকমার্ক এবল #hash history কে এনাবল করতে |
2. Navigate : এটি একটি wrapper ইভেন্ট যা hashchange এবং popstate উভয় এর জন্য ব্যবহার হয়
3. Orientationchange : এটি একটি গুরুত্ব পূর্ণ event যা মোবাইল ডিভাইস উল্লম্বভাবে (vertical)বা অনুভূমিকভাবে (horizontally) ঘুরানোর সময় ট্রিগার হয় |
4. Pagebeforechange : পেজ চেঞ্জ সাইকেল এর সময় দুই বার ট্রিগার হয় |
5. Pagebeforecreate : পেজ enhancement সুরুর পূর্বে যখন initialized হতে যাছসে তখন ট্রিগার হয় |
6. Pagebeforehide : transition অ্যানিমেশন সুরুর পূর্বে form পেজ এ ট্রিগার হয় |
7. pagebeforeload : সংস্করণ 1.4.0 এ এটি ব্যবহারিত হয় না . পরিত্বর্তে pagecontainerbeforeload ব্যবহার করা হয় , পেজ লোড রিকোয়েস্ট সুরুর পূর্বে ট্রিগার হয় |
8. Pagebeforeshow : transition অ্যানিমেশন সুরুর পূর্বে ‘TO’ pahe a এ ট্রিগার হয় |
9. Pagechange : changePage() রিকোয়েস্ট শেষ হওয়ার পর ট্রিগার হয় |
10. Pagechangefailed : যখন changePage() request পেজ লোড করতে ফেল করে তখন ট্রিগার হয় |
11. pagecontainerbeforeload : কোনো লোড রিকোয়েস্ট সুরুর পূর্বে ট্রিগার হয় |
12. Pagecontainerload : সফলভাবে পেজ টা সফল ভাবে লোড হওয়ার পর ট্রিগার হয় এবং DOM এ insert করে
13. pagecontainerloadfailed : পেজ লোড করতে ফেল করে তখন ট্রিগার হয় |
14. pagecreate : পেজ তৈরী করারর পর enhancement এর পূর্বে ট্রিগার হয় |
15. pagehide : transition অ্যানিমেশন সুরুর পরে form পেজ এ ট্রিগার হয় |
16. pageinit : : সংস্করণ 1.4.0 এ এটি ব্যবহারিত হয় না . পরিত্বর্তে pagecreate ব্যবহার হয় page initialized এবং enhancement কমপ্লিট হলে ট্রিগার হয় |

jQuery Icons (জেকুয়েরি আ্ইকন)
-----------------------------------
ফয়সাল রকি
-----------------------------------

jQuery Mobile এর ক্ষেত্রে এবং এট্রিবিউটে Icons যোগ বা Add করতে হলে নিম্নোক্ত icon class ও Position ব্যবহার করা যেতে পারে (শুধু মাত্র navbars এর buttons ক্ষেত্রে এর ব্যতিক্রম হবে যা পরবর্তীতে দেখানো হলো)।
Page Refresh এর ক্ষেত্রে:
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</a>
<button class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</button>

<input> buttons এর ক্ষেত্রে Icons Add করতে হলে নিম্নোক্ত data-icon attribute ব্যবহার করতে হবে:
<input type="button" value="Refresh page" data-icon="refresh">

navbar buttons এর ক্ষেত্রে Icons Add করতে হলে নিম্নোক্ত data-icon attribute ব্যবহার করতে হবে:
<a href="#anylink" data-icon="refresh">Refresh Page</a>

list buttons এর ক্ষেত্রে Icons Add করতে হলে <li> এর সাথে নিম্নোক্ত data-icon attribute ব্যবহার করতে হবে:
<li data-icon="refresh"><a href="#">Click me</a></li>

jQuery Mobile এর ক্ষেত্রে যেসকল Icons এর ব্যবহার দেখা যায় সেগুলো নিম্নে আলোচনা করা হলো:
Value/মান – বর্ণনা
action – action (বাক্সের বাইরে দিয়ে ঘড়ির কাঁটার দিকে নির্দশ করে)
alert - alert Icon নির্দেশ করে
audio – অডিও/ সাউন্ড/ স্পিকারের Icon নির্দেশ করে
arrow-d-l - বামের নিচের দিকে Arrow নির্দেশ করে
arrow-d-r - ডানের নিচের দিকে Arrow নির্দেশ করে
arrow-u-l - বামের উপরের দিকে Arrow নির্দেশ করে
arrow-u-r – ডানের উপরের দিকে Arrow নির্দেশ করে
arrow-l - বাম দিকে Arrow নির্দেশ করে
arrow-r - ডান দিকে Arrow নির্দেশ করে
arrow-u – উপর দিকে Arrow নির্দেশ করে
arrow-d – নিচ দিকে Arrow নির্দেশ করে
back – উপরের পিছন দিকে বাঁকানো back Icon নির্দেশ করে
bars – অনুভূমিকভাবে সমান্তরাল তিনটি বার নির্দেশ করে
bullets - অনুভূমিকভাবে সমান্তরাল তিনটি bullet নির্দেশ করে
calendar – calendar Icon নির্দেশ করে
camera – camera Icon নির্দেশ করে
carat-d – Carat নিচের দিকে নির্দেশ করে
carat-l - Carat বাম দিকে নির্দেশ করে
carat-r - Carat ডান দিকে নির্দেশ করে
carat-u - Carat উপর দিকে নির্দেশ করে
check – Checkmark নির্দেশ করে
clock – ঘড়ির Icon নির্দেশ করে
cloud – cloud বা মেঘ নির্দেশ করে
comment – comment বা মন্তব্যের Icon নির্দেশ করে
delete – delete বা ক্রস (X) Icon নির্দেশ করে
edit - Edit বা Pencil Icon নির্দেশ করে
eye – eye বা চোখ Icon নির্দেশ করে
forbidden - Forbidden sign বা নিষিদ্ধ চিহ্ন নির্দেশ করে
forward - উপরের সামনে দিকে বাঁকানো forward Icon নির্দেশ করে
gear – gear Icon নির্দেশ করে
grid – Grid Icon নির্দেশ করে
heart – Heart বা ভালবাসার Icon নির্দেশ করে
home – Home Icon নির্দেশ করে
info – Information বা তথ্যমূলক Icon নির্দেশ করে
location - Location বা GPS Icon নির্দেশ করে
lock – lock বা তালা Icon নির্দেশ করে
mail – mail বা চিঠিপত্র সংক্রান্ত Icon নির্দেশ করে
minus – Minus Icon নির্দেশ করে
navigation – Navigation Icon নির্দেশ করে
phone – টেলিফোন Icon নির্দেশ করে
power – Power Icon নির্দেশ করে
plus – Plus Icon নির্দেশ করে
recycle – recycle Icon নির্দেশ করে
refresh – Refresh Icon নির্দেশ করে
search – Search Icon নির্দেশ করে
shop - Shop বা ব্যাগ বা কেনাকাটা সংক্রান্ত Icon নির্দেশ করে
star – Star বা তারকা Icon নির্দেশ করে
tag – Tag Icon নির্দেশ করে
user - User বা ব্যবহারকারী বা ব্যক্তি Icon নির্দেশ করে
video – ভিডিও ক্যামেরার Icon নির্দেশ করে

জেকোয়েরি মোবাইল এর সংক্ষিপ্ত বর্ণনা ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরি মোবাইল হলো জেকোয়েরি এর একটা অংশ যেটা মোবাইল প্লাটফর্মের ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশান তৈরিতে ব্যবহার করা হয় । জেকোয়েরি মোবাইল দিয়ে তৈরি করা সকল ওয়েবসাইট এবং ওয়েব-অ্যাপ্লিকেশান প্রায় সকল ধরণের স্মার্টফোন এবং ট্যাবলেটে কাজ করে । এসব স্মার্টফোন এবং ট্যাবলেটের ভিতর আইওস, অ্যান্ডয়েড, ব্ল্যাকবেরি, উইন্ডোজ ফোন, পাম ওয়েবওস এবং সিম্বিয়ান উল্লেখযোগ্য । জেকোয়েরি মোবাইলে লেখা সাইট সকল মোবাইলে একই রকম দেখাবে । কিন্তু সেটা ডেস্কটপ কম্পিউটারের সাথে সামঞ্জস্য হবে না ।কারণ ডেস্কটপ কম্পিউটারে কিছু সংখ্যক CSS3 সাপোর্ট করে । তাই ডেস্কটপ কম্পিউটার থেকে এসব সাইট ভিজিট করতে একটু সমস্যা হবে ।

তাই আপনাকে জেকোয়েরি মোবাইলকে শুধুমাত্র মোবাইল ভিত্তিক ওয়েব-অ্যাপ্লিকেশান তৈরিতে বিবেচনায় রাখতে হবে । এটা হলো জেকোয়েরি এর একটা এক্সটেনশান যেটা এইচটিএমএল৫ এবং সিএসএস৩ ব্যবহার করে পেজের লেয়াউট তৈরি করে । এইচটিএমএল৫ এবং সিএসএস৩ জেকোয়েরিতে যৎসামান্য স্ক্রিপ্ট ব্যবহার করে । জাভাস্ক্রিপ্ট এবং অ্যাজাক্স সকল ছবিতে ব্যবহার করা হয় । এবং এটা সকল ধরণের টাচ সাপোর্ট করে, যার কারণে টাচ ফোনগুলোতে এর পরিব্যাপ্তি এত বেশি ।

জেকোয়েরি আপনার সাইট বা অ্যাপ্লিকেশনে ব্যবহারের জন্য যা প্রথম ধাপে করতে হবেঃ
আপনার সকল পেজে জেকোয়েরি লাইব্রেরি বা ফ্রেমওয়ার্ক অন্তর্ভুক্ত করতে হবে যাতে জেকোয়েরি কাজ করতে পারে । অবশ্যই এটা আপনি রেফারেন্স হিসেবে হেডারে রাখতে পারবেন এবং এই হেডার ফাইল সকল পেজে রাখতে পারেন । আপনি নিম্নোক্ত দুইভাবে জেকোয়েরি মোবাইল যোগ করতে পারেন ।

১। জেকোয়েরি মোবাইল একটি ফোল্ডারে ডাউনলোড করে রাখতে পারেন । পরে সকল পেজকে ঐ ফোল্ডারের সাথে লিঙ্ক করতে পারেন ।

২। কোথাও হোস্ট করা(CDN) জেকোয়েরি লাইব্রেরি এর সাথে আপনি লিঙ্ক করে দিতে পারেন । উদাহরণ হিসেবে বলা যায় জেকোয়েরি মোবাইল লাইব্রেরি মাইক্রোসফট এবং গুগলে হোস্ট করা আছে ।

আপনার ডাউনলোড করা জেকোয়েরি এর সাথে লিঙ্কিং এর কোডের উদাহরণঃ
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”jquery.mobile-1.4.5.css”>
<script src=”path_to_the_library_folder/jquery.js”></script>
<script src=”path_to_the_library_folder/jquery.mobile-1.4.5.js”></script>
</head>

হোস্টেড(CDN) এর সাথে জেকোয়েরি এর সাথে লিঙ্কিং এর কোডের উদাহরণঃ
<head>
<meta name=“viewport” content=“width=device-width, initial-scale=1″>
<link rel=“stylesheet” href=“http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=“http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=“http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
</head>

হোস্টেড(CDN) এর সাথে জেকোয়েরি এর সাথে লিঙ্কিং করলে সুবিধা হলো আপনার সাইটের মোবাইল ইউজারদের পেজগুলো অনেক দ্রুত লোড নেয় । এর কারণ হলো জেকোয়েরি মোবাইলে তৈরি করা অনেক সাইটে ইউজাররা ভিজিট করার পর যখন আপনার সাইটে ভিজিট করতে আসে তখন জেকোয়েরি তাদের ব্রাউজার ক্যাশ থেকে লোড নেয় । আপনি জেকোয়েরি এর কোন ভার্সনের সাথে লিংক করেছেন তার উপর নির্ভর করে কিছু কিছু অবস্থার সৃষ্টি হয় । মনে করুন আপনার লেটেস্ট ভার্সন(জেকোয়েরি তে ভার্সন উল্লেখ করে না । শুধু বলে নতুন অথবা পুরাতন ভার্সন) জেকোয়েরি লিংক করেছেন । তাহলে এর লাইব্রেরিতে অনেক বড় সমস্যা দেখা দিবে । আপনার সাইট অথবা অ্যাপ্লিকেশন পুরাপুরি অথবা এর কিছু অংশ কাজ করবে না । কিন্তু এই আপডেটের জন্য যে সবসময় একই সমস্যা দেখা দিবে তা কিন্তু নয় । এটা জাস্ট একটা মাধ্যম(দ্রুত অথবা আস্তে, অভিজ্ঞ অথবা অনভিজ্ঞ, নিরাপদ অথবা অনিরাপদ মাধ্যম)যার মাধ্যমে আপনি বুঝতে পারবেন আপনার লেটেস্ট ভার্সনে আপগ্রেড করা কিনা সেটা । তাছাড়া আপনি ম্যানুয়ালি আপডেট করে রাখতে পারেন । অনেক সময় ব্রাউজার পরিবর্তন করার জন্য এটি লাইব্রেরি আপডেট করে অধিক ব্রাউজার সহায়ক করে তোলে । সিকিউরিটি সমস্যার কারণে জেকোয়েরি মোবাইলের আপগ্রেড করা হয় । তাই লেটেস্ট ভার্সনের জন্য আপনার সফটওয়্যার আপডেট করাই ভালো মাধ্যম ।

নোটঃ এর front-end security ভাঙ্গা সহজ তাই হ্যাকারদের এটা ভাংতে খুব কম কষ্ট করাই লাগে । তাই আপনাকে জানতে হবে কিভাবে জেকোয়েরি মোবাইলকে নিরাপদ এবং বিজ্ঞভাবে ব্যবহার করতে হবে । তাই এই পোস্টটি দেখতে পারেনঃ http://resources.infosecinstitute.com/safely-and-wisely-use-jquery/

জেকোয়েরি মোবাইল হলো একটা ফ্রেমওয়ার্ক এবং জাভাস্ক্রিপ্ট এর প্রধান ফাইলস । মোবাইল ফ্রেন্ডলি করার জন্য জেকোয়েরি মোবাইল সিএসএস ক্লাসে সিএসএস ফাইলগুলো দ্বারা সকল লেয়াউট এবং ইউজার কনট্রোল বাটন এবং ফর্ম তৈরি করা হয় । এজন্য আপনাকে সকল সিএসএস ক্লাস সম্পর্কে এবং তাদের কাজ সম্পর্কে মনে রাখতে হবে। অবশ্য এজন্য আপনি গুগল সার্চ করে তাদেরকে খুব সহজে খুঁজে বের করতে পারেন । আপনি সেখান থেকে সিএসএস ক্লাসগুলোর উদাহরণ দেখতে পারেন এবং গুরুত্বপূর্ণ গুলো মনে করে রাখতে পারেন । তখন তাদের সবগুলোকে মুখস্থ না করেই সিএসএস ক্লাস দেখেই অনুমান করে ফেলতে পারবেন । যদি আপনি মুখস্থ করে থাকেন তাহলে এর উদাহরণ গুলো দেখলে আপনার অনেক দিনের জন্য মনে রাখতে সাহায্য করবে; আপনি যদি তাদের ব্যবহার না করে থাকেন তাহলে এটা আপনার মেমোরিকে সহজেই রিফ্রেশ করবে আরো তাড়াতাড়ি । চিট শিট বা রেফারেন্স শিট এর ব্যবহারও আপনাকে অনেক সাহায্য করবে ।

একটি পেজ অথবা সেকশনের বর্ণনার জন্য জেকোয়েরি মোবাইল এবং ডাটা রোলের ব্যবহার (jQuery Mobile and data-role attribute to define a page or section)ঃ

ডাটা রোল খুব গুরুত্বপূর্ণ একটি এট্রিবিউট । এটা আপনি এইচটিএমএল উপাদানের সাথে ব্যবহার করে তাদের উদ্দেশ্য বর্ণনা করতে পারেন । এতে তারা সেকশন, পেজ, কনট্রোল, কনট্রোল গুরুপ অথবা যে কনট্রোলই হলেও সমস্যা নেই তাতে ।

<div data-role=”page”> ঃ এটা একটি পেজকে নির্দেশ করে । আপন এমন একটি ফাইলের ভিতর অনেক পেজকে একসাথে রাখতে পারেন । উদাহরণ হিসেবে আপনি নিম্নোক্তভাবে দুটি পেজকে একটি ফাইলের ভিতর রাখতে পারেন ।
<div data-role=”page” id=”pageone”></div> and <div data-role=”page” id=”pagetwo”></div>

<div data-role=”header”> : এটি একটি হেডার পেজকে নির্দেশ করে ।

<div data-role=”footer”> : এটি একটি ফুটার পেজকে নির্দেশ করে ।

<div data-role=”main” class=”ui-content”> : এটি একটি পেজের প্রধান উপাদান এলাকা নির্দেশ করে ।

“ui-content”: এটি না দিলেও চলবে । কিন্তু এটা পেজের উপাদানের সাথে অতিরিক্ত প্যাডিং এবং মার্জিন যোগ করে ।

কিছু ডাটা রোল ভেলু যা মনে না রাখলেই নয় ।

data-role=”button”.

data-role=”controlgroup”

data-role=”none”

data-role=”collapsible”

data-role=”collapsibleset”

data-role=”content”

data-role=”listview”.

data-role=”list-divider”

data-role=”navbar”

data-role=”popup”

জেকোয়েরি মোবাইলে ট্রানজিশন ইফেক্ট (Transition Effect in jQuery Mobile):

<a href=”#anylink” data-transition=”slide”>Slide to Page Two</a>

ডাটা ট্রানজিশন এট্রিবিউটে আপনি এক পেজ থেকে আরেক পেজে যাওয়ার সময় ট্রানজিশন ইফেক্ট যোগ করতে পারেন ।
ডাটা ট্রানজিশনের কিছু ভেলু নিম্নরুপঃ
fade, flip, flow, pop, slide, slidefade, slideup, slidedown, turn, none
কি জেকয়েরি ট্রানজিশনের মতই একরকম তাই নাহ? সাদৃশ্যতা, উপমা, উদাহরণ এবং পার্থক্য আপনাকে খুব সহজে এগুলো বেশিদিন মনে রাখতে সাহায্য করবে ।

জেকোয়েরি মোবাইল বাটনস(jQuery Mobile buttons):
আপনি যদি জেকোয়েরি এবং এইচটিএমএল ব্যবহার করে থাকেন তাহলে নিচের কোডগুলো দেখলেই তাদের কাজ বুঝতে পারবেন । [এটাই হলো উপমা]

লিংককে বাটন হিসেবে ব্যবহার করা ঃ <a href=”index.html” data-role=”button”>Link button</a>
মনে করে দেখুন আমি আগে আপনাকে বলেছিলাম কিন্তু data-role=”button”

<input type=”button” value=”Button”>

<button class=”ui-btn”>Button</button>
এইচটিএমএল ৫ তাই নাহ ?

<a href=”#anylink” class=”ui-btn”>Button</a> : class=”ui-btn” কে মোবাইল ফ্রেন্ডলি স্টাইল তৈরির জন্য ।

বাটন সমূহের গ্রুপ (A group of Buttons):
<div data-role=”controlgroup” data-type=”horizontal”>

<a href=”#” class=”ui-btn”>Button 1</a>
<a href=”#” class=”ui-btn”>Button 2</a>
<a href=”#” class=”ui-btn”>Button 3</a>
</div>

এখানে data-type=”horizontal” এবং data-type=”vertical” দেখায় যে তারা কিভাবে অনুষ্ঠিত হবে ।

কিছু নোটঃ
<a href=”#” class=”ui-btn” data-rel=”back”>Go Back</a> : data-rel=”back”বাটনটি ব্যাক বাটন হিসেবে কাজ করে । জেকোয়েরি মোবাইল এই ফাংশনের কাজ করে থাকে ।

inline buttons: <a href=”#pagetwo” class=”ui-btn ui-btn-inline”>Go to Page Two</a>: এখানে শুধুমাত্র ক্লাসগুলো ইনলাইন বাটনগুলো তৈরি করবে ।

কিছু বাটন সম্পর্কিত সিএসএস ক্লাসঃ
ui-btn-b ( ui-btn কে কালো ব্যাকগ্রাউন্ডের সাথে একটু পরিবর্তন আনা),

ui-corner-all,

ui-mini (ছোট বাটন),

ui-shadow (বাটনের ছায়া তৈরি করে)

বাটনের সাথে আইকন যোগঃ
সিএসএস ক্লাসের মাধ্যমে আপনি বাটনের সাথে আকন যোগ করতে পারবেন । অন্যান্য সিএসএস এর মাধ্যমে আপনি বাটনের পজিশন ঠিক করতে পারবেন যে এটা বামে বসবে নাকি ডানে বসবে । বাটন বাদে শুধু আইকন দেখাতে আপনি ui-btn-icon-notext সিএসএস ক্লাস ব্যবহার করতে পারেন ।

উদাহরণঃ
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>Search</a> : বাটনের বামে একটা সার্চ আইকনসহ সার্চ বাটন ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-btn-icon-notext”>Search</a> : শুধুমাত্র সার্চ আইকন ।

ui-nodisc-icon ক্লাস আইকনের চারিদিকের গোলাকার বৃত্ত দূর করবে ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon”>Without circle</a>

<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon ui-btn-icon-notext”>Without circle</a>: কোনো বৃত্ত বা সার্কেল থাকবে না ।

ui-alt-icon : এটা ডিফল্টভাবে সাদা থাকে । এটা ব্যবহারে কালো হয়ে যাবে ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon”>Black</a>

কিছু আইকনের ক্লাসঃ
ui-icon-arrow-r (right-arrow), ui-icon-arrow-l (left arrow), ui-icon-delete, ui-icon-info (I),

ui-icon-audio, ui-icon-back, ui-icon-search, ui-icon-lock, ui-icon-grid, ui-icon-alert, ui-icon-home

আইকনের পজিশনের ক্লাস স্মূহঃ
ui-btn-icon-top, ui-btn-icon-right, ui-btn-icon-bottom, ui-btn-icon-left

জেকোয়েরি মোবাইলে পপ-আপ বাটন তৈরিঃ
data-role: using data-rel=”popup” এট্রিবিঊটের মাধ্যমে আপনি পপ-আপ মেনু তৈরি করতে পারবেন । data-dismissible=”false” এট্রিবিউটের মাধ্যমে আপনি এমন পপ-আপ তৈরি করতে পারবেন যা দেখানোর সময় বন্ধ করা যাবে না । data-rel=”popup” এর মাধ্যমে আপনি এর সাথে কোনো লিংক যোগ করতে পারবেন ।
<div data-role=”popup” id=”myPopup”>POPUP Window</div>

ইনলাইনে বাটনে পপ-আপ দেখানোর কোডঃ <a href=”#myPopup” data-rel=”popup” class=”ui-btn ui-btn-inline ui-corner-all”>Show Popup</a>

নিচের এট্রিবিউটের মাধ্যমে আপনি পপ-আপ ডিসপ্লে এর পজিশন ঠিক করতে পারবেন ।
<a href=”#myPopup” data-rel=”popup” class=”ui-btn ui-btn-inline ui-corner-all”>Show Popup</a>

আপনি পপ-আপের সাথে নিচের মেনুগুলো যোগ করে দিতে পারেন ।
<div data-role=”header”> : এটা হেডার নির্দেশ করে ।

<div data-role=”footer”> : এটা ফুটার নির্দেশ করে ।

<div data-role=”main” class=”ui-content”>

পপ-আপ ক্লোজ বাটন তৈরিঃ
ui-btn-left এবং ui-btn-right সিএসএস ক্লাস এর সাথে data-rel=”back” এট্রিবিউট যোগ করে পপ-আপ ক্লোজ বাটন তৈরি করা হয় ।
<div data-role=”popup” id=”myPopup” class=”ui-content”>
<a href=”#” data-rel=”back” class=”ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right”>Close</a></div>

জেকোয়েরি মোবাইল টুলবারসঃ
হেডারের সাথে বাটন অথবা টেক্সট যোগ করে হেডার(data-role=”header”) অথবা ফুটারে(data-role=”footer”) জেকোয়েরি মোবাইল টুলবার তৈরি করতে পারবেন । বেশি বাটন যোগ করার জন্য হেডার এর চেয়ে ফুটার বেশি প্রাধান্য পায় ।

হেডার টুলবারঃ
<div data-role=”header”>
<a href=”#” class=”ui-btn ui-icon-home ui-btn-icon-left”>Home</a>
<h1>Welcome To My Homepage</h1>
<a href=”#” class=”ui-btn ui-icon-search ui-btn-icon-left”>Search</a>
</div>

ফুটার টুলবারঃ
<div data-role=”footer”>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Facebook</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Twitter</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Instagram</a>
</div>

টুলবারের পজিশন ঠিক করাঃ
data-position=”inline”

data-position=”fixed”

data-fullscreen=”true

জেকোয়েরি মোবাইল নেভিগেশন বারঃ
data-role=”navbar” এর ব্যবহার

<div data-role=”header”>
<div data-role=”navbar”>
<ul>
<li><a href=”#anylink”>Home</a></li>
<li><a href=”#anylink”>Page Two</a></li>
<li><a href=”#anylink”>Search</a></li>
</ul>
</div>
</div>

data-icon=”home”, data-icon=”arrow-r”, data-icon=”search” এর মাধ্যমে আপনি আইকন যোগ করতে পারেন ।
আইকন পজিশনের জন্য data-iconpos=”top”, data-iconpos=”right”, data-iconpos=”bottom”, data-iconpos=”left” ব্যবহার করতে পারেন ।

জেকোয়েরি মোবাইল প্যানেলসঃ
divs এ data-role=”panel” এর ব্যবহার

<div data-role=”panel” id=”myPanel”>
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>

প্যানেলে ওপেন ইভেন্ট তৈরির উদাহরণঃ <a href=”#myPanel” class=”ui-btn ui-btn-inline”>Open Panel</a>

ক্লোজিং প্যানেলের জন্য রিলেটেড এট্রিবিউটঃ data-dismissible, data-swipe-close

প্যানেল দেখানোর জন্য অপশনঃ data-display=”overlay”, data-display=”reveal”, data-display=”push”

প্যানেলের পজিশনঃ data-position=”right”, data-position-fixed=”true”

জেকোয়েরি মোবাইল কলাপসিবলসঃ
data-role=”collapsible” ব্যবহার করে ওপেন/ক্লোজের জন্য কলাপসিবল সেকশান তৈরি করা হয় । এটা আপনি একটার সাথে আরেকটা যোফ করতে পারেন ।
<div data-role=”collapsible”>
<h1>Click me – I’m collapsible!</h1>
<p>I’m the expanded content.</p>
</div>

কলাপসিবল গুলো কখনো data-collapsed=”true” or data-collapsed=”false” এমন হবে না ।

জেকোয়েরি মোবাইল এর মাধ্যমে রেসপন্সিবল টেবিল তৈরিঃ
<table> এলিমেন্টে data-role=”table” এবং “ui-responsive" ক্লাস যোগ করে এটা করা হয় । রেসপন্সিবল টেবিল আমাদেরকে পিসি এবং মোবাইলে অনেক বড় টেবিলকে আকর্ষণীয়ভাবে দেখাতে সাহায্য করে । দুই ধরণের রেসপন্সিভ টেবিল তৈরি করা সম্ভব । reflow (default), এবং column toggle.

<table data-role=”table” class=”ui-responsive”> : reflow

<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” id=”myTable”>: column toggle

তারপর thead, tbody, th, tr, td স্ট্রাকচার ব্যবহার করা হয় ।

reflowঃ
এটা ডাটাকে সারি আকারে দেখায় । যদি এর জায়গাতে সবগুলো না ধরে তখন এটি লম্বালম্বিভাবে দেখায় ।

id:123

name: xyz

address:canada

column toggleঃ
এটা ডাটাকে সব সময় সারি আকারে দেখায় । যদি এটার জায়গাতে সবগুলো না ধরে তাহলে এতে reflow এর মত নিচে চলে যায় না । যখন একটা দেখতে দেখতে যাওয়া হয় তখন আরেকপাশ থেকে ঢেকে যেতে থাকে ।

জেকোয়েরি মোবাইল লেয়াউট গ্রিডসঃ
কিছু আদর্শ মানের সিএসএস ক্লাস ব্যবহার করে আপনি পেজের একটি আদর্শ লেয়াউট তৈরি করতে পারবেন যাকে গ্রিড লেয়াউট বলা হয় ।
<div class=”ui-grid-solo”> : এক কলামের লেয়াউট ।

ui-grid-a : two column, 50% / 50% layout – অনুভুমিক ভাবে ।

ui-grid-b : 3 column, 33% / 33% / 33% layout

ui-grid-c: 4 columns, 25% / 25% / 25% / 25% layout

ui-grid-d : 5 columns, 20% / 20% / 20% / 20% / 20% layout

আপনি সিএসএস ক্লাসের পরিবর্তন করে লেয়াউট কে নিজের মত সাজাতে পারবেন । আপনি নিচের মত করে একে সাজাতে পারেন ।

.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
}

আলাদা বা একসাথে অনেকগুলো গ্রিড বা লেয়াউট একই পেজে ব্যবহারের কোডঃ
<div class=”ui-grid-b”>
<div class=”ui-block-a”><span>Some Text</span></div>
<div class=”ui-block-b”><span>Some Text</span></div>
<div class=”ui-block-c”><span>Some Text</span></div>
</div>

তাহলে এর মাধ্যমে জেকোয়েরি মোবাইল এর একটা ধারণা পেলেন আর কি । বিস্তারিত নিয়ে হাজির হবো পরবর্তী পোস্টে । ততদিন সাথেই থাকুন । আর না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।

জেকুয়্যেরি(jQuery) মোবাইল গ্রিড (jQuery Mobile Grids)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার।)

জেকুয়্যেরি(jQuery) মোবাইল গ্রিডের বিন্যাস

jQuery মোবাইল সিএসএস ভিত্তিক একটি সেট কলামের বিন্যাস প্রদান করে। তবে, কলামের বিন্যাস সাধারণত মোবাইল এর জন্য নির্ধারিত নয়, এটি মোবাইল স্ক্রিন এর প্রস্থ এর উপর নির্ভর করে।
কিন্তু এখানে আরও উপায় আছে যদি আপনি ছোট এলিমেন্ট পোজিশন করতে চান, যেমন বাটন অথবা নেভিগেশন ট্যাব, পাশাপাশি যদি এটি টেবিল এর মধ্যে থাকে।তখন, কলাম সঠিক হবে।

একটি গ্রিড এর মধ্যে কলাম এর প্রস্থের সমান (এবং ১০০% প্রস্থ সর্বমোট), কোন বর্ডার, ব্যাকগ্রাউন্ড, মার্জিন অথবা প্যাডিং ছাড়া।
পাঁচটি গ্রিডের বিন্যাস আছে যা ব্যবহার করা যেতে পারে:

Grid Class Columns Column Widths Corresponds To Example
ui-grid-solo 1 100% ui-block-a Try it

ui-grid-a 2 50% / 50% ui-block-a|b Try it

ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Try it

ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Try it

ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Try it

কলাম কন্টেইনারের ভেতরে, চাইল্ড এলিমেন্ট এ ui-block-a|b|c|d|e ক্লাসগুলো থাকতে পারে, এটি নির্ভর করে কলামের সংখ্যার উপর। কলামগুলো পাশাপাশি অবস্থান করবে।

উদাহরণ ১: ui-grid-a ক্লাসের জন্য (যেটি দুই কলামের লেআউট), আপনাকে অবশ্যই দুটি চাইল্ড এলিমেন্ট উল্লেখ করতে হবে ui-block-a এবং ui-block-b ।

উদাহরণ 2: ui-grid-b ক্লাসের জন্য (তিন কলামের লেআউট), তিনটি চাইল্ড এলিমেন্ট উল্লেখ করতে হবে ui-block-a, ui-block-b এবং ui-block-c।

গ্রিডের কাস্টমাইজ করুন (Customize Grids)

আপনি সিএসএস (CSS) ব্যবহার করে আপনার কলাম ব্লক কাস্টমাইজ করতে পারেন:

উদাহরণ:
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

এটা নিজে চেষ্টা করে দেখুন

আপনি ইনলাইন স্টাইল ব্যবহার করে আপনার ব্লক কাস্টমাইজ করতে পারেন:
1px solid black;">Text..

একাধিক সারি (Multiple Rows)

এটির মাধ্যমে আপনার কলাম ভিতরে একাধিক সারি করা সম্ভব.

দ্রষ্টব্য: ui-block-a ক্লাস সবসময় একটি নতুন লাইন তৈরী করবে।

উদাহরণ:
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-c"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
</div>
এটা নিজে চেষ্টা করে দেখুন

রেসপনসিভ গ্রিডস্ (Responsive Grids)

ছোট স্ক্রিন এ, একটি সারিতে পাশাপাশি টেক্সট সহ অনেক বাটন না দেওয়াতে উদ্বুদ্ধ করা হয়, এতে টেক্সট সর্টেনড (shortened) হয়ে যায়।

রেসপনসিভ গ্রিডের জন্য, ui-responsive ক্লাস কন্টেইনার এ যোগ করুন:

Example
<div class="ui-grid-b ui-responsive">

এটা নিজে চেষ্টা করে দেখুন

jQuery Mobile এর Event গুলো
ইন্দ্র ভূষণ শুভ

Events= একটি ওয়েব পেইজ যা সমস্ত পরির্দশকের বিভিন্ন কর্মকান্ডে সাড়া দিতে পারে।

jQuery Mobile এর Event গুলো

jQuery Mobile এ আপনি যেকনো মানের jQuery Events ব্যবহার করতে পারেন।
উপরন্ত, jQuery Mobile আপনাকে বিভিন্ন ধরনের Events ব্যবহারের সুযোগ দিবে যা মোবাইলে ব্রাউজিং করার উপযুক্ত।
Touch Events- যখন একজন ব্যবহারকারী পর্দা স্পর্শ করে তখনই শুরু হয় (tap এবং swipe)
Scroll Events- যখন একজন ব্যবহারকারী উপর এবং নীচে স্ক্রল করে তখন শুরু হয়
Orientation events- যখন যন্ত্রটি উল্লম্বভাবে বা অনুভূমিকভাবে আবর্তিত করা হয় তখন শুরু হয়
Page events- একটি পাতা যখন দেখানো, লুকানো, তৈরি, লোড অথবা আনলোড করা হয় তখন শুরু করে
jQuery Mobile এর সমস্ত Events এর reference এর জন্য, দয়া করে jQuery Mobile Events Reference পেইজটি পরিদর্শন করুন।
jQuery Mobile Events এর প্রণালীঃ
jQueryতে, আপনি jQuery কোড প্রতিরোধ করে শুরু হওয়ার পুর্বে শেষ হবে এমন document তৈরির event শিখতে পারেন (প্রস্তুত)

jQuery তে document প্রস্তুতের event

নিজে চেষ্টা করুন>>

যাহোক, jQuery Mobile এ আমরা পেইজ তৈরির event ব্যবহার করি, যা ঘটে যখন DOM এ পেইজ তৈরি হয়, কিন্তু বর্ধিতকরনের আগে সম্পূর্ণ হয়।
দ্বিতৃয় পরিমাপকটি ঘটনা উল্লেখ করতে ("#pageone") পেইজ আইডি পয়েন্ট করেঃ

jQuery Mobile এ পেইজ তৈরির event
>

বিশেষ দ্রষ্টব্যঃ jQuery on() পদ্ধতি event হ্যান্ডলার জোড়ায় ব্যবহার করা হয়
পরবর্তী অধ্যায় jQuery Mobile এর কিছু অধিক জনপ্রিয় event ব্যাখ্যা করবে।

Paste translated/written article here
মোবাইলের jQuery Touch Events
ইন্দ্র ভূষণ শুভ

Touch Events শুরু হয় যখন ব্যবহারকারী মোবাইলের পর্দা স্পর্শ করে।
Touch Events ডেস্কটপ কম্পিউটারেও কাজ করেঃ মাউসের tap and swipe এর মাধ্যমে।
মোবাইলে jQuery ট্যাপঃ
ব্যবহারকারী যখন কনো উপাদানে ট্যাপ করতে শুরু করে তখনই ট্যাপের ঘটনা আরম্ভ হয়। নীচের উদাহরণটি বলছেঃ বর্তমান

উপাদান আড়াল হয়ে যায়, যখন ট্যাপ

উপাদানে ইন্ধন যোগায়।
উদাহরণঃ
$("p").on("taphold",function(){
$(this).hide();
});
নিজে চেষ্টা কর>>
মোবাইলে jQuery ট্যাপহোল্ডঃ
যখন ব্যবহারকারী কোন উপাদান ট্যাপ এবং এক সেকেন্ডের জন্য তা ধরে রাখে তখন ট্যাপহোল্ড আরম্ভ হয়ঃ
উদাহরণঃ
$("p").on("taphold",function(){
$(this).hide();
});
নিজে চেষ্টা কর>>

মোবাইলে jQuery সুইপঃ
সুইপের ঘটনা তখনই শুরু হয় যখন ব্যবহারকারী 30px এর বেশীতে কোন উপাদানকে আনুভূমিকভাবে সুইপ করে।
উদাহরণঃ
$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});
নিজে চেষ্টা কর>>

মোবাইলে jQuery সুইপলেফটঃ
সুইপলেফটের ঘটনা তখনই শুরু হয় যখন ব্যবহারকারী 30px এর বেশীতে কোন উপাদানকে বামদিকে সুইপ করে।
উদাহরণঃ
$("p").on("swipeleft",function(){
alert("You swiped left!");
});
নিজে চেষ্টা কর>>

মোবাইলে jQuery সুইপরাইটঃ
সুইপরাইট ঘটনা তখনই শুরু হয় যখন ব্যবহারকারী 30px এর বেশীতে কোন উপাদানকে ডানদিকে টানাটানি করে।
উদাহরণঃ
$("p").on("swiperight",function(){
alert("You swiped right!");
});
নিজে চেষ্টা কর>>

জেকোয়েরি ইভেন্টঃ

ইভেন্টঃ

ওয়েব পেজে ইউজার কখনও মাউস ক্লিক করে (কোন একটা লিংক বা যেকোন কিছুর উপর), কিবোর্ড দিয়ে টাইপ করে (ফর্ম থাকলে), কখনও কোন একটা এলিমেন্টের উপর মাউস নিয়ে যেতে পারে এটা কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা যেকোন কিছুর উপরে হতে পারে। এগুলি হচ্ছে এক একটা ইভেন্ট। যেমনঃ কোন একটা প্যারাগ্রাফ বা বাটনের উপর ক্লিক করলেন, তাহলে এটা একটা ইভেন্ট (ক্লিক ইভেন্ট)। কোন একটা এলিমেন্টের উপর মাউস নিয়ে গেলেন এটা একটা ইভেন্ট (মাউস হোভার ইভেন্ট)। এরুপ আরো ইভেন্ট আছে যেমনঃ scroll ইভেন্ট, load ইভেন্ট, focus ইভেন্ট ইত্যাদি।

ইভেন্ট হ্যান্ডলারঃ

ওয়েব পেজে এমন অনেক ইভেন্ট ঘটে, এই ইভেন্টগুলি ধরে আমরা ইচ্ছে করলে কোন কাজ করতে পারি, কোন জেকোয়েরির কোড (jQuery Code) এক্সিকিউট করাতে পারি। জেকোয়েরিতে অনেক ফাংশন আছে যেগুলি শুধু এসব কোন ইভেন্ট ঘটলে এক্সিকিউট হবে এই ফাংশনগুলিকে বলে ইভেন্ট হ্যান্ডলার। ready(), click(), hover() এরুপ আরো অনেক ইভেন্ট হ্যান্ডলার আছে। যখনি একটা ইভেন্ট ঘটল, এটাকে টেকনিকাল ভাষায় বলে অমুক ইভেন্ট fire হল। একটা ইভেন্ট fire হওয়ার সাথে সাথে ঐ ইভেন্ট সংশ্লিষ্ট হ্যান্ডলার এর ভিতর কোড এক্সিকিউট হয়।
কোন একটা এলিমেন্ট সিলেক্ট করে এরপর যদি ready() ইভেন্ট হ্যান্ডলার ব্যবহার করেন তাহলে ঐ এলিমেন্টটি পেজে সম্পূর্ন লোড হওয়ার পর ready() এর ভিতর কোডগুলি কাজ করা শুরু করবে। যদি এলিমেন্ট লোড হওয়া পূর্ন না হয় তাহলে এর ভিতরের কোড কাজ করবেনা বরং অপেক্ষা করবে। সাধারনত জেকোয়েরির কোডের শুরুতেই এই হ্যান্ডলার ব্যবহার করে অর্থ্যাৎ পুরো পেজ সম্পূর্ন লোড হবে এরপর জেকোয়েরির অন্যসব কোডগুলি কাজ করা শুরু করবে।
অনুরুপ অন্যান্য ইভেন্ট হ্যান্ডলার এর ক্ষেত্রেও প্রযোজ্য যেমনঃ $('#test').click() এভাবে থাকলে এর অর্থ হচ্ছে test আইডি সম্বলিত এলিমেন্টটি তে ক্লিক করার পর click() ইভেন্ট হ্যান্ডলার এর ভিতরের কোড এক্সিকিউট হবে।

এখন উপরের এই প্যারাগ্রাফটির click এর জায়গায় hover শব্দটি প্রতিস্থাপন করুন অথবা যেকোন ইভেন্ট হ্যান্ডলার এর নাম প্রতিস্থাপন করুন এবং লাইনটি পড়ুন।

ধন্যবাদ।

জেকোয়েরি দিয়ে মোবাইল ফরমের মেনু সিলেকশন তৈরি ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরি দিয়ে কিন্তু সব কিছুই করা যায় । যদি আপনি জেকোয়েরি ভাল করে বুঝতে পারেন এবং আপনি সেটাকে নিজের মত করে ব্যবহার করতে পারেন । আজ আমি আপনাদের জেকোয়েরি দিয়ে মোবাইল ফরমের মেনু সিলেকশন তৈরি করা শিখাবো ।

জেকোয়েরি মোবাইলের মেনু সিলেকশন
আপনি দেখবেন আইফোনে মেনু সিলেক্ট করতে গেলে যেমন দেখায় অ্যান্ড্রয়েড ফোনে সিলেক্ট করতে গেলে আরেক রকম দেখায় । এটা আলাদা দেখায় কারণ তারা আলাদা আলাদা জেকোয়েরি এর সেটিংস করে রেখেছে ।
আসুন তাহলে আমরাও এমন একটা ড্রপ-ডাউন লিস্ট তৈরি করি ।

<form method="post" action="demoform.asp">
<fieldset class="ui-field-contain">
<label for="day">Select Day</label>
<select name="day" id="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</select>
</fieldset>
</form>

এখানে <select> element দিয়ে কতগুলো অপশন রাখা হয়েছে সিলেক্ট করার জন্য । আর <option> elements গুলো অপশন গুলো ড্রপ-ডাউন আকারে দেখাতে সাহায্য করছে ।

যদি আপনার অপশন লিস্ট অনেক বড় হয় তাহলে নিচের মত করে <optgroup> element যোগ করে আরো অপশন হিসেবে যোগ করতে পারেন ।
<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>

নিজের মত করে মেনু সিলেকশন
আমি আগেই বলেছি আইফোন আর এন্ড্রয়েডের আলাদা আলাদা মেনু সিলেকশনের কথা । আপনি আইলেই কিন্তু সব মোবাইলে নিজের মত করে একই রকম মেনু সিকশন দেখাতে পারেন । এজন্য আপনাকে data-native-menu="false" attribute যোগ করত হবে নিচের মত করে ।
<select name="day" id="day" data-native-menu="false">

একাধিক মেনু সিলেকশন
আমরা দেখি আমাদের অ্যালার্ম ক্লকে একাধিক বারের জন্য অ্যালার্ম সিলেক্ট করার অপশন থাকে । এটা করার জন্য আপনাকে <select> element এর ভিতর নিচের মত করে multiple অপশনটা যোগ করে দিতে হবে ।
<select name="day" id="day" multiple data-native-menu="false">

তাহলে এই কয়টা অপশন যোগ করার নিয়ম জানলেই আপনি খুব সহজেই জেকোয়েরি দিয়ে মোবাইল ফরমের মেনু সিলেকশন তৈরি করা শিখতে পারবেন । এটার মত সহজ জিনিস আর কিছু নাই । যত শিখবেন তত মজা পাবেন । তবুও কোথাও জটিল মনে হলে কমেন্ট করতে কিন্তু ভুলবেন না ।

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল নেবিগেশন বার

জেক্যুয়েরি নেবিগেশন বার হল অনেকগুলো লিঙ্কের সমন্বয়ে গঠিত একটি গ্রুপ যা হেডারে বা ফুটারে আড়াআড়ি বা খাড়াখাড়ি অবস্থায় থাকে। [image] এই বারের লিঙ্কগুলো

উদাহরণঃ

ইঙ্গিতঃ নেভিগেশন বারের লিঙ্কগুলো ডিফল্টভাবেই বাটনে পরিবর্তিত হয় ("ui-btn" অথবা data-role="button" ক্লাস ব্যবহার করার দরকার হয় না)। বাটনের প্রস্থ কন্টেন্ট হিসেবে ডিফল্টভাবেই নির্ধারিত হয়। আনঅর্ডারড লিস্টের কন্টেন্টগুলো বাটনের সম্পূর্ণ জায়গাকে % অনুসারে ভাগ করে নেয়, ১টি বাটন হলে ১০০% ২টি বাটন হলে ৫০% করে ৩টি বাটন হলে ৩৩.৩% করে ইত্যাদি। যদি নেভিগেশন বারে ৫টির বেশি বাটন থাকে তাহলে তা স্বয়ংক্রিয়ভাবে দ্বিতীয় লাইনে চলে যায়।

নেভিগেশন বারের আইকনঃ নেভিগেশন বারে আইকন অ্যাড করতে চাইলে data-icon অ্যাট্রিভিউট ব্যবহার করতে হয়। উদাহরণঃ Search আইকন চ্যাপ্টারে বর্ণিত CSS ক্লাসের নির্দিষ্ট ভ্যালুগুলোই data-icon অ্যাট্রিভিউট ব্যবহার করে, তবে একমাত্র পার্থক্য হল- "ui-icon-value" ক্লাসের পরিবর্তে data-icon="value" অ্যাট্রিভিউট ব্যবহার করতে হয়।

অ্যাট্রিভিউট ভ্যালু data-icon="home" data-icon="arrow-r" data-icon="search"

পজিশনিং আইকনঃ একেবারে "ui-btn-icon-position" ক্লাসের মতো (আইকন চ্যাপ্টারে বর্ণিত), আপনাকে শুধু বাছাই করতে হবে আইকনটি আপনি নেভিগেশন বাটনের কোথায় ব্যবহার করতে চানঃ লেফট, রাইট, আপ অথবা বোটম। আইকনের পজিশন নেভিগেশন বার কন্টেইনারে ঠিক করে দিতে হয় কারণ প্রত্যেকটা বাটনের জন্য আলাদা আলাদা করে পজিশন ঠিক করে দেয়া সম্ভব নয়। পজিশন ঠিক করার জন্য data-iconpos অ্যাট্রিভিউট ব্যবহার করতে হয়ঃ

অ্যাট্রিভিউট ভ্যালু বর্ণনা data-iconpos="top" আইকন টপে প্রদর্শিত হবে data-iconpos="right" আইকন রাইট সাইডে প্রদর্শিত হবে data-iconpos="bottom" আইকন বোটমে প্রদর্শিত হবে data-iconpos="left" আইকন লেফট সাইডে প্রদর্শিত হবে ইঙ্গিতঃ ডিফল্ট ভাবে আইকনের পজিশন টেক্সটের উপরে ঠিক হয়ে থাকে।

অ্যাকটিভ বাটনঃ নেভিগেশন বারের কোন লিঙ্কে যখন কিল্ক করা হয় তখন এটি সিলেক্টেড হয়েছে এরকম দেখানো হয় (নিচের দিকে কিছুটা ডাউন হয়ে যায়)। এই লুকটি আনার জন্য "ui-btn-active" ক্লাস ব্যবহার করতে হয়ঃ

উদাহরণঃ

• Home

অনেকগুলো পেজের জন্য যে পেজগুলোতে ইউজার অলরেডি ভিজিট করেছে সেগুলোকে সিলেক্টেড দেখানো দরকার হয়। এজন্য লিঙ্কে "ui-state-persist" ক্লাস এবং বাটনে "ui-btn-active" ক্লাস ব্যবহার করতে হয়ঃ

• Home

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল কলাপ্সিবলস

কলাপ্সিবল কন্টেন্ট ব্লকঃ
কলাপ্সিবলের সাহায্যে আপনি কোন কন্টেন্টকে হাইড অথবা শো করতে পারবেন, এর ফলে কন্টেন্টে কোন তথ্যের কিছু অংশ স্টোর করে রাখা যায়।
ব্যাপারটা অনেকটা এরকম- ধরুন, আপনি আপনার পেজের কোন তথ্যের সম্পূর্ণ অংশ শো না করে শুধু হেডিং শো করবেন এবং বিস্তারিত পড়ার জন্য more বা + সাইন এরকম কিছু দিবেন। যদি কেউ বিস্তারিত পড়তে আগ্রহী হয় তাহলে সেই সাইনে ক্লিক করলে বাকি তথ্য শো করবে।

কোন কন্টেন্ট ব্লককে কলাপ্সিবল করার জন্য কন্টেইনারে data-role="collapsib­le" অ্যাট্রিবিউট অ্যাড করতে হবে।
উদাহরণঃ

ডিফল্টভাবে কন্টেন্ট ক্লোজ থাকে। পেজ লোড হওয়ার সময় কন্টেন্টকে রান করার জন্য data-collapsed="fals­e" অ্যাট্রিবিউট অ্যাড করতে হবে।
উদাহরণঃ

ন্যাস্টেড কলাপ্সিবল ব্লকসঃ
কলাপ্সিবল কন্টেন্ট ব্লক ন্যাস্টেডও হতে পারে (অর্থাৎ একটি কলাপ্সিবল ব্লকের ভেতর অন্য একটি কলাপ্সিবল ব্লক অ্যাড করা)।
উদাহরণঃ

ইঙ্গিতঃ কলাপ্সিবল কন্টেন্টকে অনেকবার পর্যন্ত ন্যাস্টেড করা সম্ভব।

কলাপ্সিবল সেটসঃ
অনেকগুলো কলাপ্সিবল ব্লকের গ্রুপকে একত্রে কলাপ্সিবল সেট বলে। একটি ব্লক যখন ওপেন হয় অন্য ব্লকগুলো তখন ক্লোজ থাকে। কিছু কলাপ্সিবল ব্লক তৈরি করে সেই ব্লকগুলোকে কলাপ্সিবল সেটের ভেতর data-role="collapsib­leset" অ্যাট্রিবিউট দ্বারা একত্র করতে হয়।
উদাহরণঃ

অনুবাদক: ফয়সাল রকি (এম.এ)

--------

রেসপন্সিভ টেবিল (Responsive Tables)
যখন আপনি আপনার মোবাইল ওয়েব পেইজটির content কে ব্যবহারকারী ডিভাইসের স্ক্রীন সাইজ এবং ওরিয়েন্টশন অনুযায়ী পরিবর্তন করতে চাইবেন তখন রেসপন্সিভ ডিজাইন গুরুত্বপূর্ণ ভূমিকা পালন করে। jQuery Mobile নামক class এর সাহায্যে ব্যবহারকারী ডিভাইসের স্ক্রীন সাইজ জানা যায় এবং উক্ত স্ক্রীন সাইজের জন্য content কে স্বয়ংক্রিয়ভাবে resize করা হয়।
Responsive tables এর সাহায্যে a large set of tabular data কে মোবাইল এবং ডেস্কটপ উভয়ের জন্যই সুন্দরভাবে উপস্থাপন করা যায়।
দুই প্রকারের responsive tables রয়েছে, যথা:
১) reflow এবং
২) column toggle

Reflow Table
reflow mode এর সাহায্যে minimum size অতিক্রম না করা পর্যৃন্ত table data কে horizontally রাখা হয় এবং সকল row কে vertically গ্রুপ করা হয়।
টেবিল তৈরি করার সময়

element এর মধ্যে data-role="table" ও class="ui-responsive" যোগ করতে হবে। নিম্নে উদাহরনের সাহায্যে দেখানো হলো:সঠিকভাবে রেসপন্সিভ টেবিল ব্যবহারের ক্ষেত্রেওelement ব্যবহার করতে হবে। এক্ষেত্রে rowspan ও colspan attributes ব্যবহার করা যাবে না, কেননা উক্ত attribute গুলো responsive table সাপোর্ট করে না।

Column Toggle Table
"column toggle" mode-এ যেসকল কলামের ক্ষেত্রে পর্যাপ্ত width পায় না সেসকল কলামকে hide করে দেয়া হয়।
Column Toggle Table তৈরি করার জন্য

element টি নিম্নোক্তভাবে data-role, data-mode, id ও class যোগ করতে হবে:সাধারণত jQuery Mobile টেবিলের ডানদিক হতে কলামকে hide করে দেয়, তবে আপনি কলামের গুরুত্ব অনুযায়ী order নির্দিষ্ট করে দিতে পারেন। এক্ষেত্রে table এর header () এ data-priority attribute টি যোগ করতে হবে, যেখানে সর্বোচ্চ priority মান হলো=১ এবং সর্বনিম্ন priority মান হলো=৬।I will never be hiddenI am very important - I will probably not be hiddenI am less important - I could be hiddenI am not that important - there is a good chance that I will be hiddenএখন, নিম্নোক্ত উদাহরণের মতো সকল কোডগুলোকে একত্রিত করে একটি column toggle table তৈরি করুন। দেখা যাবে যে, টেবিলের উপরের ডান প্রান্তে framework স্বয়ংক্রিয়ভাবে একটি বাটন তৈরি করেছে যার সাহায্যে ব্যবহারকারী কোন কোন কলাম দেখানো হবে তা নির্ধারণ করতে পারবে।
উদাহরণ:

toggle table button এর text পরিবর্তন করার জন্য data-column-btn-text attribute যোগ করুন।
উদাহরণ:

Styling Tables
টেবিলের shadow যোগ করতে "ui-shadow" class যোগ করুন।
shadow যোগ করুণ:

টেবিলে আরোও বেশি style যোগ করতে চাইলে CSS যোগ করতে পারেন।
সকল table row এ bottom border যোগ করতে নিচের উদাহরণটি দেখুন:সকলelements এ bottom border এবং সকল even table row এ background color যোগ করতে নিচের উদাহরণটি দেখুন:

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল ফর্ম

জেক্যুয়েরি মোবাইল স্বয়ংক্রিয়ভাবেই HTML ফর্ম তৈরি করে যেন তা দেখতে অত্যন্ত মনোরম এবং স্পর্শের অনুকূল হয়। [image]

জেক্যুয়েরি মোবাইল ফর্ম স্টাকচারঃ জেক্যুয়েরি মোবাইল ইলিমেন্ট হিসেবে HTMLকে স্টাইল করার জন্য CSS ব্যবহার করে, ইলিমেন্টকে আকর্ষণীয় এবং ব্যবহার উপযোগী করে তোলে। জেক্যুয়েরি মোবাইলে আপনি নিচের কন্ট্রোলগুলো ব্যবহার করতে পারবেনঃ • Text Inputs • Search Inputs • Radio Buttons • Checkboxes • Select Menus • Sliders • Flip Toggle Switches

জেক্যুয়েরি মোবাইল ফর্ম নিয়ে কাজ করতে চাইলে আপনাকে অবশ্যই যে জিনিসগুলো জানতে হবেঃ •

উদাহরণঃ

কৌশলঃ ইনপুট ফিল্ডে কি ধরনের ভ্যালু দেয়া যাবে তা সংক্ষেপে বোঝানোর জন্য placeholder ব্যবহার করা যায়। উদাহরণঃ First name:

কৌশলঃ লেভেলকে হাইড করার জন্য "ui-hidden-accessible" ব্যবহার করা হয়। এটা সাধারনত তখন ব্যবহার করা যখন আপনি আপনার ফর্মের placeholderকে লেভেলের মতো করে দেখাতে চাইবেনঃ উদাহরণঃ First name:

কৌশলঃ ক্লিয়ার বাটন (একটি X আইকন যা ইনপুট ফিল্ডের ডানপাশে থাকে কন্টেন্টকে মুছে ফেলার জন্য), অ্যাড করতে চাইলে data-clear-btn="true" অ্যাট্রিবিউট ব্যবহার করতে হয়ঃ উদাহরণঃ First name: ইঙ্গিতঃ ক্লিয়ার বাটন ইলিমেন্টে অ্যাড করা যায়, <span class="mceItemHidden" data-mce-bogus="1"> ইলিমেন্টে যায়না। সার্চ ফিল্ডে এই অ্যাট্রিবিউট ডিফল্টভাবেই “true” করা থাকে, এটাকে পরিবর্তন করতে চাইলে শুধুমাত্র <span class="hiddenSpellError" pre="" data-mce-bogus="1">data-</span>clear-btn="false" করে দিলেই হবে। </p> <p>জেক্যুয়েরি মোবাইল বাটনসঃ ফর্মের বাটনগুলো ইনপুট ইলিমেন্টের ষ্ট্যাণ্ডার্ড HTML দ্বারা করা হয় (button, reset, submit)। এগুলোর স্টাইল নিজে থেকেই হয় তবে মোবাইল ডিভাইস বা ডেক্সটপের জন্য আরও আকর্ষণীয় এবং ব্যবহার উপযোগী করা যায়ঃ উদাহরণঃ <<span class="hiddenSuggestion" pre="" data-mce-bogus="1">input</span> type="button" value="Button"/> <input type="reset" value="Reset Button"/> <input type="submit" value="Submit Button"/></p> <p>ইনপুট বাটনকে আরও আকর্ষণীয় করার জন্য নিচের লিস্টের data-* অ্যাট্রিবিউট গুলো ব্যবহার করা যায়। “” কমা এর ভ্যালুগুলো ডিফল্ট ভ্যালু। অ্যাট্রিবিউট ভ্যালু বর্ণনা data-corners "true" | false বাটনের কর্নারগুলো রাউন্ড আকৃতির হবে কিনা তা নির্দেশ করে data-icon Icons Reference বাটনের আইকন নির্দেশ করে data-iconpos "left" | right | top | bottom | notext বাটনের আইকনের পজিশন নির্দেশ করে data-inline true | "false" বাটন ইনলাইনের মধ্যে হবে কি না তা নির্দেশ করে data-mini true | "false" বাটন ছোট হবে কি না তা নির্দেশ করে data-shadow "true" | false বাটনের শেডো থাকবে কি না তা নির্দেশ করে</p> <p>আপনি আপনার ইচ্ছা অনুযায়ী অ্যাট্রিবিউটগুলো ব্যবহার করতে পারেনঃ <input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true"/></p> <p>ফিল্ড কন্টেইনারঃ লেভেল এবং ইলিমেন্টগুলো বড় স্ক্রিনে সঠিকভাবে প্রদর্শনের জন্য</p> <div> বা</p> <fieldset> ইলিমেন্টে "ui-field-contain" ক্লাসটি লেভেল এবং ফর্মের মাঝে কল করতে হবেঃ </p> <p>উদাহরণঃ</p> <form method="post" action="demoform.asp"> <div class="ui-field-contain"> <label for="fname">First name:</label> <input type="text" name="fname" id="fname"/> <label for="lname">Last name:</label> <input type="text" name="lname" id="lname"/></div> <p> </p> </form> <p>কৌশলঃ জেক্যুয়েরি মোবাইল ফর্মকে অটোক্লিক অ্যাট্রিবিউট না রাখতে চাইলে data-role="none" অ্যাট্রিবিউট ব্যবহার করতে হবে। <label for="fname">First name:</label> <input type="text" name="fname" id="fname" data-role="none"/></fieldset> </div> <p> </p> <p></span>

জেকোয়েরি মোবাইল ব্যবহার করে টেবিল সাজানো ।

লেখাঃ  মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

আজ আমরা জেকয়েরি মোবাইল ব্যবহার করে রেস্পন্সিভ টেবিল বানানো শিখবো যা সকল সাইজের স্ক্রীনে ভালভাবে সাপোর্ট করবে ।

রেস্পন্সিভ টেবিল(Responsive Tables):

আপনি যখন আপনার সাইটের সকল পেজের সব কন্টেন্টকে সকল প্রকার ডিভাইসে দেখাতে চান তখন রেস্পন্সিভ ডিজাইন খুব কার্যকরী হবে ।

শুধু একটা সাধারন ক্লাসের নাম জেকোয়েরি মোবাইলকে সকল সাইজের স্ক্রীনের ডিভাইসকে তার কনটেন্টগুলোকে সমানভাবে দেখাতে সাহায্য করবে ।

রেস্পন্সিভ টেবিল অনেক বড় সাইজের টেবুলার ডাটা গুলোকে মোবাইল এবং কম্পিউটার ডিভাইস উভয়তে অনেক আকর্ষণীয়ভাবে দেখাতে অনুমতি দেয় ।

দুই ধরণের রেস্পন্সিভ টেবিল আছে । reflow এবং column toggle.

১। Reflow Table:

এটা ডাটাকে যতদূর পারে সারি আকারে দেখায় । যদি এর জায়গাতে সবগুলো না ধরে তখন এটি লম্বালম্বিভাবে দেখায় ।

একটি টেবিল তৈরি করে <table>  এলিমেন্টের সাথে data-role="table" এবং "ui-responsive" ক্লাস যোগ করা হয় ।

<table data-role="table" class="ui-responsive">

রেস্পন্সিভ টেবিলকে ভালভাবে কাজ করাতে হলে আপনাকে অবশ্যই এবং এলিমেন্ট যোগ করতে হবে । rowspan অথবা colspan এট্রিবিউট যোগ করা যাবে না । কারণ তারা রেস্পন্সিভ টেবিলে সাপোর্ট করে না ।

২। Column Toggle Table:

এটা ডাটাকে সব সময় সারি আকারে দেখায় । যদি এটার জায়গাতে সবগুলো না ধরে তাহলে এতে reflow এর মত নিচে চলে যায় না । যখন একটা দেখতে দেখতে যাওয়া হয় তখন আরেকপাশ থেকে ঢেকে যেতে থাকে ।

column toggle table তৈরি করতে হলে নিচের মত করে <table> এলিমেন্ট এর সাথে যোগ করতে হবে ।

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

ডিফল্টভাবে জেকোয়েরি মোবাইল ডান দিকের টেবিলগুলো ঢেকে রাখে । আপনি চাইলে কখন কোন কলাম(column) বা ফিল্ড(field) দেখা যাবে বা কোনটা কখন ঢেকে যাবে তা নির্দেশ করে দিতে পারেন । টেবিলের হেডারের সাথে data-priority এট্রিবিউট যোগ করতে হবে এবং ১ থেকে ৬ এর ভিতর একটা নাম্বার নির্দেশ করে দিতে হবে ।

<th>I will never be hidden</th>

<th data-priority="1">I am very important - I will probably not be hidden</th>

<th data-priority="3">I am less important - I could be hidden</th>

<th data-priority="5">I am not that important - there is a good chance that I will be hidden</th>

আপনি যদি কলাম নাম্বার উল্লেখ করে না দেন তাহলে ঐ কলামটি আর ঢাকবে না ।

নিচের কোডগুলোকে একসাথে রেখে আপনি একটা column toggle table তৈরি করতে পারেন । এই ফ্রেমওয়ার্ক টেবিলের আগে ডানপাশে একটা বাটন তৈরি করবে যার মাধ্যমে ব্যবহারকারীরা তাদের পছন্দমত টেবিল ঢেকে রাখতে পারবে ।

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

<thead>

<tr>

<th data-priority="6">CustomerID</th>

<th>CustomerName</th>

<th data-priority="1">ContactName</th>

<th data-priority="2">Address</th>

<th data-priority="3">City</th>

<th data-priority="4">PostalCode</th>

<th data-priority="5">Country</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

Alfreds Futterkiste

<td>Maria Anders</td>

Obere Str. 57

<td>Berlin</td>

<td>12209</td>

<td>Germany</td>

</tr>

</tbody>

</table>

toggle table বাটনের লেখাকে পরিবর্তন করতে হলে data-column-btn-text এট্রিবিউট যোগ করতে হবে ।

<table data-role="table" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="Click me to hide or show columns!" id="myTable">

টেবিলকে স্টাইলিশ করা(Styling Tables):

শ্যাডো যোগ করা(Add shadow):

টেবিলকে শ্যাডো দিতে "ui-shadow" ক্লাস ব্যবহার করতে হবে ।

<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">

সকল টেবিলের সারির নিচে রেখার সাহায্যে সীমা যোগ করা(Add a bottom border to all table rows):

<style>

tr {

border-bottom: 1px solid #d6d6d6;

}

</style>

সকল এলিমেন্ট এবং ব্যাকগ্রাউন্ডের রেখার সীমা যোগ করা(Add a bottom border to all elements and a background color to all even table rows):

<style>

th {

border-bottom: 1px solid #d6d6d6;

}

tr:nth-child(even) {

background: #e9e9e9;

}

</style>

এভাবে খুব সহজে আপনি টেবিলকে নিজের মত করে সাজাতে এবং ডিজাইন করতে পারবেন । এজন্য জেকোয়েরি মোবাইলের ব্যবহার সবচাইতে বেশি ।

http://www.w3schools.com/jquerymobile/jquerymobile_tables.asp

জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (jQuery Mobile Popups)

লেখাঃ  মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

জেকোয়েরি মোবাইল দিয়ে আপনার মনের মত করে একটি ওয়েব সাইটের সব কিছুই তৈরি করে সাজাতে পারবেন । আজ আমি জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা শিখাবো ।

জেকোয়েরি মোবাইল পপ-আপ(jQuery Mobile Popups):

পপ-আপ গুলো ডায়ালগ বক্সের মত একই রকম দেখতে । এই পপ-আপ আর ডায়ালগ বক্স দুটোই একটি ওয়েবপেজের অবিচ্ছেদ্য অংশ । কোনো ম্যাসেজ বা লেখা, ছবি, ম্যাপ, ফেসবুক লাইক বক্স অথবা অন্যন্য কনটেন্ট দেখানোর জন্য পপ-আপ খুবই গুরুত্বপূর্ণ ।

একটি পপ-আপ তৈরির জন্য আপনাকে <a> element এবং <div> element নিয়ে শুরু করতে হবে । <a> এলিমেন্টের সাথে data-rel="popup" এট্রিবিউট  যোগ করতে হবে এবং <div> এলিমেন্টের সাথে data-role="popup" এট্রিবিউট  যোগ করতে হবে । তারপর <div> এর জন্য একটি আইডি ঠিক করতে হবে । তারপর href কে <a> এর সাথে ঐ একই আইডিতে যোগ করতে হবে । তারপর <div> এর সাথের উপাদানগুলো হবে আসল কনটেন্ট । যখন ইউজার লিংকে ক্লিক করবে তখন পপ-আপ হয়ে ঐ কন্টেন্টকে দেখাবে ।

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

<div data-role="popup" id="myPopup">

<p>This is a simple popup.</p>

</div>

মনে রাখবেন, লিংকের সাথে একই ওয়েবপেজে অবশ্যই <div>কে থাকতে হবে ।

আপনি যদি অতিরিক্ত প্যাড বা মার্জিন চান তাহলে <div> এর সাথে "ui-content" ক্লাস ব্যবহার করতে হবে ।

<div data-role="popup" id="myPopup" class="ui-content">

পপ-আপ ক্লোজ(Closing Popups):

ডিফল্টভাবে পপ-আপের বাইরে ক্লিক করলে অথবা "Esc" বাটন চাপলে পপ-আপ ক্লোজ হয় । আপনি যদি এটা বন্ধ করতে চান তাহলে পপ-আপের সাথে data-dismissible="false" এট্রিবিউট যোগ করতে হবে । আপনি যদি পপ-আপের বামে অথবা ডানে পপ-আপ ক্লোজ বাটন যোগ করতে চান তাহলে আপনাকে data-rel="back" এট্রিবিউট যোগ করতে

হবে এবং সিএসএস ক্লাস দিয়ে একে পজিশন করতে হবে ।

১।  Right close button

২। Left close button

৩। Undismissible Popup

পপ-আপের পজিশন করা(Positioning Popups):

ডিফল্টভাবে ক্লিক করলে তার সাথেই পপ-আপ দেখায় । একে নিজের মত করে দেখাতে ঐ লিংকের সাথে data-position-to attribute এট্রিবিউট যোগ করতে হবে । আপনি তিনভাবে এট্রিবিউট যোগ করে এটা করতে পারবেন ।

এট্রিবিউট ১ঃ  data-position-to="window"

বর্ণনাঃ  পপ-আপ ডিসপ্লের মাঝামাঝি ওপেন হবে ।

এট্রিবিউট ২ঃ data-position-to="#myId"

বর্ণনাঃ  পপ-আপ একটি সিলেক্ট করা আইডির উপর ওপেন হবে ।

এট্রিবিউট ৩ঃ data-position-to="origin"

বর্ণনাঃ  এটা ডিফল্ট । ক্লিক করা এলিমেন্টের উপর ওপেন হবে ।

উদাহরণঃ

<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>

<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>

<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>

ট্রানজিশনস(Transitions):

ডিফল্টভাবে পপ-আপে কোনো ট্রানজিশন ইফেক্ট দেয়া থাকে না । আপনি আপনার নিজের মত করে আগের ট্রানজিশনে বলা যেকোনো একটা ইফেক্ট ব্যবহার করতে পারেন । শুধু data-transition="value" এট্রিবিউট এর লিংকের সাথে যোগ করে দিলেই হবে ।

<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>

পপ-আপ অ্যারো(Popup Arrows):

পপ-আপ অ্যারো ব্যবহারের জন্য data-arrow attribute যোগ করতে হবে এবং  "l" (left), "t" (top), "r" (right) অথবা "b" (bottom) এর যেকোনো একটা মান উল্লেখ করে দিতে হবে ।

<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>

<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">

<p>There is an arrow on my LEFT border.</p>

</div>

পপ-আপ ডায়ালগ(Popup Dialogs):

হেডার, ফুটার অথবা কন্টেন্টে আপনি পপ-আপ ডায়ালগ বা টেক্সট যোগ করতে পারবেন ।

<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog Popup</a>

<div data-role="popup" id="myPopupDialog">

<div data-role="header"><h1>Header Text..</h1></div>

<div data-role="main" class="ui-content"><p>Some text..</p><a href="#">some links..</a>

<div data-role="footer"><h1>Footer Text..</h1></div>

</div>

ছবির পপ-আপ(Popup Photos):

আপনি ইচ্ছা করলে ছবিও পপ-আপ হিসেবে যোগ করতে পারবেন ।

<a href="#myPopup" data-rel="popup" data-position-to="window">

<img src="skaret.jpg" alt="Skaret View" style="width:200px;">

<div data-role="popup" id="myPopup">

<img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">

</div>

আপনি কয়েকটি ছবি একসাথে দেখাতে পারবেন । কিন্তু ৫০০ ছবির অ্যালবাম একসাথে পপ-আপে দেখাতে পারবেন না ।

তাহলে দেখলেন তো পপ-আপ তৈরি কত সহজ । এবার ভালভাবে প্র্যাকটিস করে পপ-আপকে আরো সুন্দর করে কাস্টোমাইজ করুন ।

http://www.w3schools.com/jquerymobile/jquerymobile_popups.asp

জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(jQuery Mobile Forms) ।

লেখাঃ  মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

প্রতিদিন আমরা জেকোয়েরি মোবাইলের নতুন একেকটি বিষয় শিখছি , আজ আমাদের শেখার বিষয় হলো জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো ।

জেকোয়েরি মোবাইল এইচটিএমএল ফর্মকে স্টাইল করে আরো আকর্ষণীয় এবং টাচকে আরো উন্নত করে তোলে ।

জেকোয়েরি মোবাইলের ফর্মের গঠন(jQuery Mobile Form Structure):

জেকোয়েরি মোবাইল সিএসএস ব্যবহার করে এইচটিএমএল এলিমেন্টস গুলোকে আরো আকর্ষণীয় এবং ব্যবহারে খুব সহজ করে তোলে ।

জেকোয়েরি মোবাইলে আপনি নিচের কনট্রোল গুলো ব্যবহার করতে পারবেন ।

• Text Inputs
• Search Inputs
• Radio Buttons
• Checkboxes
• Select Menus
• Sliders
• Flip Toggle Switches

যখন আপনি জেকোয়েরি মোবাইল ফর্ম নিয়ে কাজ করবেন তখন আপনার নিচের বিষয়গুলো অবশ্যই মনে রাখতে হবে ।

১। <form> এলিমেন্ট অবশ্যই একটি মেথড এবং এটা একটি কার্যকরী এট্রিবিউট(action attribute) ।

২। সকল ফর্মের একটি স্বতন্ত্র আইডি নাম্বার থাকবে । সাইটের সকল পেজে এই আইডি গুলো স্বতন্ত্রভাবে আড়াআড়ি থাকবে । কারণ জেকোয়েরি মোবাইলের সিঙ্গেল পেজ নেভিগেশন মডেলে(jQuery Mobile's single-page navigation model) একই সাথে অনেক পেজকে একসাথে রাখে ।

৩। সকল ফর্ম এট্রিবিউটের একটি করে অবশ্যই লেবেল থাকবে । লেবেলের আইডি কে এলিমেন্টের আইডির সাথে মেলানোর জন্য for attribute ব্যবহার করতে হয় ।

উদাহরণঃ

<form method="post" action="demoform.asp">

<label for="fname">First name:</label>

<input type="text" name="fname" id="fname">

</form>

আপনি ইচ্ছা করলে ফর্মের সাথে placeholder ট্যাগ ব্যবহার করে কিছু সংকেত বা সাহায্যপূর্ণ ইঙ্গিত রাখতে পারেন ।

<label for="fname">First name:</label>

<input type="text" name="fname" id="fname" placeholder="First name...">

লেবেল ঢেকে রাখার জন্য "ui-hidden-accessible" ক্লাস ব্যবহার করতে পারেন । এটা মাঝে মাঝে দরকার হতে পারে ।

<label for="fname class="ui-hidden-accessible"">First name:</label>

<input type="text" name="fname" id="fname" placeholder="First name...">

আপনি যদি একটি ক্লিয়ার বাটন চান তাহলে data-clear-btn="true" এট্রিবিউট ব্যবহার করতে পারেন ।

<label for="fname">First name:</label>

<input type="text" name="fname" id="fname" data-clear-btn="true">

এই ক্লিয়ার বাটন বাদে সকল <<span class="hiddenSuggestion" pre="" data-mce-bogus="1">input</span>> এলিমেন্টে যোগ করা যায় । সার্চ ফিল্ডে এটা ডিফল্টভাবে "true" এট্রিবিউটে থাকে । আপনি data-clear-btn="false" ব্যবহার করে একে পরিবর্তন করতে পারেন ।

জেকোয়েরি মোবাইল ফর্ম বাটন(jQuery Mobile Form Buttons):

ফর্মের বাটনগুলো এইচটিএমএল <input> এলিমেন্টস দ্বারা কোড করা হয়ে থাকে । তারা স্বয়ংক্রিয়ভাবে ডিজাইন করা থাকে । আপনি একে খুব সহজে আকর্ষণীয় এবং ডেস্কটপ এবং মোবাইলে সহজভাবে ব্যবহারের জন্য সাজাতে পারেন ।

<input type="button" value="Button">

<input type="reset" value="Reset Button">

<input type="submit" value="Submit Button">

আপনি <input> বাঁটনকে নিচের লিস্ট থেকে data-* এট্রিবিউট ব্যবহার করে আরো সুন্দরভাবে ডিজাইন করতে পারেন ।

এট্রিবিউটঃ  data-corners

মানঃ   true | false

বর্ণনাঃ   বাটনের কোণা গুলো গোলাকার হবে কিনা তা নির্দেশ করে ।

এট্রিবিউটঃ  data-icon

মানঃ        Icons Reference

বর্ণনাঃ  বাটনের আইকনকে নির্দেশ করে ।

এট্রিবিউটঃ  data-iconpos

মানঃ   left | right | top | bottom | notext

বর্ণনাঃ  আইকনের পজিশন নির্দেশ করে ।

এট্রিবিউটঃ  data-inline

মানঃ   true | false

বর্ণনাঃ  বাটন কি একই লাইনে হবে কিনা তা নির্দেশ করে ।

এট্রিবিউটঃ  data-mini

মানঃ   true | false

বর্ণনাঃ  বাটনের আকার কেমন হবে তা নির্দেশ করে ।

এট্রিবিউটঃ  data-shadow

মানঃ   true | false

বর্ণনাঃ  বাটনে ছায়া(shadow) থাকবে কিনা তা নির্দেশ করে ।

উপরের মোটা অক্ষরের মান গুলো ডিফল্টভাবে থাকবে ।

আপনার চাওয়া মতে নিচের এট্রিবিউট গুলো যোগ করতে পারেন ।

<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">

ফিল্ড কন্টেইনার(Field Containers) :

লেবেল এবং ফর্মের উপাদানগুলোকে চওড়া স্ক্রীনে(wider screen) দেখানোর জন্য  লেবেলের বা ফর্মের চারিদিকে <div> অথবা <fieldset> এর সাথে "ui-field-contain" ক্লাস যোগ করতে হবে ।

<form method="post" action="demoform.asp">

<div class="ui-field-contain">

<label for="fname">First name:</label>

<input type="text" name="fname" id="fname">

<label for="lname">Last name:</label>

<input type="text" name="lname" id="lname">

</div>

</form>

এটা পেজের চওড়ার(width) উপর নির্ভর করে দেখাবে । 480px এর উপর বা নিচে হলে পরিবর্তন করে দেখাবে ।

জেকোয়েরি মোবাইল যাতে ক্লিক করা এলিমেন্টগুলোকে স্টাইল না করে এজন্য আপনাকে data-role="none" এট্রিবিউট ব্যবহার করতে হবে ।

<label for="fname">First name:</label>

<input type="text" name="fname" id="fname" data-role="none">

জেকোয়েরি মোবাইলে ফর্ম সাবমিশন করা(Form submission in jQuery Mobile) :

জেকোয়েরি মোবাইল অ্যাজাক্স ব্যবহার করে স্বয়ংক্রিয়ভাবে ফর্ম সাবমিশন নিয়ন্ত্রণ করতে পারে । সার্ভারের রেসপন্স অনুসারে অ্যাপ্লিকেশনের DOM কে নিয়ন্ত্রণ করতে পারে ।

তাহলে আমরা কিন্তু জেকোয়েরি ব্যবহার করে একটি ফর্মকে কিভাবে সাজাতে হয় তা শিখে ফেললাম । এরপর আমরা যখন জেকোয়েরিতে আরো বেশি এক্সপার্ট হয়ে যাবো তখন ফর্মকে আমাদের মনের মত করে আরো সুন্দর করে কাস্টোমাইজ করতে পারবো ।

http://www.w3schools.com/jquerymobile/jquerymobile_form_basic.asp

লিখছেন সুদীপ্ত সাহা

জেক্যুয়েরি মোবাইল পপআপস

পপআপ হল অনেকটা বার্তার মতো, যেগুলো একটি পেজের কোন অংশের ওপর দিয়ে আস্তরনের মতো বিস্তৃত হয়। ছোট কোন টেক্সট, ইমেজ, ম্যাপ বা অন্য কোন কন্টেন্ট প্রদর্শনের জন্য পপআপ বক্স উপযোগী।
পপআপ তৈরি করার জন্য ইলিমেন্ট এবং

উদাহরনঃ
Show Popup

আপনার পপআপ বক্সে অতিরিক্ত প্যাডিং বা মার্জিন অ্যাট্রিবিউট ব্যবহার করতে চাইলে

উদাহরনঃ

পপআপ ক্লোজিং
পপআপ বক্সের বাইরে ক্লিক করলে অথবা “Esc” কী প্রেস করলে স্বয়ংক্রিয়ভাবে একটি পপআপ শেষ হয়ে যায় বা বন্ধ হয়ে যায়। কিন্তু পপআপ বক্সের বাইরে ক্লিক করলে পপআপ বন্ধ হয়ে যাবে, এরকম যদি আপনি না চান তাহলে আপনি পপআপে অ্যাট্রিবিউট data-dismissible="false" অ্যাড করতে পারেন (প্রয়োজনীয় নয়)। পপআপের ডানে অথবা বামে অথবা অন্য কোন দিকে আপনি একটি ক্লোজ বাটনও অ্যাড করতে পারেন। এর জন্য পপআপ কন্টেইনারে বাটন লিঙ্ক অ্যাট্রিবিউট data-rel="back" অ্যাড করতে হবে এবং বাটনের অবস্থান সিএসএস ক্লাসে নির্দিষ্ট করে দিতে হবে।

রাইট ক্লোজ বাটনের উদাহরনঃ
Show Popup

CloseI have a close button at the top right corner.Tip: You can also click outside to close me.

লেফট ক্লোজ বাটনের উদাহরনঃ
Show Popup

CloseI have a close button at the top left corner.Tip: You can also click outside to close me.

আনডিসমিসেবল পপআপের উদাহরনঃ
Show Popup

CloseI am an undismissible button (data-dismissible="false). The only way to close me is by clicking on the close button, which is positioned at the top right corner. You cannot close me by clicking outside of me.

পজিশনিং পপআপ
পপআপগুলো স্বয়ংক্রিয়ভাবে একেবারে ক্লিকড ইলিমেন্টের উপরেই প্রদর্শিত হয়। কিন্তু পপআপের অবস্থান নিয়ন্ত্রণের জন্য যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-position-to অ্যাট্রিবিউট ব্যবহার করতে হয়।
পপআপের অবস্থান নিয়ন্ত্রণের তিনটি পদ্ধতি হলঃ

অ্যাট্রিবিউট ভ্যালু বর্ণনা
data-position-to="window" পপআপ উইন্ডোর মাঝে প্রদর্শিত হবে
data-position-to="#myId" কোন নির্দিষ্ট id’র বর্ণনার অবস্থান অনুসারে পপআপ প্রদর্শিত হবে
data-position-to="origin" ডিফল্ট পপআপ সরাসরিভাবে ক্লিকড ইলিমেন্টের উপর প্রদর্শিত হবে

উদাহরনঃ
Window
id="demo"
Origin

ট্রানজিশনস
পপআপের সাথে স্বয়ংক্রিয়ভাবে কোন ট্রানজিশন ইফেক্ট অ্যাড করা থাকে না। ট্রানজিশন চ্যাপ্টারে বর্ণিত ইফেক্টগুলোর যেকোনোটি আপনি ব্যবহার করতে পারেন। শুধুমাত্র যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-transition="value" অ্যাট্রিবিউট অ্যাড করতে হবে।

সকল ট্রানজিশন ইফেক্টের জন্য একটি ড্যামো দেখানো হলঃ
Fade

পপআপ অ্যারো
পপআপের বর্ডারের মধ্যে কোন অ্যারো ব্যবহারের জন্য data-arrow অ্যাট্রিবিউট অ্যাড করতে হয় এবং লেফট এর জন্য “l” রাইটের জন্য “r” টপের জন্য “t” বোটমের জন্য “b” নির্দিষ্ট করে দিতে হয়।

উদাহরনঃ
Open Popup

There is an arrow on my LEFT border.

পপআপ ডায়ালগ
আপনি একটি মানসম্মত বা পছন্দস্বরূপ কোন ডায়ালগ আপনার পপআপে অ্যাড করতে পারেন (হেডার, ফুটার এবং কন্টেন্ট মার্কআপ)

উদাহরনঃ
Open Dialog Popup

Header Text..

Some text..

some links..

Footer Text..

পপআপ ফটো
পপআপে কোন ইমেজও প্রদর্শন করতে পারবেন।

উদাহরনঃ

jQuery মোবাইল ওরিয়েন্টেশন ইভেন্ট (jQuery Mobile Orientation Event)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

jQuery মোবাইল orientationchange ইভেন্ট

orientationchange ইভেন্ট ট্রিগার করে যখন ব্যবহারকারী উল্লম্বভাবে বা অনুভূমিকভাবে মোবাইল ডিভাইসকে ঘোরায় (rotates).

orientationchange ইভেন্ট ব্যবহার করার জন্য, উইন্ডো অবজেক্টে এটি এটাচ করতে হবে:

$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});

কলব্যাক ফাংশন এ আরগুমেন্ট থাকতে পারে, ইভেন্ট অবজেক্ট, যেটি মোবাইল ডিভাইস এর অরিয়েন্টশনকে পূর্বে ফিরিয়ে নিয়ে আসে:"পোট্রেইট" (ডিভাইসটি উল্লম্ব অবস্থানে থাকে) বা "আড়াআড়ি( landscape )" (ডিভাইসটি অনুভূমিক অবস্থায় থাকে):

উদাহরণ:
$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});

যেহেতু orientationchange ইভেন্ট window অবজেক্ট এ আবদ্ধ, আমরা window.orientation প্রোপার্টি ব্যবহার করতে পারি। উদাহরণস্বরুপ: পোট্রেইট ও ল্যান্ডস্ক্যাপ ভিউ এর জন্য আলাদা স্টাইল ব্যবহার করার জন্য:

উদাহরণ:
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});

window.orientation প্রোপার্টি রিটার্ন পোট্রোইট এর জন্য ০ এবং ল্যান্ডস্ক্যাপ এর জন্য 90 বা -90 ।