Feb 11

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

জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (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

 

 

 

 

Feb 11

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

জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(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”>

 

এই ক্লিয়ার বাটন

 

 

জেকোয়েরি মোবাইল ফর্ম বাটন(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

Feb 11

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods) ।

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods) ।

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

মেইলঃ me@firoz.me

 

কেমন আছেন সবাই ? আজ আমি আপনাদের সাথে জেকোয়েরি অ্যাজাক্স মেথডস সম্পর্কে আলোচনা করবো ।

 

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods):

অ্যাজাক্স হলো এমন একটা কৌশল যা পুরো পেজ রিলোড না করে সার্ভারের সাথে ডাটা ট্রান্সফার করে একটি ওয়েব পেজকে আপডেট করে ।

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

তাহলে আসুন আমরা অ্যাজাক্স এর সকল মেথড গুলো শিখে ফেলি ।

 

 

মেথডঃ   $.ajax()

মেথডের বর্ণনাঃ  async AJAX রিকোয়েস্ট সম্পাদন করে ।

 

মেথডঃ   $.ajaxPrefilter()

মেথডের বর্ণনাঃ  যখন একটা রিকোয়েস্ট পাঠানো হয় $.ajax() প্রসেস করার আগে তখন কাস্টম অ্যাজাক্স অপশনগুলো নিয়ন্ত্রণ করে অথবা আগের অপশনগুলোকে সংশোধন করে ।

 

মেথডঃ   $.ajaxSetup()

মেথডের বর্ণনাঃ  ভবিষ্যতের অ্যাজাক্স রিকোয়েস্ট এর জন্য ডিফল্ট ভেলু গুলো ঠিক করা হয় ।

 

মেথডঃ   $.ajaxTransport()

মেথডের বর্ণনাঃ  একটি অবজেক্ট তৈরি করা হয় যা অ্যাজাক্স ডাটার পরিবর্তন নিয়ন্ত্রণ করতে পারে ।

 

মেথডঃ   $.get()

মেথডের বর্ণনাঃ  AJAX HTTP GET request সার্ভার থেকে ডাটা লোড নেয় ।

 

মেথডঃ   $.getJSON()

মেথডের বর্ণনাঃ  AJAX HTTP GET request সার্ভার থেকে JSON-encoded ডাটা লোড নেয় ।

 

মেথডঃ   $.getScript()

মেথডের বর্ণনাঃ  AJAX HTTP GET request সার্ভার থেকে জাভাস্ক্রীপ্ট লোড নেয় ।

 

মেথডঃ  $.param()

মেথডের বর্ণনাঃ  কোনো অবজেক্টের শ্রেণীবিন্যাস করে তার সিরিয়ালি প্রদর্শন করে ।

 

মেথডঃ   $.post()

মেথডের বর্ণনাঃ  AJAX HTTP POST request সার্ভার থেকে ডাটা লোড নেয় ।

 

মেথডঃ   ajaxComplete()

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

 

মেথডঃ  ajaxError()

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

 

মেথডঃ   ajaxSend()

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

 

মেথডঃ  ajaxStart()

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

 

মেথডঃ   ajaxStop()

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

 

মেথডঃ   ajaxSuccess()

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

 

মেথডঃ   load()

মেথডের বর্ণনাঃ  সার্ভার থেকে ডাটা লোড নেয় এবং সেই ডাটা সিলেক্টেড এলিমেন্টে পাঠায় ।

 

মেথডঃ   serialize()

মেথডের বর্ণনাঃ  অনেকগুলো এলিমেন্ট থেকে ডাটা সংগ্রহ করে ফর্ম আকারে সিরিয়ালি তা সাবমিট করে ।

 

মেথডঃ   serializeArray()

মেথডের বর্ণনাঃ  ফর্মের উপাদান থেকে নাম এবং ভেলু গুলোকে সংগ্রহ করে সিরিয়াল করে সাজায় । আপনি যেভাবে নির্দেশ করবেন সেভাবে এটা নাম এবং মানগুলোকে সিরিয়াল করবে । হতে পারে সেটা বড় মান থেকে ছোট মান অথবা ছোট থেকে বড় । নামের ক্ষেত্রেও কিন্তু তেমন A থেকে Z অথবা Z থেকে A তে সাজাতে পারবে ।

 

 

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

 

 

 

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

Feb 11

জেকোয়েরি মোবাইলের সকল ডাটা এট্রিবিউটস

    • জেকোয়েরি মোবাইলের সকল ডাটা এট্রিবিউটস

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

      মেইলঃ me@firoz.me

       

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

       

       

      জেকোয়েরি ডাটা এট্রিবিউটস(jQuery Data Attributes)ঃ

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

       

       

      বাটন(Button) এট্রিবিউটসঃ

      সিএসএস ক্লাস সাধারণত data-role=”button” হাইপারলিংক দ্বারা যুক্ত হয়ে থাকে । ইনপুটের জায়গায় এবং টুলবারের বাটনের উপাদানগুলো এবং লিংক গুলো স্বয়ংক্রিয়ভাবে বাটনের স্টাইল ডিজাইন করা থাকে তাই এতে data-role=”button” এট্রিবিউটসের দরকার নাই ।

       

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

      ভেলুঃ     true | false

      বর্ণনাঃ  বাটনগুলোর চারিদিকে কি গোলাকার কোণা থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এটা true ভেলুতে থাকে ।

       

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

      ভেলুঃ  Icons Reference

      বর্ণনাঃ  আইকন কেমন হবে তা নির্দেশ করে । ডিফল্টভাবে কোনো আইকন থাকে না ।

       

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

      ভেলুঃ  left | right | top | bottom | notext

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

       

      ডাটা এট্রিবিউটঃ  data-iconshadow

      ভেলুঃ  true | false

      বর্ণনাঃ  আইকনগুলোতে ছায়া(shadow) থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এতে ছায়া দেয়া থাকে ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  বাটনগুলো একই লাইনে থাকবে কি না তা দেখায় । ডিফল্টভাবে এরা একই লাইনে থাকে না ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  বাটনগুলোর আকার কেমন হবে এটা তা দেখায় । এটার আকার ডিফল্টভাবে বলে দেয়া থাকে না ।

       

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

      ভেলুঃ     true | false

      বর্ণনাঃ  বাটনগুলোতে ছায়া(shadow) থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এতে ছায়া দেয়া থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ     letter (a-z)

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

       

       

      একই গ্রুপের অনেকগুলো বাঁটনকে data-role=”controlgroup” এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type=”horizontal|vertical” এট্রিবিউট দ্বারা নির্দেশ করা হয় বাটনগুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।

       

       

       

      চেকবক্স(Checkbox) এট্রিবিউটসঃ

      type=”checkbox” দ্বারা লেবেলগুলোর জোড়াকে নির্দেশ করা হয় ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  চেকবক্স কি ছোট সাইজের হবে নাকি নিয়মিত আকারের হবে তা নির্দেশ করে । এটার আকার ডিফল্টভাবে বলে দেয়া থাকে না ।

       

      ডাটা এট্রিবিউটঃ  data-role

      ভেলুঃ  none

      বর্ণনাঃ  চেকবক্সকে যাতে জেকোয়েরি মোবাইল বাটনের স্টাইল না দিতে পারে এটা তা প্রতিরোধ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ চেকবক্সের  থিমের রঙ কি হবে এটা তা নির্দেশ করে ।

       

       

       

      কলাপসিবল(Collapsible) এট্রিবিউটসঃ

      হেডারের উপাদানে data-role=”collapsible” দ্বারা এটি যুক্ত হয়ে থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-collapsed

      ভেলুঃ  true | false

      বর্ণনাঃ  উপাদান গুলো কি বিস্তৃত থাকবে কি থাকবে না তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-collapsed-cue-text

      ভেলুঃ  sometext

      বর্ণনাঃ  এটাতে স্ক্রীন রিডার সফটওয়ারের সাহায্যে ব্যবহারকারীদের একটা লেখা দেখায় যে তাদের কি করতে বলা হচ্ছে । ডিফল্টভাবে এতে “click to collapse contents” লেখা থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-collapsed-icon

      ভেলুঃ  Icons Reference

      বর্ণনাঃ বাটনগুলো বিস্তৃত না থাকলে কলাপসিবল বাটনের আইকন কেমন হয় তা দেখায় । ডিফল্টভাবে (+) আইকন থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-content-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  কলাপসিবল উপাদানের থিমের রঙ নির্দেশ করা হয় । আমরা ইচ্ছা করলে চারপাশে গোলাকার কোণা যোগ করে দিতে পারি ।

       

      ডাটা এট্রিবিউটঃ  data-expanded-cue-text

      ভেলুঃ  sometext

      বর্ণনাঃ  এটাতে স্ক্রীন রিডার সফটওয়ারের সাহায্যে ব্যবহারকারীদের একটা লেখা দেখায় যে তাদের কি করতে বলা হচ্ছে । ডিফল্টভাবে এতে “click to expand contents” লেখা থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-expanded-icon

      ভেলুঃ  Icons Reference

      বর্ণনাঃ  বাটনগুলো বিস্তৃত থাকলে কলাপসিবল বাটনের আইকন কেমন হয় তা দেখায় । ডিফল্টভাবে (-) আইকন থাকে ।

       

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

      ভেলুঃ  left | right | top | bottom

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

       

      ডাটা এট্রিবিউটঃ  data-inset

      ভেলুঃ  true | false

      বর্ণনাঃ  কলাপসিবল বাটনের কিভাবে স্টাইল করা থাকবে তা নির্দেশ করে দেয় ।

       

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

      ভেলুঃ  true | false

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

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  কলাপসিবল বাটনের থিমের রঙ উল্লেখ করে ।

       

       

      কলাপসিবল সেট(Collapsible Set) এট্রিবিউটসঃ

      data-role=”collapsibleset” কন্টেইনারের মাধ্যমে এটি কলাপসিবল কন্টেন্ট ব্লকে যুক্ত হয় ।

       

      ডাটা এট্রিবিউটঃ  data-collapsed-icon

      ভেলুঃ  Icons Reference

      বর্ণনাঃ  কলাপসিবল বাটনের আওকন নির্দেশ করে । ডিফল্টভাবে এটি (+) আকারে থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-content-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  কলাপসিবল কন্টেন্টের থিমের রঙ দেখায় ।

       

      ডাটা এট্রিবিউটঃ  data-expanded-icon

      ভেলুঃ  Icons Reference

      বর্ণনাঃ  উপাদানগুলো বিস্তৃত থাকলে কেমন দেখাবে তা নির্দেশ না করে । ডিফল্টভাবে (-) আকারে থাকে ।

       

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

      ভেলুঃ  left | right | top | bottom | notext

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

       

      ডাটা এট্রিবিউটঃ  data-inset

      ভেলুঃ     true | false

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

       

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

      ভেলুঃ  true | false

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

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ letter (a-z)

      বর্ণনাঃ  কলাপসিবল সেটের থিমের রঙ উল্লেখ করে ।

       

       

       

      কনটেন্ট(Content) এট্রিবিউটসঃ

      এটি data-role=”content” এট্রিবিউট দ্বারা যুক্ত থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  কনটেন্ট গুলোর থিমের রঙ উল্লেখ করে ।

       

       

       

      কনট্রোল গ্রুপ(Controlgroup) এট্রিবিউটসঃ

      <div> অথবা <fieldset> এর সাথে এটি data-role=”controlgroup” আকারে যুক্ত হয়ে থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-exclude-invisible

      ভেলুঃ  true | false

      বর্ণনাঃ  কনট্রোল গ্রুপে অদৃশ্যমান সাব গ্রুপকে কিভাবে বিস্তৃত হবে তা বলে দেয় ।

       

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

      ভেলুঃ  true | false

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

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  কনট্রোল গ্রুপের থিমের রঙ নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-type

      ভেলুঃ  horizontal | vertical

      বর্ণনাঃ  গ্রুপগুলো কি আড়াআড়িভাবে নাকি লম্বালম্বিভাবে দেখাবে তা নির্দেশ করে ।

       

       

       

      ডায়লগ(Dialog) এট্রিবিউটঃ

      এটি data-dialog=”true” কন্টেইনার দ্বারা যুক্ত হবে ।

       

      ডাটা এট্রিবিউটঃ  data-close-btn

      ভেলুঃ  left | right | none

      বর্ণনাঃ  ক্লোজ বাটনের পজিশন নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-close-btn-text

      ভেলুঃ  sometext

      বর্ণনাঃ  ক্লোজ বাটনের জন্য কি লেখা দেখাবে তা এটা নির্দেশ করবে ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  ডায়ালগে কি গোলাকার কোণা থাকবে কি থাকবে না তা নির্দেশ করবে ।

       

      ডাটা এট্রিবিউটঃ  data-dom-cache

      ভেলুঃ  true | false

      বর্ণনাঃ  প্রত্যেক পেজে কি jQuery DOM cache পরিষ্কার হবে কিনা তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-overlay-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  ডায়ালগ পেজের ব্যাকগ্রাউন্ড রঙ নির্দেশ করবে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ     letter (a-z)

      বর্ণনাঃ  ডায়ালগ পেজের থিমের রঙ নির্দেশ করবে ।

       

      ডাটা এট্রিবিউটঃ  data-title

      ভেলুঃ  sometext

      বর্ণনাঃ  ডায়ালগ পেজের টাইটেল কি হবে তা নির্দেশ করবে।

       

       

       

      ইনহেন্সমেন্ট(Enhancement) এট্রিবিউটঃ

      এটি data-enhance=”false” অথবা data-ajax=”false” যুক্ত কন্টেইনার ।

       

      ডাটা এট্রিবিউটঃ  data-enhance

      ভেলুঃ     true | false

      বর্ণনাঃ  এটি যদি true ভেলুতে থাকে তাহলে জেকোয়েরি মোবাইল এর স্টাইল স্বয়ংক্রিয়ভাবে করে দিবে । আর যদি ভেলু false থাকে তাহলে ফ্রেমওয়ার্ক পেজের স্টাইল করবে না । মনে রাখতে হবে data-enhance=”false”  অবশ্যই $.mobile.ignoreContentEnabled=true” এর সাথে যুক্ত থাকতে হবে তা না হলে স্টাইল স্বয়ংক্রিয়ভাবে করে দিবে না ।

       

      ডাটা এট্রিবিউটঃ  data-ajax

      ভেলুঃ  true | false

      বর্ণনাঃ  পেজগুলো কি অ্যাজাক্স দ্বারা লোড নিবে কি নিবেনা তা নির্দেশ করে ।

       

       

      ফিল্ড কন্টেইনার(Field Container) এট্রিবিউটঃ

      এটি data-role=”fieldcontain” কন্টেইনারের সাথে যুক্ত হয়ে থাকে ।

       

       

      ফিক্সড টুলবার(Fixed Toolbar) এট্রিবিউটঃ

      এটি কন্টেইনারের সাথে data-role=”header” অথবা data-role=”footer” একসাথে data-position=”fixed এট্রিবিউটের সাথে যুক্ত হয় ।

       

      ডাটা এট্রিবিউটঃ  data-disable-page-zoom

      ভেলুঃ  true | false

      বর্ণনাঃ  ব্যবহারকারীরা পেজ কি জুম করে দেখতে পারবে কি না তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-fullscreen

      ভেলুঃ  true | false

      বর্ণনাঃ  টুলবারের পজিশন সবার উপরে নাকি নিচে হবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-tap-toggle

      ভেলুঃ  true | false

      বর্ণনাঃ  ব্যবহারকারীরা ট্যাপ বা ক্লিক করে টুলবারের ভিজিবিলিটি দেখতে বা বন্ধ করতে পারবে কিনা তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-transition

      ভেলুঃ     slide | fade | none

      বর্ণনাঃ  ট্যাপ বা ক্লিক করলে ট্রানজিশন ইফেক্টস কেমন হবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-update-page-padding

      ভেলুঃ  true | false

      বর্ণনাঃ  “updatelayout” events এর মাধ্যমে টপ এবং বোটম থেকে কত দূরত্বে টুলবার থাকবে এবং টুলবারের সাইজ কি হবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-visible-on-page-show

      ভেলুঃ  true | false

      বর্ণনাঃ  যখন এর মূল পেজ দেখায় তখল টুলবার দেখাবে কিনা তা নির্দেশ করে ।

       

       

      Flip Toggle Switch এট্রিবিউটসঃ

      একটি <input type=”checkbox”> এর সাথে  “flipswitch” ডাটা রোল যুক্ত হয়ে থাকে ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  সুইচ এর সাইজ নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-on-text

      ভেলুঃ  sometext

      বর্ণনাঃ  সুইচ চাপলে অন হয়ে থাকবে ।

       

      ডাটা এট্রিবিউটঃ  data-off-text

      ভেলুঃ  sometext

      বর্ণনাঃ  সুইচ চাপলে অফ হয়ে যাবে ।

       

       

      ফুটার(Footer) এট্রিবিউটসঃ

      কন্টেইনারের সাথে data-role=”footer” এট্রিবিউটস যুক্ত হয় ।

       

      ডাটা এট্রিবিউটঃ  data-id

      ভেলুঃ  sometext

      বর্ণনাঃ  এটা একটি সম্পূর্ণ আলাদা আইডি নির্দেশ করে । ফুটার স্থির করার জন্য দরকার হয় ।

       

      ডাটা এট্রিবিউটঃ  data-position

      ভেলুঃ  inline | fixed

      বর্ণনাঃ  ফুটার পেজের সাথে একই লাইনে থাকবে নাকি সবার নিচে থাকবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-fullscreen

      ভেলুঃ  true | false

      বর্ণনাঃ  ফুটার পেজের কনটেন্টের সাথে থাকবে নাকি সবার নিচে সবসময় থাকবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  ফুটারের থিমের রঙ নির্দেশ করে ।

       

      ফুটারকে ফুলস্ক্রীনের সাথে রাখার জন্য প্রথমে data-position=”fixed” করে তারপর এর সাথে data-fullscreen এট্রিবিউট যোগ করুন ।

       

       

       

      হেডার(Header) এট্রিবিউটঃ

      এটা কন্টেইনারের সাথে data-role=”header”এট্রিবিউটের মাধ্যমে যুক্ত থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-id

      ভেলুঃ  sometext

      বর্ণনাঃ   এটা একটি সম্পূর্ণ আলাদা আইডি নির্দেশ করে । হেডার স্থির করার জন্য দরকার হয় ।

       

      ডাটা এট্রিবিউটঃ  data-position

      ভেলুঃ  inline | fixed

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

       

      ডাটা এট্রিবিউটঃ  data-fullscreen

      ভেলুঃ  true | false

      বর্ণনাঃ   হেডার পেজের কনটেন্টের সাথে থাকবে নাকি সবার উপরে সবসময় থাকবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  হেডারের থিমের রঙ নির্দেশ করে ।

       

      হেডারকে ফুলস্ক্রীনের সাথে রাখার জন্য প্রথমে data-position=”fixed” করে তারপর এর সাথে data-fullscreen এট্রিবিউট যোগ করুন ।

       

       

       

      ইনপুটস(Inputs) এট্রিবিউটসঃ

      এটি type=”text|search|etc.” অথবা  textarea elements এর সাথে যুক্ত হয়ে থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-clear-btn

      ভেলুঃ  true | false

      বর্ণনাঃ  ইনপুটের কোথায় “clear” বাটন থাকবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-clear-btn-text

      ভেলুঃ  text

      বর্ণনাঃ  ইনপুটের  “clear” বাটনের কোথায় একটি লেখা থাকবে তা নির্দেশ করে । ডিফল্টভাবে “clear text” লেখা থাকে ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  ইনপুটের সাইজ কি হবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-role

      ভেলুঃ     none

      বর্ণনাঃ  জেকোয়েরি মোবাইল যাতে একে বাটনের আকারে স্টাইল না দিতে পারে তার জন্য প্রতিরোধ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  ইনপুট ফিল্ডের থিমের রঙ নির্দেশ করে ।

       

       

      লিংক(Link) এট্রিবিউটঃ

      এর মাধ্যমে সকল প্রকার লিঙ্ককে বুঝায় ।

       

      ডাটা এট্রিবিউটঃ  data-ajax

      ভেলুঃ  true | false

      বর্ণনাঃ  ব্যবহারকারীর অভিজ্ঞতা এবং ট্রানজিশন বাড়ানোর জন্য অ্যাজাক্স দ্বারা পেজ লোডের জন্য নির্দেশ করে । ভেলু falseথাকলে নরমাল পেজ দেখাবে ।

       

      ডাটা এট্রিবিউটঃ  data-direction

      ভেলুঃ  reverse

      বর্ণনাঃ  ট্রানজিশনের অ্যানিমেশনকে উলটা করে দেখায় ।

       

      ডাটা এট্রিবিউটঃ  data-dom-cache

      ভেলুঃ  true | false

      বর্ণনাঃ  প্রতি পেজের জন্য jQuery DOM cache কে ক্লিয়ার  করবে কি না তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-prefetch

      ভেলুঃ  true | false

      বর্ণনাঃ  পেজ কে DOM এ নিয়ে যায় যাতে ভিজিটররা এটা ভিজিট করার সময় দেখতে পায় ।

       

      ডাটা এট্রিবিউটঃ  data-rel

      ভেলুঃ  back | dialog | external | popup

      বর্ণনাঃ  লিংক কিভাবে কাজ করবে তা নির্দেশ করে । Back,  Dialog, Popup ইত্যাদি কাজ করে থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-transition

      ভেলুঃ     fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

      বর্ণনাঃ  এক পেজ থেকে অন্য পেজে ট্রানজিশন কিভাবে হবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-position-to

      ভেলুঃ     origin | jQuery selector | window

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

       

       

       

      লিস্ট(List) এট্রিবিউটঃ

      <ol> অথবা <ul> একসাথে data-role=”listview” এর সাথে যুক্ত হয়ে থাকে ।

       

      ডাটা এট্রিবিউটঃ  data-autodividers

      ভেলুঃ  true | false

      বর্ণনাঃ  স্বয়ংক্রিয়ভাবে লিস্ট আইটেমগুলোকে ভাগ করবে কি করবেনা তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-count-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  থিমের রঙ বাবল দ্বারা গণনার জন্য নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-divider-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  লিস্ট আইটেমের বিভক্তকারীর রঙ নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-filter

      ভেলুঃ  true | false

      বর্ণনাঃ  লিস্টে সার্চ বক্স যুক্ত হবে কি হবেনা তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-filter-placeholder

      ভেলুঃ  sometext

      বর্ণনাঃ  সার্চ বক্সের সাথে টেক্সট যুক্ত হবে কিনা তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ data-filter-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  সার্চ ফিল্টারে থিমেরর রঙ নির্দেশ করে ।

       

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

      ভেলুঃ  Icons Reference

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

       

      ডাটা এট্রিবিউটঃ  data-inset

      ভেলুঃ  true | false

      বর্ণনাঃ  লিস্ট কি গোলাকার কোণা অথবা মার্জিন দ্বারা স্টাইল করা হবে কিনা তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-split-icon

      ভেলুঃ     Icons Reference

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

       

      ডাটা এট্রিবিউটঃ  data-split-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  স্পিলিট বাটনের থিমের রঙ নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  লিস্টের থিমের রঙ নির্দেশ করে ।

       

       

      লিস্ট আইটেম(List item) এট্রিবিঊটঃ

      একটি <li> এর সাথে  <ol> অথবা <ul> যুক্ত হয়ে তা data-role=”listview” এর সাথে যুক্ত হয় ।

       

      ডাটা এট্রিবিউটঃ  data-filtertext

      ভেলুঃ  sometext

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

       

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

      ভেলুঃ  Icons Reference

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

       

      ডাটা এট্রিবিউটঃ  data-role

      ভেলুঃ  list-divider

      বর্ণনাঃ  লিস্ট আইটেমের পার্থক্যকারীকে নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  লিস্ট আইটেমের থিমের রঙ নির্দেশ করে ।

       

       

      নেভবার(Navbar) এট্রিবিউটসঃ

      <li> এলিমেন্টের সাথে data-role=”navbar” কন্টেইনার যুক্ত হয় ।

       

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

      ভেলুঃ  Icons Reference

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

       

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

      ভেলুঃ  left | right | top | bottom | notext

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

       

       

      পেজ(Page) এট্রিবিউটসঃ

      এটি একটি data-role=”page” কন্টেইনার ।

       

      ডাটা এট্রিবিউটঃ  data-dom-cache

      ভেলুঃ  true | false

      বর্ণনাঃ প্রতি পেজের জন্য jQuery DOM cache কে ক্লিয়ার  করবে কি না তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-overlay-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  ডায়ালগ পেজের ব্যাকগ্রাউন্ড রঙ নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  পেজের থিমের রঙ নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-title

      ভেলুঃ  sometext

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

       

      ডাটা এট্রিবিউটঃ  data-url

      ভেলুঃ     url

      বর্ণনাঃ  ইউআরএল কে আপডেট করে তার রিকুস্টেড পেজে নিয়ে যায় ।

       

       

      পপ-আপ(Popup) এট্রিবিউটসঃ

      এটি একটি data-role=”popup” কন্টেইনার ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  পপ-আপের গোলাকার কোণা হবে কিনা সেটা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-dismissible

      ভেলুঃ  true | false

      বর্ণনাঃ  পপ-আপের বাইরে ক্লিক করলে পপ-আপ বন্ধ হবে কিনা সেটা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-history

      ভেলুঃ  true | false

      বর্ণনাঃ  পপ-আপ ব্রাউজার হিস্টোরি তৈরি করবে কিনা সেটা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-overlay-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  ব্যাকগ্রাউন্ডের সাথে পপ-আপের রঙ নির্দেশ করে ।

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  পপ-আপ বক্সে ছায়া থাকবে কিনা তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  পপ-আপ বক্সের থিমের কালার নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-tolerance

      ভেলুঃ  30, 15, 30, 15

      বর্ণনাঃ  পপ-আপ উন্ডো এর পেজের চারিদিক থেকে দূরত্ব নির্দেশ করে ।

       

       

      রেডিও বাটন(Radio Button) এট্রিবিউটসঃ

      লেবেলের জোড়ার সাথে type=”radio” ইনপুট হয় ।

       

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

      ভেলুঃ  true | false

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

       

      ডাটা এট্রিবিউটঃ  data-role

      ভেলুঃ  none

      বর্ণনাঃ  জেকোয়েরি মোবাইল যাতে এই বাটনের স্টাইল পরিবর্তন না করে তা প্রতিরোধ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ     letter (a-z)

      বর্ণনাঃ  রেডিও বাটনের থিমের রঙ নির্দেশ করে ।

       

      একই গ্রুপের অনেকগুলো রেডিও বাঁটনকে data-role=”controlgroup” এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type=”horizontal|vertical” এট্রিবিউট দ্বারা নির্দেশ করা হয় বাটনগুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।

       

       

      সিলেক্ট(Select) এট্রিবিউটসঃ

      সকল <select> এলিমেন্টস কে বুঝায় ।

       

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

      ভেলুঃ  Icons Reference

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

       

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

      ভেলুঃ     left | right | top | bottom | notext

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

       

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

      ভেলুঃ  true | false

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

       

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

      ভেলুঃ  true | false

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

       

      ডাটা এট্রিবিউটঃ  data-native-menu

      ভেলুঃ  true | false

      বর্ণনাঃ  যখন ভেলু false থাকে তখন জেকোয়েরি এর কাস্টম সিলেক্ট মেনু দেখায় ।

       

      ডাটা এট্রিবিউটঃ  data-overlay-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  জেকোয়েরি এর নিজস্ব কাস্টম মেনু দেখায় ।

       

      ডাটা এট্রিবিউটঃ  data-placeholder

      ভেলুঃ  true | false

      বর্ণনাঃ  non-native select এর জায়গায় <option> element সেট হয় ।

       

      ডাটা এট্রিবিউটঃ  data-role

      ভেলুঃ     none

      বর্ণনাঃ   জেকোয়েরি মোবাইল যাতে এই বাটনের স্টাইল পরিবর্তন না করে তা প্রতিরোধ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  সিলেক্ট এলিমেন্ট এর থিমের রঙ নির্দেশ করে ।

       

      একই গ্রুপের অনেকগুলো সিলেক্ট এলিমেন্টস্কে data-role=”controlgroup” এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type=”horizontal|vertical” এট্রিবিউট দ্বারা নির্দেশ করা হয় এলিমেন্টস গুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।

       

       

      স্লাইডার(Slider) এলিমেন্টসঃ

      type=”range” এর সাথে ইনপুট হয় ।

       

      ডাটা এট্রিবিউটঃ  data-highlight

      ভেলুঃ  true | false

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

       

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

      ভেলুঃ  true | false

      বর্ণনাঃ  স্লাইডারের সাইজ কেমন হবে তা নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-role

      ভেলুঃ  none

      বর্ণনাঃ  জেকোয়েরি যাতে স্লাইডার কে বাটনের স্টাইল দিতে না পারে এটা তা নিয়ন্ত্রণ করে ।

       

      ডাটা এট্রিবিউটঃ  data-theme

      ভেলুঃ  letter (a-z)

      বর্ণনাঃ  স্লাইডার কনট্রোলের থিমের রঙ নির্দেশ করে ।

       

      ডাটা এট্রিবিউটঃ  data-track-theme

      ভেলুঃ     letter (a-z)

      বর্ণনাঃ  স্লাইডারের থিমের রঙ নির্দেশ করে ।

       

       

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

       

       

       

       

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

Feb 11

পিএইচপি এক্সএমএল এক্সপ্যাট পার্সার (PHP XML Expat Parser in Bangla)

পিএইচপি’র বিল্ট-ইন এক্সএমএল এক্সপ্যাট পার্সার (XML Expat Parser) এক্সএমএল ডকুমেন্টকে পিএইচপি’তে প্রসেস করা সম্ভবপর করেছে।

এক্সএমএল এক্সপ্যাট পার্সার

এক্সপ্যাট পার্সারটি হলো ইভেন্ট-বেজড পার্সার অর্থাৎ এটি ইভেন্টের উপর নির্ভর করে একজিকিউট হয়। নিচের এক্সএমএল এর অংশটিকে দেখুনঃ

<from>Jani</from>

 

একটি ইভেন্ট-বেজড পার্সার উপরের এক্সএমএল’টিকে তিনটি ইভেন্টের সিরিজ হিসেবে রিপোর্ট করেঃ

  • স্টার্ট এলিমেন্ট হলোঃ from
  • CDATA সেকশানকে শুরু করে যার ভ্যালুঃ Jani
  • ক্লোজ এলিমেন্টঃ from

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

এক্সমএমএল ফাইল

নিচের উদাহরণে “note.xml” এক্সএমএল ফাইলটি ব্যবহৃত হবেঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

 

এক্সএমএল এক্সপ্যাট পার্সার’কে শুরু করা

আমরা চাই এক্সএমএল এক্সপ্যাট পার্সার’টিকে পিএইচপি’তে শুরু করতে, ভিন্ন ভিন্ন এক্সএমএল ইভেন্টের জন্য কিছু হ্যান্ডলার ডিফাইন করতে, এবং তারপর এক্সএমএল ফাইলটিকে পার্স করতে।

<?php
// Initialize the XML parser
$parser=xml_parser_create();

// Function to use at the start of an element
function start($parser,$element_name,$element_attrs) {
  switch($element_name) {
    case "NOTE":
    echo "-- Note --<br>";
    break;
    case "TO":
    echo "To: ";
    break;
    case "FROM":
    echo "From: ";
    break;
    case "HEADING":
    echo "Heading: ";
    break;
    case "BODY":
    echo "Message: ";
  }
}

// Function to use at the end of an element
function stop($parser,$element_name) {
  echo "<br>";
}

// Function to use when finding character data
function char($parser,$data) {
  echo $data;
}

// Specify element handler
xml_set_element_handler($parser,"start","stop");

// Specify data handler
xml_set_character_data_handler($parser,"char");

// Open XML file
$fp=fopen("note.xml","r");

// Read data
while ($data=fread($fp,4096)) {
  xml_parse($parser,$data,feof($fp)) or
  die (sprintf("XML Error: %s at line %d",
  xml_error_string(xml_get_error_code($parser)),
  xml_get_current_line_number($parser)));
}

// Free the XML parser
xml_parser_free($parser);
?>

 

উপরের উদাহরণটির ব্যাখ্যা

  1. xml_parser_create() ফাংশনের মাধ্যমে এক্সএমএল পার্সারটিকে শুরু করা হয়
  2. ভিন্ন ভিন্ন ইভেন্ট হ্যান্ডলারের সাথে ব্যবহারের জন্য ফাংশন তৈরি করা হয়
  3. যখন পার্সারটি ওপেনিং ও ক্লোজিং ট্যাগের সম্মুক্ষীণ হবে তখন কোন ফাংশনটি একজিকিউট হবে তা ঠিক করতে xml_set_element_handler() ফাংশনটিকে যোগ করা হয়।
  4. যখন পার্সারটি ক্যারেক্টার ডাটার সম্মুক্ষীণ হবে তখন কোন ফাংশনটি একজিকিউট হবে তা ঠিক করতে xml_set_character_data_handler() ফাংশনটিকে যোগ করা হয়।
  5. xml_parse() function ফাংশনের মাধ্যমে “note.xml” ফাইলটিকে পার্স করা হয়।
  6. কোন এরর বা সমস্যার ক্ষেত্রে, একটি এক্সএমএল এরর’কে টেক্সট ডেসক্রিপশানে কনভার্ট করতে xml_error_string() ফাংশনটিকে যোগ করা হয়।
  7. xml_parser_create() ফাংশনের সাথে নির্ধারণ করা মেমোরিকে মুক্ত করতে xml_parser_free() ফাংশনকে কল করা হয়।

 

Feb 10

পিএইচপি – এক্সএমএল DOM পার্সার (PHP XML DOM Parser in Bangla)

শেখ মাহফুজুর রহমান

পিএইচপি’র বিল্ট-ইন ডম (DOM) পার্সারের জন্য পিএইচপি’তে এক্সএমএল ডকুমেন্ট প্রসেস করা সম্ভব হয়েছে।

 

এক্সএমএল DOM পার্সার

DOM পার্সার একটি ট্রি-বেজড (DOM ট্রি) পার্সার। নিচের এক্সএমএল ডকুমেন্ট ফ্র্যাকশনটির দিকে তাকানঃ

<?xml version="1.0" encoding="UTF-8"?>
<from>Jani</from>

 

DOM উপরের এক্সএমএল’টিকে একটি ট্রি স্ট্রাকচার হিসেবে দেখেঃ

লেভেল ১: এক্সএমএল ডকুমেন্ট

লেভেল ২: রুট এলিমেন্টঃ

লেভেল ৩: টেক্সট এলিমেন্টঃ “Jani”

 

ইন্সটলেশন

DOM পার্সার ফাংশনগুলো পিএইচপি কোরের অংশ। এই ফাংশনগুলোকে ব্যবহার করার জন্য কোন ইন্সটলেশনের দরকার পড়েনা।

একটি এক্সএমএল ফাইল

নিচের এক্সএমএল ফাইলটি আমাদের উদাহরণে ব্যবহৃত হবেঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

 

লোড এবং এক্সএমএল আউটপুট

আমরা চাই এক্সএমএল পার্সারটিকে চালু করতে, এক্সএমএল’টিকে লোড করতে এবং এটা থেকে আউটপুট পেতে।

উদাহরণঃ

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");

print $xmlDoc->saveXML();
?>

 

উপরের কোডটির আউটপুট হবেঃ

Tove Jani Reminder Don’t forget me this weekend!

 

আপনি যদি ব্রাউজার উইন্ডোতে “View source” সিলেক্ট করেন তাহলে নিচের এইচটিএমএলটি দেখতে পাবেনঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

উপরের উদাহরণটি একটি DOMDocument-Object তৈরি করে এবং “note.xml” থেকে এক্সএমএল’টিকে এর মধ্যে লোড করে। তারপর saveXML() ফাংশনটি ভিতরের এক্সএমএল ডকুমেন্টটিকে একটি স্ট্রিং-এ রাখে, ফলে আমরা এটিকে আউটপুট হিসেবে পেতে পারি।

 

এক্সএমএল এর মধ্যে দিয়ে লুপিং

আমরা চাই এক্সএমএল পার্সারটিকে চালু করতে, এক্সএমএল’টিকে লোড করতে এবং এলিমেন্টের সবগুলো এলিমেন্টের মধ্যে লুপ তৈরি করতেঃ

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");

$x = $xmlDoc->documentElement;
foreach ($x->childNodes AS $item) {
  print $item->nodeName . " = " . $item->nodeValue . "<br>";
}
?>

 

উপরের কোডটির আউটপুট হবেঃ

#text =
to = Tove
#text =
from = Jani
#text =
heading = Reminder
#text =
body = Don’t forget me this weekend!
#text =

 

উপরের উদাহরণটিতে আপনি দেখতে পাবেন যে প্রত্যেকটি এলিমেন্টের মধ্যে খালি (empty) টেক্সট নোড রয়েছে। যখন এক্সএমএল তৈরি হয় তখন নোডগুলোর মধ্যে প্রায়ই হোয়াইট-স্পেস থাকে। এক্সএমএল DOM পার্সার এগুলোকে সাধারণত এলিমেন্ট হিসেবে বিবেচনা করে এবং আপনি যদি এগুলোর সম্পর্কে জ্ঞাত না হন তাহলে মাঝে মাঝে এগুলো সমস্যার সৃষ্টি করে।

 

Feb 09

অ্যাজাক্স পরিচিতি (AJAX Introduction)

শেখ মাহফুজুর রহমান

একটি ওয়েব পেজ পুরোটা রিলোড না করে পেজের একটি অংশকে আপডেট করার প্রক্রিয়াই হলো অ্যাজাক্স।

 

অ্যাজাক্স কি?

AJAX এর মানে হলো Asynchronous JavaScript and XML । অ্যাজাক্স হলো ফাস্ট এবং ডাইনামিক ওয়েব পেজ তৈরির একটি কৌশল। অ্যাজাক্স ওয়েব পেজকে অ্যাসিংক্রোনাসলি (asynchronously) সার্ভারের সাথে সামান্য পরিমাণ ডাটা বিনিময় (–) করেই আপডেট করতে সাহাজ্য করে। এর মানে হলো একটি পেজকে পুরোপুরি লোড না করে পেজের একটি অংশকে আপডেট করা সম্ভব। ক্লাসিক ওয়েব পেজগুলোতে, যেগুলো অ্যাজাক্স ব্যবহার করেনা, কন্টেন্ট পরিবর্তন করার পর পরিবর্তিত পেজকে পেতে চাইলে অবশ্যই তা রিলোড করতে হবে।
অ্যাজাক্স ব্যবহারকারী অ্যাপ্লিকেশনের উদাহরন হলোঃ গুগল ম্যাপ, জিমেইল, ইউটিউব এবং ফেসবুক ট্যাব।

কিভাবে অ্যাজাক্স কাজ করে

১)ব্রাউজারঃ
একটি ইভেন্ট তৈরি হয়…
একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়
HttpRequest পাঠানো হয়

—->> ইন্টারনেট —->>

২) সার্ভার
HttpRequest কে প্রসেস করে
একটি রেসপন্স তৈরি করে এবং সেই ডাটা ব্রাউজারে প্রেরণ করে

—->> ইন্টারনেট —->>

৩) ব্রাউজার
ফেরত আসা ডাটাগুলো প্রসেস করে
পেজের কন্টেন্ট আপডেট করে

 

ইন্টারনেট স্ট্যান্ডার্ড নির্ভর অ্যাজাক্স

ইন্টারনেট স্ট্যান্ডার্ডের উপর নির্ভর করে অ্যাজাক্স কাজ করে এবং নিচের কম্বিনেশনগুলো ব্যবহার করেঃ

  • XMLHttpRequest অবজেক্ট (সার্ভারের সাথে অ্যাসিংক্রোনাসলি ডাটা বিনিময় করার জন্য)
  • জাভাস্ক্রিপ্ট/DOM (তথ্যকে দেখানো/ইন্টারেক্ট করতে)
  • সিএসএস (ডাটাকে স্টাইল করতে)
  • এক্সএমএল (বিনিময়কৃত ডাটা ফরমেট হিএবে ব্যবহৃত হয়)

নোটঃ অ্যাজাক্স অ্যপ্লিকেশনগুলো ব্রাউজার এবং প্লাটফর্ম ইন্ডিপেন্ডেন্ট হয়ে থাকে অর্থাৎ যেকোন প্লাটফর্মে অ্যাজাক্স কার্যকর।

 

গুগল সাজেস্ট

অ্যাজাক্স ২০০৫ সালে Google Suggest অ্যাপ্লিকেশনে ব্যবহার হওয়ার মাধ্যমে গুগলের হাত ধরে জনপ্রিয় হয়েছিল।

Google Suggest ডাইনামিক ওয়েব ইন্টারফেস তৈরি করতে অ্যাজাক্স ব্যবহার করছেঃ যখন আপনি গুগলের সার্চ বক্সে কিছু টাইপ করেন, একটি জাভাস্ক্রিপ্ট অক্ষরগুলোকে সার্ভারে পাঠায় এবং সার্ভার একটি সাজেশন লিস্ট পাঠিয়ে দেয় যা আপনি দেখতে পান।

আজকেই অ্যাজাক্স ব্যবহার শুরু করুন

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

Feb 09

সিএসএস ৩ রেস্পনসিভ ওয়েব ডিজাইন (CSS Responsive Web Design)

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

 

রেস্পনসিভ ওয়েব ডিজাইন কি?

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

 

নিজের জন্য রেস্পনসিভ ডিজাইন তৈরি করা

সহজে সিএসএস দ্বারা নিজে নিজেই রেস্পনসিভ ডিজাইন করার একটি পদ্ধতি

 

বুটস্ট্র্যাপ করার পদ্ধতি

রেস্পনসিভ ডিজাইন করার অন্য একটি পদ্ধতি হল, পূর্বের বিদ্যমান কোন সিএসএস ফ্রেমওয়ার্ক ব্যবহার করা। বুটস্ট্র্যাপ হল HTML, CSS এবং JavaScript দ্বারা তৈরি রেস্পনসিভ ওয়েব ডিজাইনের জন্য জনপ্রিয় একটি ফ্রেমওয়ার্ক। বুটস্ট্র্যাপ আপনার সাইটকে এমন করে তৈরি করতে সাহায্য করবে যেন তা যেকোনো সাইজ বা স্ক্রিনের ল্যাপটপ, ট্যাবলেট বা ফোনে দেখতে একইরকম দেখায়।

 

desktop

Desktop

tablet

Tablet

 

 

phone

Phone

Feb 09

সিএসএস ৩ ইউজার ইন্টারফেস (CSS3 User Interface)

Sheikh Mahfuzur Rahman

 

সিএসএস-থ্রি ইউজার ইন্টারফেস

সিএসএস-থ্রি এর কিছু নতুন ইউজার ইন্টারফেস ফিচার হলো এলিমেন্ট রিসাইজিং, বক্স রিসাইজিং এবং আউটলাইনিং। এই অধ্যায়ে নিচের ইউজার ইন্টারফেস প্রপার্টিগুলো সম্পর্কে জানতে পারবেনঃ

  • resize
  • box-sizing
  • outline-offset

 

ব্রাউজার সাপোর্ট

নিচের তালিকায় প্রথম যে ব্রাউজার ভার্শনগুলো ইউজার ইন্টারফেস প্রপার্টিকে পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হলো। -webkit-, -moz-, অথবা -o- এর সাথে যুক্ত ভার্শন নম্বরগুলো প্রিফিক্সসহ যেসব ভার্শন কাজ করে তার তালিকা প্রকাশ করে।

Property chrome edge ie firefox safari opera
resize

4.0

Not supported

Not supported

5.0
4.0 -moz-

4.0

15.0
outline-offset

4.0

Not supported

Not supported

5.0
4.0 -moz-

4.0

9.5

 

সিএসএস-থ্রি রিসাইজিং

সিএসএস-থ্রি’তে resize প্রপার্টি ইউজারদের দ্বারা কোন এলিমেন্ট রিসাইজ করা যাবে কি যাবেনা তার নির্ধারণ করে। লক্ষ্যনীয়ঃ নিচের div এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যায় (Chrome, Firefox, Safari and Opera 15+)।

রিসাইজের জন্য সিএসএস কোডঃ উদাহরণ
এর ফলে একটি <div> এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যাবেঃ

div {
    resize: horizontal;
    overflow: auto;
}

 

সিএসএস-থ্রি বক্স সাইজিং

box-sizing প্রপার্টি ব্রাউজারকে কোন সাইজিং প্রপার্টি (width এবং height) ব্যবহার করা যাবে তা বলে দেয়। সেগুলো border-box নাকি শুধু content-box কে (এটিই সাধারণত উইড্‌থ ও হাইট প্রপার্টির ডিফল্ট ভ্যালু হিসেবে থাকে) এর ভিতরে অন্তর্ভূক্ত করবে তা ঠিক করে দেয়। উদাহরণস্বরূপ, আপনি যদি দু’টি বর্ডার বক্সকে পাশাপাশি রাখতে চান তাহলে “border-box” এ বক্স-সাইজিং সেটিং করে ঠিক করতে পারবেন। এটি ব্রাউজারকে নির্দিষ্ট প্রস্থ ও উচ্চতা দ্বারা বক্সটির আকার ঠিক করতে বলে এবং বর্ডার ও পেডিংকে বক্সের ভিতরে স্থাপন করে।

উদাহরণ
দুটি বর্ডার বক্সকে পাশাপাশি স্থাপন করেঃ

div {
     -moz-box-sizing: border-box; /* Firefox */
     box-sizing: border-box;
     width: 50%;
     float: left;
 }

 

সিএসএস-থ্রি আউটলাইন অফসেট

outline-offset প্রপার্টি একটি আউটলাইনের বাইরে অবস্থান করে এবং এটিকে বর্ডারের এজের বাইরে টেনে নিয়ে যায়।

আউটলাইন এর সাথে বর্ডার এর দুই ধরণের পার্থক্য রয়েছেঃ

  • আউটলাইন জায়গা দখল করেনা।
  • আউটলাইন চারকোনাকৃতির নাও হতে পারে।

নিচের div টির বর্ডার এজের বাইরে ১৫ পিক্সেল আউটলাইন রয়েছে
এর জন্য যে সিএসএস কোড প্রয়োজন তা নিম্নরূপ।

উদাহরণ
বর্ডার এজের বাইরে ১৫ পিক্সেল আউটলাইন নির্ধারণ করেঃ

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

 

সিএসএস-থ্রি ইউজার ইন্টারফেস প্রপার্টি

নিচে সবগুলো ইউজার ইন্টারফেস প্রপার্টির তালিকা দেয়া হলোঃ

appearance – একটি এলিমেন্টকে স্ট্যান্ডার্ড ইউজার ইন্টারফেস এলিমেন্ট হিসেবে দেখাতে ব্যবহৃত হয়
box-sizing – একটি নির্দিষ্ট এলিমেন্টকে কোন এরিয়ায় একটি নির্দিষ্ট পদ্ধতিতে অবস্থান করতে বলে দেয়
icon – পেজের অথর বা লেখককে আইকনিকভাবে একটি এলিমেন্ট স্টাইল করার সুযোগ করে দেয়
nav-down – যখন arrow-down নেভিগেশন কি ব্যবহার করা হয় তখন কোন দিকে নেভিগেট করা হবে তা নির্ধারন করে দেয়
nav-index – একটি এলিমেন্টের টেবিং অর্ডার ঠিক করে দেয়
nav-left – যখন arrow-left নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয়
nav-right – যখন arrow-right নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয়
nav-up – যখন arrow-up নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয়
outline-offset – একটি আউটলাইনের অফসেট ঠিক করে এবং এটিকে বর্ডার এজের বাইরে টেনে নিয়ে যায়
resize – কোন এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যাবে কি যাবেনা তা নির্ধারণ করে

 

Feb 09

সি এস এস মাল্টিপল কলাম (CSS3 Multiple Columns)

CSS3 Multiple Columns অর্থাৎ css3 তে একাধিক কলাম তৈরি করা

css3 ব্যবহার করে আপনি টেক্সটগুলোকে প্রয়োজনমত সাজানোর জন্য একাধিক কলাম তৈরি করতে পারবেন।
এই অধ্যায়ে আপনি নিম্নোক্ত কলাম প্রপার্টি গুলো সম্পর্কে জানবেন-

  • column-count
  • column-gap
  • Column-rule

 

ব্রাউজার সাপোর্ট (Browser Support)

এই প্রপার্টিটি সকল নতুন ভার্সন এর ব্রাউজারগুলোতে সাপোর্ট করে। IE তে 10.0, Google Chrome 4.0 -webkit-, mozilla 2.0 -moz-, Safari 3.1 -webkit-, opera 15.0 -webkit-11.1
এখানে -webkit- এবং -moz- ব্যবহার করে ব্রাউজারগুলোর প্রথম ভার্সন বুঝানো হয়েছে যা এই prefix গুলো সাপোর্ট করে।

Property chrome ie firefox safari opera
column-count

4.0 -webkit-

12.0

10.0

2.0 -moz-

3.1 -webkit-

15.0 -webkit-
11.1
column-gap

4.0 -webkit-

12.0

10.0

2.0 -moz-

3.1 -webkit-

15.0 -webkit-
11.1
column-rule

4.0 -webkit-

12.0

10.0

2.0 -moz-

3.1 -webkit-

15.0 -webkit-
11.1
column-rule-color

4.0 -webkit-

12.0

10.0

2.0 -moz-

3.1 -webkit-

15.0 -webkit
11.1
column-rule-style

4.0 -webkit-

12.0

10.0

2.0 -moz-

3.1 -webkit-

15.0 -webkit
11.1
column-rule-width

4.0 -webkit-

12.0

10.0

2.0 -moz-

3.1 -webkit-

15.0 -webkit
11.1
column-width

4.0 -webkit-

12.0

10.0

2.0 -moz-

3.1 -webkit-

15.0 -webkit
11.1

 

CSS3 ব্যবহার করে একাধিক কলাম তৈরি

column-count প্রপার্টি দ্বারা কয়টি কলাম হবে তা বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

উপরের এই css টুকু লিখার ফলে আপনার div এর মধ্যে লিখা টেক্সটগুলো তিনটি কলামে বিভক্ত হবে।

 

CSS3 দিয়ে কলামগুলোর মাঝে কতখানি ফাঁকা থাকবে তাও বলে দেয়া যায়।

column-gap প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি জায়গা ফাঁকা থাকবে তা বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

 

CSS3 কলামের নিয়ম (CSS3 column rules)

column-rule প্রপার্টি দ্বারা কলামের width, style এবং color এই তিনটি বিষয় বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

 

CSS3 এর একাধিক কলামের কিছু প্রপার্টি

column-count এই প্রপার্টি দ্বারা টেক্সটগুলো কয়টি কলামে ভাগ হবে তা বলা হয়।
column-fill এই প্রপার্টি দ্বারা কলামগুলো টেক্সট দিয়ে পুরন করার নির্দেশ দেয়া হয়
column-gap এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি ফাঁক থাকবে তা বলা হয়।
column-rule এই প্রপার্টি দ্বারা কলামগুলোর সব নিয়ম নির্ধারণ করা হয়।
column-rule-color এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কোন বর্ডার থাকলে তার কালার কি হবে তা বলা হয়।
column-rule-style এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডার কেমন হবে তা বলা হয়।
column-rule-width এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডারের উইদথ কতখানি হবে তা বলা হয়।
columns এই প্রপার্টিটি column-width এবং column-count দুইটি প্রপার্টির কাজ একাই করতে পারে।