Mar 16

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

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

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

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

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

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

Mar 16

জেকোয়েরি দিয়ে মোবাইল টুলবার এর বাটন বানানো . jQuery Mobile Toolbars

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

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

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

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

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

<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” রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।

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

Mar 16

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

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

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

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

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

জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস
এক পেজ থেকে অন্য পেজে কিভাবে যাবে তার জন্য জেকোয়েরি মোবাইলের অনেক ধরণের ইফেক্ট আছে । ট্রানজিশন ইফেক্ট ব্যবহার করতে গেলে আপনার ব্রাউজারে অবশ্যই 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>

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

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

Mar 16

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট
—–
কেউ যখন তার মোবাইল ডিভাইসের অবস্থান (orientation) পরিবর্তন করে আনুভূমিক (horizontal) কিংবা উল্লম্ব (vertical) অবস্থায় নিয়ে আসবে তখন orientationchange ইভেন্ট কাজ করবে।
orientationchange ইভেন্ট ব্যবহার করার জন্য window object এর সাথে ইভেন্টটি সংযুক্ত করে দিতে হবে। যেমন-
$(window).on(“orientationchange”,function(){
alert(“ডিভাইসের অবস্থান পরিবর্তন হয়েছে!”);
});
callback ফাংশনটি একটি আর্গুমেন্ট ধারণ করতে পারে, আর তা হলো event অবজেক্ট; যা মোবাইল ডিভাইসের orientation বা অবস্থা জানায়: “portrait” (অর্থ হচ্ছে মোবাইল ডিভাইস এখন উল্লম্ব অবস্থানে রাখা আছে) কিংবা “landscape” (মোবাইল ডিভাইস এখন আনুভূমিক অবস্থানে রাখা আছে):
উদাহরণ:
$(window).on(“orientationchange”,function(event){
alert(“Orientation is: ” + event.orientation);
});

Mar 16

jQuery Mobile Scrollstart

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!”);
});

Mar 16

জেকোয়েরি মোবাইল থিমস ।

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

জেকোয়েরি মোবাইল কেমন লাগছে সবার? আমার কিন্তু জেকোয়েরি মোবাইল এর নতুন নতুন বিষয় শিখতে দারুন লাগে । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইলের থিমস সম্পর্কে জানাবো ।

জেকোয়েরি মোবাইল থিমসঃ
জেকোয়েরি মোবাইল দুই ধরণের থিমস প্রদান করে । “a” এবং “b” । প্রত্যেকটির বাটন, বার, কনটেন্ট ব্লক প্রভৃতির আলাদা আলাদা রঙ আছে ।

আপনার অ্যাপ্লিকেশনের পরিবর্তন আনার জন্য data-theme এট্রিবিউট ব্যবহার করতে হবে এবং একে একটি বর্ণের সাথে নির্দিষ্ট করে দিতে হবে ।

<div data-role=”page” data-theme=”a|b”>

ভেলুঃ a
বর্ণনাঃ পেজের উপাদানসমূহ উজ্জ্বল ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
হেডার এবং ফুটারও ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
বাটনগুলো উজ্জ্বল ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
অ্যাক্টিভ বাটনগুলো নীল রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
লিংকগুলো নীল রঙের হয় ।
ইনপুট ফিল্ডগুলো সাদা ব্যাকগ্রাউন্ডের উপর উজ্জ্বল ধূসর বা কালো লেখার হয় ।

ভেলুঃ b
বর্ণনাঃ পেজের উপাদানসমূহ গাঢ় ধূসর রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
হেডার এবং ফুটারও গাঢ় ধূসর রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
বাটনগুলো কাঠ-কয়লা রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
অ্যাক্টিভ বাটনগুলো সবুজে নীল রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
লিংকগুলো সবুজে নীল রঙের হয় ।
ইনপুট ফিল্ডগুলো কালো ব্যাকগ্রাউন্ডের উপর ধূসর বা সাদা লেখার হয় ।

তাই আপনাকে “a” অথবা “b” এর যেকোন স্টাইল দিতে গেলে class=”ui-btn” ক্লাসের সাথে “ui-btn-a|b” ক্লাস ব্যবহার করতে হবে ।
<a href=”#” class=”ui-btn ui-btn-a|b”>Button</a>

হেডার এবং ফুটারে থিম ঠিক করাঃ
<div data-role=”header” data-theme=”b”></div>
<div data-role=”footer” data-theme=”b”></div>

হেডার এবং ফুটারের ডায়লগ বক্সের থিম ঠিক করাঃ
<div data-role=”page” data-dialog=”true” id=”pagetwo”>
<div data-role=”header” data-theme=”b”></div>
<div data-role=”footer” data-theme=”b”></div>
</div>

বাটনের থিম ঠিক করাঃ
<a href=”#” class=”ui-btn ui-btn-b”>Black Button</a>

আইকনের থিম ঠিক করাঃ
<a href=”#” class=”ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext”>Search</a>

পপ-আপের থিম ঠিক করাঃ
<div data-role=”popup” id=”myPopup” data-theme=”b”>

হেডার এবং ফুটারের বাটনের থিম ঠিক করাঃ
<div data-role=”header”>
<a href=”#” class=”ui-btn ui-btn-b”>Home</a>
<h1>Welcome To My Homepage</h1>
<a href=”#” class=”ui-btn”>Search/a>
</div>

<div data-role=”footer”>
<a href=”#” class=”ui-btn ui-btn-b”>Add Me On Facebook</a>
<a href=”#” class=”ui-btn”>Add Me On Twitter</a>
<a href=”#” class=”ui-btn ui-btn-b”>Add Me On Instagram</a>
</div>

নেভিগেশন বারের থিম ঠিক করাঃ
<div data-role=”footer” data-theme=”b”>
<h1>Insert Footer Text Here</h1>
<div data-role=”navbar”>
<ul>
<li><a href=”#” data-icon=”home” data-theme=”a”>Button 1</a></li>
<li><a href=”#” data-icon=”arrow-r”>Button 2</a></li>
<li><a href=”#” data-icon=”arrow-r”>Button 3</a></li>
<li><a href=”#” data-icon=”search” data-theme=”a”>Button 4</a></li>
</ul>
</div>
</div>

প্যানেলের থিম ঠিক করাঃ
<div data-role=”panel” id=”myPanel” data-theme=”b”>

কুলাপসিবল বাটনের এবং উপাদানের থিম ঠিক করাঃ
<div data-role=”collapsible” data-theme=”b” data-content-theme=”b”>
<h1>Click me – I’m collapsible!</h1>
<p>I’m the expanded content.</p>
</div>

লিস্টের থিম ঠিক করাঃ
<ul data-role=”listview” data-theme=”b”>
<li><a href=”#”>List Item</a></li>
<li><a href=”#”>List Item</a></li>
<li data-theme=”a”><a href=”#”>List Item</a></li>
<li><a href=”#”>List Item</a></li>
</ul>

স্পিলিট বাটনের থিম ঠিক করাঃ
<ul data-role=”listview” data-split-theme=”b”>

কলাপসিবল লিস্টের থিম ঠিক করাঃ
<div data-role=”collapsible” data-theme=”b” data-content-theme=”b”>
<ul data-role=”listview”>
<li><a href=”#”>Agnes</a></li>
</ul>
</div>

ফর্মের থিম ঠিক করাঃ
<label for=”name”>Full Name:</label>
<input type=”text” name=”text” id=”name” data-theme=”b”>

<label for=”colors”>Choose Favorite Color:</label>
<select id=”colors” name=”colors” data-theme=”b”>
<option value=”red”>Red</option>
<option value=”green”>Green</option>
<option value=”blue”>Blue</option>
</select>

কলাপসিবল ফর্মের থিম ঠিক করাঃ
<fieldset data-role=”collapsible” data-theme=”b” data-content-theme=”b”>
<legend>Click me – I’m collapsible!</legend>

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

এইচটিএমএল ডকুমেন্টে থিম ক্লাস ব্যবহার করে নতুন স্টাইল যোগ করতে পারবেন । যেমনঃ “ui-bar-(a-z)” ক্লাস টুলবারের জন্য, “ui-body-(a-z)” কনটেন্টের জন্য এবং ui-page-theme-(a-z) পেজের জন্য ব্যবহার করতে পারেন ।
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}

.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}

.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>

থিম রোলার নামে জেকোয়েরি মোবাইলের একটা থিম তৈরি করার টুলস আছে । জেকোয়েরি মোবাইল টিম এটা তৈরি করেছে । আপনি ইচ্ছা করলে এটা ব্যবহার করেও থিম আপনার মনের মত করে সাজাতে পারেন ।

Mar 16

জেকোয়েরি মোবাইল ব্যবহার করে ফর্মে উপাদান যোগ করা ।

জেকোয়েরি মোবাইল ব্যবহার করে ফর্মে উপাদান যোগ করা ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me

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

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

<form method=”post” action=”demoform.asp”>
<div class=”ui-field-contain”>
<label for=”fullname”>Full name:</label>
<input type=”text” name=”fullname” id=”fullname”>

<label for=”bday”>Date of Birth:</label>
<input type=”date” name=”bday” id=”bday”>

<label for=”email”>E-mail:</label>
<input type=”email” name=”email” id=”email” placeholder=”Your email..”>
</div>
</form>

উপরের উদাহরণটা আমরা ভালভাবে খেয়াল করলে বুঝতে পারবো ।

Text area ঃ
লেখা অনেক লাইনে লেখার জন্য আপনাকে <textarea> এলিমেন্টস ব্যবহার করতে হবে ।

<label for=”info”>Additional Information:</label>
<textarea name=”addinfo” id=”info”></textarea>

যখন আপনি লিখতে থাকবেন তখন লেখার জায়গাটা স্বয়ংক্রিয়ভাবে বৃদ্ধি করে নিবে ।

সার্চ ইনপুট করাঃ
এইচটিএমএল ৫ এ type=”search” ইনপুট করা হয় নতুন কোন কিছু খোঁজার জন্য ।

<label for=”search”>Search:</label>
<input type=”search” name=”search” id=”search”>

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

রেডিও বাটনঃ
রেডিও বাটন ব্যবহার করা হয় কারণ ব্যবহারকারীরা অনেক গুলো অপশন থেকে একটি সিলেক্ট করতে পারে ।
রেডিও বাটনের সেট তৈরি করার জন্য আপনাকে অনুরুপ লেবেলের সাথে type=”radio” ইনপুট ব্যবহার করতে হবে । রেডিও বাটনগুলো <fieldset> এলিমেন্টস এর সাথে মোড়ানো থাকে । <fieldset> কে নামকরণের জন্য এর সাথে <legend> এলিমেন্ট যোগ করতে পারেন ।

<form method=”post” action=”demoform.asp”>
<fieldset data-role=”controlgroup”>
<legend>Choose your gender:</legend>
<label for=”male”>Male</label>
<input type=”radio” name=”gender” id=”male” value=”male”>
<label for=”female”>Female</label>
<input type=”radio” name=”gender” id=”female” value=”female”>
</fieldset>
</form>

বাটনগুলোকে একসাথে গ্রুপ করার জন্য আপনাকে data-role=”controlgroup” এলিমেন্ট ব্যবহার করতে হবে ।

চেকবক্সঃ
অনেকগুলো অপশন থেকে যখন ব্যবহারকারী একের অধিক অপশন সিলেক্ট করে তখন চেকবক্সের ব্যবহার করা হয় ।

<form method=”post” action=”demoform.asp”>
<fieldset data-role=”controlgroup”>
<legend>Choose as many favorite colors as you’d like:</legend>
<label for=”red”>Red</label>
<input type=”checkbox” name=”favcolor” id=”red” value=”red”>
<label for=”green”>Green</label>
<input type=”checkbox” name=”favcolor” id=”green” value=”green”>
<label for=”blue”>Blue</label>
<input type=”checkbox” name=”favcolor” id=”blue” value=”blue”>
</fieldset>
</form>

চেকবক্সের উদাহরণটি খুব ভাল করে খেয়াল করুন ।

আরো উদাহরণঃ
গ্রুপ রেডিও বাটন অথবা চেকবক্সকে অনুভূমিকভাবে সাজাতে আপনাকে data-type=”horizontal” ব্যবহার করতে হবে ।
<fieldset data-role=”controlgroup” data-type=”horizontal”>

ফিল্ডের উপাদানগুলোকে <fieldset> ব্যবহার করে মোড়ানোর মত বানাতে পারেন ।
<div class=”ui-field-contain”>
<fieldset data-role=”controlgroup”>
<legend>Choose your gender:</legend>
</fieldset>
</div>

অনেকগুলো বাঁটনকে সিলেক্ট দেখানোর জন্য <input> এর সাথে “pre-selected” ব্যবহার করতে হবে ।
<input type=”radio” checked>
<input type=”checkbox” checked>

আপনি চাইলে আপনার ফর্মের পাশে একটি পপ-আপও দেখাতে পারেন ।
<a href=”#myPopup” data-rel=”popup” class=”ui-btn ui-btn-inline”>Show Popup Form</a>

<div data-role=”popup” id=”myPopup” class=”ui-content”>
<form method=”post” action=”demoform.asp”>
<div>
<h3>Login information</h3>
<label for=”usrnm” class=”ui-hidden-accessible”>Username:</label>
<input type=”text” name=”user” id=”usrnm” placeholder=”Username”>
<label for=”pswd” class=”ui-hidden-accessible”>Password:</label>
<input type=”password” name=”passw” id=”pswd” placeholder=”Password”>
</div>
</form>
</div>

উদাহরণ গুলো খুব ভালভাবে খেয়াল করুন তাহলে সব কিছু ভালভাবে বুঝতে পারবেন এবং আপনার মত করে সাজাতে পারবেন ।

Mar 16

জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো ।

জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
ফেসবুকঃ 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” এট্রিবিউট ব্যবহার করতে হবে ।

16×16 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>

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

Mar 16

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

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

জেকোয়েরি মোবাইল এক ঝাঁক আইকন প্রদান করে যা আপনার বাঁটনকে করে তোলে আরো আকর্ষণীয় ।

জেকোয়েরি মোবাইল বাটোনে আইকন যোগ করাঃ
বাটনে আইকন যোগ করার জন্য ui-icon ক্লাস ব্যবহার করতে হবে এবং একে পজিশন করার জন্য ui-btn-icon-pos ক্লাস ব্যবহার করতে হবে ।
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>Search</a>

অন্যান্য বাটোনের জন্য যেমন লিস্ট বাটন এবং ফর্ম বাটনের জন্য আপনাকে data-icon এট্রিবিউট ব্যবহার করতে হবে । এটা পরে আমরা আরো বিস্তারিত আলোচনা করবো ।

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

আইকন ক্লাসঃ ui-icon-arrow-r
আইকনের বর্ণনাঃ ডানমূখী তীর ।

আইকন ক্লাসঃ ui-icon-arrow-l
আইকনের বর্ণনাঃ বামমূখী তীর ।

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

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

আইকন ক্লাসঃ ui-icon-audio
আইকনের বর্ণনাঃ স্পীকার আইকন ।

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

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

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

আইকন ক্লাসঃ ui-icon-grid
আইকনের বর্ণনাঃ গ্রিড আইকন ।

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

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

আইকনের পজিশন করাঃ
আপনি চার জায়গায় আইকন বসাতে পারবেন তা হলো সবার উপরে, সবার নিচে , সবার বামে এবং সবার ডানে । এজন্য আপনাকে ui-btn-icon ক্লাস ব্যবহার করতে হবে ।

বাটনে লিংক যোগ করাঃ
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-top”>Top</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-right”>Right</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-bottom”>Bottom</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>Left</a>

আপনি উল্লেখিত স্থানে লিংক বসাতে পারবেন । মনে রাখবেন, আপনি যদি আইকনের পজিশন যদি না বলে দেন তাহলে কিন্তু আইকনকে দেখাবে না ।

শুধু আইকন দেখানোঃ
আপনি ইচ্ছা করলে লেখা না দেখিয়ে শুধু আইকন দেখাতে পারেন । এজন্য আপনাকে আইকন পজিশন করার জন্য “notext” ভেলু ব্যবহার করতে হবে ।
a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-notext”>Search</a>

এভাবে “notext” ভেলু ব্যবহার করে শুধু আইকন দেখাতে পারবেন ।

বেষ্টনী দূর করাঃ
ডিফল্টভাবে সকল আইকনের চারিদিকে ধূসর বেষ্টনী থাকে । এই বেষ্টনী দূর করার জন্য আপনাকে “ui-nodisc-icon” ক্লাস ব্যবহার করতে হবে ।

<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>With circle (default)</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon”>Without circle</a>

সাদা আইকনকে কালো করাঃ
ডিফল্টভাবে সকল আইকন সাদা রঙের হয় । এই সাদা আইকনকে কালো করার জন্য আপনাকে “ui-alt-icon” এলিমেন্ট যোগ করতে হবে ।

<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left”>White</a>
<a href=”#anylink” class=”ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon”>Black</a>

এভাবে আপনার ইচ্ছা খুশি মত আইকনকে সাজাতে পারবেন । খুবই সহজ তাই নাহ? 😉

Mar 16

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

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

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

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

জেকোয়েরি দিয়ে তিনভাবে বাটন তৈরি করা যায় ।
১। <input> element ব্যবহার করে ।
২। <button> element এর সাথে class=”ui-btn” ক্লাস ব্যবহার করে ।
৩। <a> element এর সাথে class=”ui-btn” ক্লাস ব্যবহার করে ।

ইনপুট এলিমেন্টের ব্যবহারঃ
<input type=”button” value=”Button”>

<button> element এর ব্যবহারঃ
<button class=”ui-btn”>Button</button>

<a> element এর ব্যবহারঃ
<a href=”#anylink” class=”ui-btn”>Button</a>

জেকোয়েরি মোবাইলে বাটন গুলো অটোমেটিক্যালি ডিজাইন করা থাকে । কম্পিউটার এবং মোবাইলে দেখানোর জন্য এগুলোকে ডিজাইন করে নিতে হয় । <a> element এর সাথে class=”ui-btn” ক্লাস ব্যবহার করে পেজের সাথে লিংক করা হয় । আর <input> অথবা <button> elements ফর্ম সাবমিশনে ব্যবহার করা হয় ।

নেভিগেশন বাটনসঃ
পেজের সাথে বাটনের লিংক করার জন্য <a> element এর সাথে class=”ui-btn” ব্যবহার করা হয় ।

<a href=”#pagetwo” class=”ui-btn”>Go to Page Two</a>

গুরুপ বাটনসঃ
জেকোয়েরি মোবাইল গুরুপ বাটন গুলোকে একসাথে করার জন্য একটি সহজ পদ্ধতি প্রদান করেছে ।
data-role=”controlgroup” কে data-type=”horizontal|vertical” এর সাথে যোগ করে দেখানো যায় যে গুরুপ বাটন টা আড়াআড়িভাবে নাকি লম্বালম্বিভাবে দেখাবে ।
নিচের উদাহরণ টা দেখিঃ
<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-rel=”back” এট্রিবিঊট ব্যবহার করে খুব সহজেই ব্যাক বাটন তৈরি করা যায় ।
<a href=”#” class=”ui-btn” data-rel=”back”>Go Back</a>

এতে কিন্তু anchor’s href value কে গুরুত্ব দেয়া হয় না ।

ইনলাইন বাটনসঃ
ডিফল্টভাবে বাটন গুলো স্ক্রিনের পুরো জায়গা জুড়ে থাকে । আপনি “ui-btn-inline” ক্লাস ব্যবহার করে বাঁটনকে নির্দিস্ট মাপে দেখাতে পারবেন । আপনি ইচ্ছা করেলে দুই বা ততোধিক বাঁটনকে এভাবে দেখাতে পারেন ।
<a href=”#pagetwo” class=”ui-btn ui-btn-inline”>Go to Page Two</a>

বাটনের সাথে লিংক করার জন্য আরো সিএসএস ক্লাসঃ

ক্লাসের নামঃ ui-btn-b
বর্ণনাঃ ডিফল্টভাবে ধূসর ব্যাকগ্রাউন্ডের সাথে কালো লেখাকে পরিবর্তন করে কালো ব্যাকগ্রাউন্ডের সাথে সাদা লেখায় পরিণত করে ।

ক্লাসের নামঃ ui-corner-all
বর্ণনাঃ বাটনের চারিদিকে গোলাকার কোণা তৈরি করে ।

ক্লাসের নামঃ ui-mini
বর্ণনাঃ বাঁটনকে ছোট করে ফেলে ।

ক্লাসের নামঃ ui-shadow
বর্ণনাঃ বাটনে ছায়া যোগ করে ।

আপনি যদি একের অধিক ক্লাস ব্যবহার করতে চান তাহলে স্পেস ব্যবহার করে সেটা করতে পারবেন ।
class=”ui-btn ui-btn-inline ui-btn-corner-all ui-shadow”

এভাবে স্পেস দিয়ে দুটির বেশি ক্লাস ব্যবহার করতে পারেন ।

ডিফল্টভাবে <input> বাটনে ছায়া এবং গোলাকার কর্ণার থাকে । কিন্তু <a> এবং <button> element এ থাকে নাহ ।

তাহলে এভাবেই চর্চা করতে থাকুন । আস্তে আস্তে সব শিখে ফেলবো একসাথে । 😀