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 দুইটি প্রপার্টির কাজ একাই করতে পারে।

 

 

Feb 09

সিএসএস ৩ অ্যানিমেশনস (CSS3 Animations)

সুদীপ্ত সাহা

 

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

 

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

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

Property chrome edge ie firefox safari opera
@keyframes

43.0
4.0 -webkit-

12.0

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

30.0
15.0 -webkit-
12.0 -o-
animation

43.0
4.0 -webkit-

12.0

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

30.0
15.0 -webkit-
12.0 -o-

 

সিএসএস3 @keyframes এর রুল

যেখানে অ্যানিমেশন তৈরি হয় সেখানে @keyframes এর রুল প্রবর্তিত হয়।

@keyframes এর ভেতরে কোন সিএসএস স্টাইলকে নির্দিষ্ট করে দিলে অ্যানিমেশনটি বর্তমান স্টাইল থেকে ধীরে ধীরে নতুন স্টাইলে পরিবর্তন হবে।

সিএসএস3 অ্যানিমেশন

যখন @keyframes রুলের ভেতরে কোন অ্যানিমেশন তৈরি হবে তখন আপনাকে অবশ্যই সিলেক্টর ঠিক করে দিতে হবে, তা না হলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না।
অ্যানিমেশনের সিলেক্টর নির্দিষ্ট করে দেয়ার জন্য অন্তত দুইটি প্রপার্টি ব্যবহার করতে হয়ঃ
অ্যানিমেশনের নাম -webkit-animation: myfirst, এবং অ্যানিমেশনের ব্যাপ্তিকাল

উদাহরনঃ
কোন -webkit-animation এর মধ্যে “myfirst” নামের অ্যানিমেশন তৈরি করা। অ্যানিমেশনের ব্যাপ্তিকালঃ ৫ সেকেন্ড

div {
     -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
     animation: myfirst 5s;
 }
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
     }
/* Standard syntax */
@keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
 }

 

ইঙ্গিতঃ যদি ব্যাপ্তিকাল নির্দিষ্ট করা না হয় তাহলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না, কারন ডিফল্ট ভ্যালু ০ ধরে নেয়া হবে।

 

সিএসএস3 অ্যানিমেশন কি?

অ্যানিমেশন হল কোন ইলিমেন্টকে ধীরে ধীরে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করার পদ্ধতি। আপনার যত প্রপার্টি ইচ্ছা এবং যতবার ইচ্ছা আপনি তা পরিবর্তন করতে পারবেন। পরিবর্তন কখন হবে তা আপনি % আকারে নির্দিষ্ট করে দিতে পারবেন, এছাড়াও আপনি “from” এবং “to” কীওয়ার্ড ব্যবহার করতে পারবেন(যেটা ০% এবং ১০০% এর মধ্যবর্তী কিছুকে বুঝাবে)

উদাহরনঃ
২৫% এবং ৫০% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }
/* Standard syntax */
      @keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }

 

 

উদাহরনঃ
২৫%, ৫০% এবং ৭৫% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }
/* Standard syntax */
 @keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }

 

 

অ্যানিমেশনের আরও উদাহরন

নিচের অ্যানিমেশনটিতে অ্যানিমেশনের সাতটি প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
 /* Chrome, Safari, Opera */
 -webkit-animation-name: myfirst;
 -webkit-animation-duration: 5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-play-state: running;
 /* Standard syntax */
 animation-name: myfirst;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
 }

 

 

উপরের উদাহরণের মতোই আরেকটি অ্যানিমেশন ইফেক্ট (animation-play-state প্রপার্টি বাদে)। এখানে কিছু শর্ট-কার্ট অ্যানিমেশন প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
     -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
     animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
 }

সিএসএস3 অ্যানিমেশন প্রপার্টি

নিচের টেবিলে @keyframes রুল এবং সকল অ্যানিমেশন প্রপার্টি লিস্ট করা হয়েছেঃ

প্রপার্টি

বর্ণনা
@keyframes অ্যানিমেশনকে নির্দিষ্ট করে ।
animation animation-play-state এবং animation-fill-mode প্রপার্টি বাদে সকল প্রপার্টিকে একসাথে ব্যাবহার করার শর্টকার্ট পদ্ধতি ।
animation-delay অ্যানিমেশন কখন শুরু হবে তা নির্দেশ করে ।
animation-direction অ্যানিমেশন অন্য কোন সাইকেলে পুনরায় শুরু হবে কিনা তা নির্দেশ করে ।
animation-duration একটি অ্যানিমেশন সম্পূর্ণ হতে কত সেকেন্ড বা মিলিসেকেন্ড লাগবে তা নির্দেশ করে ।
animation-fill-mode অ্যানিমেশন যখন প্লে হবে না তখন ইলিমেন্টের স্টাইল কেমন হবে তা নির্দেশ করে ।
animation-iteration-count অ্যানিমেশন কতবার প্লে হবে তা নির্দেশ করে 3
animation-name অ্যানিমেশনের নাম নির্দেশ করে 3।
animation-play-state অ্যানিমেশন প্লে হবে নাকি পস অবস্থায় থাকবে তা নির্দেশ করে 3
animation-timing-function অ্যানিমেশনের স্পিড নির্দেশ করে ।

 

Feb 09

সিএসএস৩ ট্রানজিশানস (CSS3 Transitions)

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

 

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

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

Property chrome edge ie firefox safari opera
transition

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-
transition-delay

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-
transition-duration

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-
transition-property

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-
transition-timing-function

26.0
4.0 -webkit-

12.0

10.0

16.0
4.0 -moz-

6.1
3.1 -webkit-

12.1
10.5 -o-

 

সিএসএস ট্রানজিশনস কি?

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

যে সিএসএস প্রপার্টিতে আপনি ইফেক্ট যোগ করতে চান
ইফেক্ট এর ডিউরেশন অর্থাৎ সেটি কত সময় ধরে অ্যাক্টিভ থাকবে

উদাহরণঃ width প্রপার্টিতে একটি ট্রানজিশান যোগ করা যাক, যার ব্যাপ্তি হবে ২ সেকেন্ডঃ

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

লক্ষ্যণীয়ঃ যদি সময় সীমা নির্দিষ্ট করে দেয়া না হয়, ট্রানজিশানটির ইফেক্ট বুঝা যাবেনা, কারন ট্রানজিশনের ডিফল্ট ব্যাপ্তি বা সময়সীমা হলো শূন্য (০) সেকেন্ড।

সিএসএস প্রপার্টিটি তার ভ্যালু পরিবর্তন করলেই ট্রানজিশান ইফেক্ট কাজ করা শুরু করে। সাধারণত একটি সিএসএস প্রপার্টি তার ভ্যালু পরিবর্তন করে যখন একজন ইউজার সেই প্রপার্টির উপর মাউস নিয়ে যান।

উদাহরণঃ

এলিমেন্টে হোভার যোগ করা যাকঃ

div:hover {
    width: 300px;
}

লক্ষ্যনীয়ঃ যখন মাউসের কার্সর এলিমেন্টটির উপর থেকে সরিয়ে নেয়া হয় তখন সেটি তার পূর্বের অবস্থায় ফিরে যায়।

 

একসাথে অনেকগুলো ট্রানজিশান যোগ করা

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

উদাহরণঃ width, height, এবং transformation এর সাথে ট্রানজিশান যোগ করা যাকঃ

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

 

ট্রানজিশানের আরও কিছু উদাহরণ

নিচের উদাহরণটিতে চারটি ট্রানজিশান প্রপার্টিকেই দেখানো হয়েছেঃ

div {
     /* For Safari 3.1 to 6.0 */
     -webkit-transition-property: width;
     -webkit-transition-duration: 1s;
     -webkit-transition-timing-function: linear;
     -webkit-transition-delay: 2s;
     /* Standard syntax */
     transition-property: width;
     transition-duration: 1s;
     transition-timing-function: linear;
     transition-delay: 2s;
 }

 

নিচের উদাহরণে উপরের ট্রানজিশানের মতো একই ধরণের ইফেক্ট তবে এখানে ট্রানজিশান প্রপার্টিগুলোকে শর্টহ্যান্ড বা সংক্ষিপ্ত করে দেখানো হয়েছেঃ

div {
     -webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
     transition: width 1s linear 2s;
 }

 

 

সিএসএস ট্রানজিশান প্রপার্টিসমুহ

নিচে টেবলে সবগুলো ট্রানজিশান প্রপার্টিকে দেখানো হয়েছেঃ

transition -চারটি ট্রানজিশান প্রপার্টিকে একটিমাত্র (সিঙ্গেল) প্রপার্টি হিসেবে দেখাতে
ব্যবহার করা হয়।

  • transition-delay -কখন ট্রানজিশান ইফেক্ট শুরু হবে তা বলে দেয়
  • transition-duration -ট্রানজিশানটি কত সেকেন্ড বা মিলিসেকেন্ডে তার ইফেক্ট সম্পূর্ণ করবে তা নির্ধারণ করে
  • transition-property -কোন সিএসএস প্রপার্টির জন্য ইফেক্ট কাজ করবে তা নাম ঠিক করে দেয়
  • transition-timing-function -ট্রানজিশান ইফেক্টের গতি কি রকম হবে তা নির্দিষ্ট করে দেয়।