জেকোয়েরি মোবাইল বাটনে আইকন সাজানো ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
জেকোয়েরি মোবাইল এক ঝাঁক আইকন প্রদান করে যা আপনার বাঁটনকে করে তোলে আরো আকর্ষণীয় ।
জেকোয়েরি মোবাইল বাটোনে আইকন যোগ করাঃ
বাটনে আইকন যোগ করার জন্য 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>
এভাবে আপনার ইচ্ছা খুশি মত আইকনকে সাজাতে পারবেন । খুবই সহজ তাই নাহ? 😉
