Mar 30

ASP.NET টিউটোরিয়াল :[পর্বঃ ৬]:: ASP.NET Web Forms দিয়ে একসাথে ফর্মের অনেক কোডের নিয়ন্ত্রণ . ASP.NET Web Forms – Maintaining the ViewState

ASP.NET টিউটোরিয়াল :[পর্বঃ ৬]:: ASP.NET Web Forms দিয়ে একসাথে ফর্মের অনেক কোডের নিয়ন্ত্রণ
লেখকঃ মোস্তাফিজুর ফিরোজ ।

গত পর্বে আমরা শিখেছিলাম ASP.NET Web Forms দিয়ে এইচটিএমএল ফর্ম ট্যাগের ব্যবহার । আজ আমরা শিখবো একসাথে ফর্মের অনেক কোডের নিয়ন্ত্রণ । এজন্য আগে আপনাকে ViewState এর নিয়ন্ত্রণ সম্পর্কে জানতে হবে ।

ViewState এর নিয়ন্ত্রণ
যখন একটি ফর্ম classic ASP আকারে নিবেদন করা হয় তখন ফর্মের সকল মান চলে যায় । ধরুন আপনি একটি ফর্মের সাথে অনেক তথ্য যোগ করে পাঠালেন আর এরর রিপোর্ট আসলো । তাহলে বুঝতেই পারছেন আপনার কেমন মেজাজ গরম হবে । আপনার মেজাজ গরম না হলেও আমার কিন্তু খুব মেজাজ গরম হবে । তাই আবার ব্যাক করে এসে দেখলেন আবার সব ফর্ম পূরণ করা লাগছে । তাহলে বুঝতে হবে এই সাইট আপনার ViewState পুরাপুরি নিয়ন্ত্রণ করতে পারেনি ।

আবার অনেক সাইটে দেখবেন এমন এরর রিপোর্ট দেখালেও ব্যাক করলে ফর্মে আপনার পূরণ করা সকল তথ্য দেখতে পারবেন । এটা কে করলো? তাইতো । খুব খুশি তাই নাহ? এটা ঐ পেজের ASP .NET ধারণ করে রেখেছে । তার মানে ঐ পেজের ViewState পুরাপুরি নিয়ন্ত্রণ করতে সক্ষম হয়েছে । ঐ পেজে একটা <form runat=”server”> ট্যাগ হিডেন করা আছে যা আপনার সকল তথ্য সংরক্ষণ করে রেখেছে । তাহলে আসুন দেখি ঐ পেজের সোর্স কোড কেমন হয়ঃ

<form name=”_ctl0″ method=”post” action=”page.aspx” id=”_ctl0″>
<input type=”hidden” name=”__VIEWSTATE”
value=”dDwtNTI0ODU5MDE1Ozs+ZBCF2ryjMpeVgUrY2eTj79HNl4Q=” />

…..some code

</form>

ViewState এর নিয়ন্ত্রণ হলো ASP.NET Web Forms এর ডিফল্ট সেটিংস । আপনি যদি এটাকে নিয়ন্ত্রণ না করতে চান তাহলে .aspx পেজের উপরে একটি <%@ Page EnableViewState=”false” %> অথবা EnableViewState=”false” এই ট্যাগ যোগ করতে পারেন ।

তাহলে দেখেন পুরাতন পদ্ধতিতে কোডগুলো কেমন দেখায়ঃ

<html>
<body>

<form action=”demo_classicasp.aspx” method=”post”>
Your name: <input type=”text” name=”fname” size=”20″>
<input type=”submit” value=”Submit”>
</form>
<%
dim fname
fname=Request.Form(“fname”)
If fname<>”” Then
Response.Write(“Hello ” & fname & “!”)
End If
%>

</body>
</html>

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

তাহলে এইবার নতুন পদ্ধতিটা দেখে নেই যে কেমন হবে কোডটাঃ

<script runat=”server”>
Sub submit(sender As Object, e As EventArgs)
lbl1.Text=”Hello ” & txt1.Text & “!”
End Sub
</script>

<html>
<body>

<form runat=”server”>
Your name: <asp:TextBox id=”txt1″ runat=”server” />
<asp:Button OnClick=”submit” Text=”Submit” runat=”server” />
<p><asp:Label id=”lbl1″ runat=”server” /></p>
</form>

</body>
</html>

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

Mar 29

এইচটিএমএল ব্লক (HTML Block and Inline Elements)

এইচটি এম এল ব্লক (HTML Block Elements)

নাম-শরিফুল ইসলাম
Php Coder

 

উদাহরণঃ

<div style=”background-color:black; color:white; padding:20px;”>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

 

ফলাফলঃ

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

এইচটিএমএল এর ব্লক উপাদান এবং ইনলাইন উপাদান

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

Examples: <h1>, <p>, <ul>, <table>

ইনলাইন উপাদান গুলো কোন লাইন এর বিরতি ছারাই শুরু হয়

Examples: <b>, <td>, <a>, <img>

 

এইচটিএমএল DIV Element

<div> একটি ব্লক লেভেল উপাদান যা অন্য এইচটিএমএল উপাদান এর সাথে container হিসেবে ব্যবহার করা যায়। এই <div> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। কারন এটি ব্লক লেভেল উপাদান যা ব্রাউজার এ লাইন এর বিরতি হিসেবে প্রকাশ করে।

 

এইচটিএমএল <span> element

<span> একটি ইনলাইন উপাদান যা টেক্সট এর সাথে container হিসেবে ব্যবহার করা যায়। এই <span> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। <div> উপাদান এর মতন <span> অটোমেতিক ফরম্যাট নেই।

উদাহরণঃ

<h1>My <span style=”color:red”>Important</span>Heading</h1>

 

ফলাফলঃ

My ImportantHeading

 

এইচটিএমএল grouping ট্যাগ

<div>-ডকুমেন্ট কে ব্লক- লেভেল হিসেবে ডিফাইন করার জন্য

<span>- ডকুমেন্ট কে ইনলাইন হিসেবে ডিফাইন করার জন্য

 

Mar 29

jQuery stop() মেথড । jQuery Stop Animations

কোনো animation বা effect শেষ হবার পূর্বেই সেটাকে থামানোর ক্ষেত্রে jQuery stop() method ব্যবহার করা হয়।

Sliding, fading এবং custom animation সহ সকল jQuery effect ফাংশনের ক্ষেত্রে stop() method ব্যবহার করা হয়।

সিনট্যাক্স

$(selector).stop(stopAll,goToEnd);

stopAll parameter একটি optional parameter যা animation queue টি clear হয়েছে কি না তা নির্দেশ করে। এর Default মান হলো False, যা শুধুমাত্র active animation কে stop করে এবং সারির পরবর্তী animation গুলোকে চলতে দেয়।

goToEnd parameter একটি optional parameter যা current animation কে complete করবে কি না তা নির্দেশ করে। এর Default মান হলো False.

সুতরাং Default মান যখন অপরিবর্তিত থাকে তখন stop() method টি কোনো Selected element এর current animation কে চলতে বাধা প্রদান করে।

নিম্নোক্ত উদাহরণের সাহায্যে stop() method এর একটি ব্যবহার দেখানো হলো যেখানে কোনো parameter ব্যবহার করা হয় নি।

$("#stop").click(function(){
    $("#panel").stop();
});

ফলাফল : stop()

 

অনুবাদক: ফয়সাল রকি

Mar 29

জে- কুয়ারী ইফেক্ট – অ্যানিমেশন : jQuery Animations – The animate() Method

শউলি

 

Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি :

সিনট্যাক্স

$(selector).animate({params},speed,callback);

সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে হবে তার CSS property এর মধ্যে define করতে হবে।

অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য । “slow”, “fast”, অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়।

অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়।

একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো

$("button").click(function(){
    $("div").animate({left: '250px'});
});

ফলাফল : animate()

 

jQuery animate() method একাধিক Properties

এর মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

ফলাফল : একাধিক Properties

 

এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব?

উত্তর প্রায়, হ্যাঁ!

 

এখন আমরা দেখব কিভাবে animate() মেথড Relative Values ব্যবহার করে |

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

ফলাফল : Relative Values

 

পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায়

যেমন নিচের উধাহরণ দেখুন

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
});

ফলাফল : Pre-defined

 

এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায়

যেমন নিচের উধাহরণ দুটি লক্ষ করুন

উধাহরণ 1 .

আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
});

ফলাফল : Queue Functionality

 

উধাহরণ 2

এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

ফলাফল : ফন্ট সাইজ

 

Mar 29

জেকোয়েরি প্রোপার্টিজ বা জেকোয়েরি এর ধর্ম – jQuery Properties

জেকোয়েরি প্রোপার্টিজ বা জেকোয়েরি এর ধর্ম – jQuery Properties
লেখকঃ মোস্তাফিজুর ফিরোজ ।

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

জেকোয়েরি প্রোপার্টিজঃ context
বর্ণনাঃ এটা version 1.10 তে আর কাজ করে না । এটা jQuery() তে প্রসঙ্গত বেশি ভাল কাজ করে থাকে ।

জেকোয়েরি প্রোপার্টিজঃ jquery
বর্ণনাঃ জেকোয়েরি এর ভার্সন কত তা এটা থেকে বোঝা যায় ।

জেকোয়েরি প্রোপার্টিজঃ jQuery.fx.interval
বর্ণনাঃ অ্যানিমেশন এর পরিবর্তনের গতি মিলিসেকেন্ডে পরিবর্তন করে থাকে ।

জেকোয়েরি প্রোপার্টিজঃ jQuery.fx.off
বর্ণনাঃ সকল অ্যানিমেশনকে সচল এবং অচল করতে সাহায্য করে ।

জেকোয়েরি প্রোপার্টিজঃ jQuery.support
বর্ণনাঃ সকল প্রকার ব্রাউজারের ফিচার এবং বাগ ঠিক রেখে এর সকল ধর্ম প্রদর্শন করে থাকে । এটা শুধুমাত্র জেকোয়েরি এর অভ্যন্তরীণ কাজে সাহায্য করে ।

জেকোয়েরি প্রোপার্টিজঃ length
বর্ণনাঃ জেকোয়েরি এর ভিতর কতটি অবজেক্ট বা উপাদান আছে তার সংখ্যা প্রকাশ করে ।

তাহলে প্রত্যেকটি জেকোয়েরি প্রোপার্টিজ এর কাজ বুঝলেন তো? না বুঝতে পারলে কমেন্ট করতে ভুলবেন না । আমি আমার সাধ্যমত বুঝায় দিতে সর্বাত্মক চেষ্টা করবো ।

Mar 29

জে’কুয়েরি মোবাইল (jQuery Mobile) এর সাথে পরিচয় – jQuery Mobile Pages

জে’কুয়েরি মোবাইল (jQuery Mobile) এর সাথে পরিচয়
—————————————
যদিও জে’কুয়েরি মোবাইল প্রায় সকল মোবাইল ডিভাইসে কাজ করে তারপরেও ডেস্কটপ কম্পিউটারে কিছু সমস্যা হতে পারে (সীমিত CSS3 সাপোর্ট এর কারণে)।
ভালো ফলাফল পেতে এই টিউটরিয়ালের জন্য আমরা গুগল ক্রোম ব্রাউজার ব্যবহারের পরামর্শ দিচ্ছি।
নিচের উদাহরণে আমরা একটি আদর্শ jQuery Mobile পেজ তৈরী করেছি-
উদাহরণ:
<body>
<div data-role=”page”>

<div data-role=”header”>
<h1>আমার হোমপেজে স্বাগতম</h1>
</div>

<div data-role=”main” class=”ui-content”>
<p>আমি একজন শিক্ষানবিশ মোবাইল ডেভেলপার!</p>
</div>

<div data-role=”footer”>
<h1>এখানে বসবে footer টেক্সট</h1>
</div>

</div>
</body>

নিচে উদাহরণটির ব্যাখ্যা দেয়া হলো:
• The data-role=”page” হলো যে পেজটি ব্রাউজারে দেখানো হবে।
• The data-role=”header” পেজের উপরে একটি টুলবার তৈরী করে (যেটি সাধারণত টাইটেল কিংবা সার্চ বাটন তৈরীর কাজে ব্যবহার করা হয়)।
• The data-role=”main” পেজে কি content আছে তা তুলে ধরে যেমন লেখা, ছবি, বাটন, ফরম ইত্যাদি।
• The “ui-content” class অতিরিক্ত প্যাডিং এবং মারজিন পেজের content এর ভেতর যোগ করে। adds
• The data-role=”footer” পেজের শেষে একটি টুলবার তৈরী করে।
• এই কন্টেইনারগুলোর ভেতর আমরা যেকোন HTML element যেমন প্যারাগ্রাফ, ছবি, হেডিং, লিস্ট ইত্যাদি যোগ করতে পারি।
পরামর্শ: জে’ কুয়েরি মোবাইলে কাজ করার সময় ‌‌টাচ ফ্রেন্ডলি পরিবেশ এবং আকর্ষনীয় দৃশ্য তৈরী করার জন্য HTML5 data attribute ব্যবহার করা হয়।
জে’ কুয়েরি মোবাইলে পেজ যোগ করা:
যে’কুয়েরি মোবাইলে আপনি একটিমাত্র HTML ফাইলে একাধিক পেজ তৈরী করতে পারবেন। প্রতিটি পেজ একটি ইউনিক আইডি দ্বারা পৃথক করতে হবে এবং href attribute ব্যবহার করে তাদের মধ্যে সংযোগ স্থাপন করতে হবে:
উদাহরণ:
<div data-role=”page” id=”pageone”>
<div data-role=”main” class=”ui-content”>
<a href=”#pagetwo”>দ্বিতীয় পেজে যান</a>
</div>
</div>

<div data-role=”page” id=”pagetwo”>
<div data-role=”main” class=”ui-content”>
<a href=”#pageone”>প্রথম পেজে যান</a>
</div>
</div>

পরামর্শ: যত বেশি লিংক, ছবি, স্ক্রিপ্ট ইত্যাদি থাকবে পেজ লোড টাইম কিন্তু তত বাধাগ্রস্ত হবে। এক্ষেত্রে বাহ্যিক লিংক ব্যবহার করা ভালো।
<a href=”externalfile.html”>External পেজে যান</a>

________________________________________
পেজকে Dialog হিসেবে ব্যববার করা:
dialog box হচ্ছে এক ধরনের উইন্ডো যা তথ্য কিংবা ইনপুট গ্রহণের জন্য ব্যবহার করা হয়।
Example
<div data-role=”page” id=”pageone”>
<div data-role=”main” class=”ui-content”>
<a href=”#pagetwo”>দ্বিতীয় পেজে যান</a>
</div>
</div>

<div data-role=”page” data-dialog=”true” id=”pagetwo”>
<div data-role=”main” class=”ui-content”>
<a href=”#pageone”>প্রথম পেজে যান</a>
</div>
</div>

Translated By: Protap Chandra

Mar 29

jQuery – AJAX এর লোড মেথড । jQuery – AJAX load() Method

প্রতাব চন্দ্র

 

জে’কুয়েরি load() মেথড একটি সাধারণ অথচ একটি শক্তিশালী অ্যাজাক্স মেথড।

লোড মেথড ওয়েব সার্ভার থেকে ডাটা বা তথ্য লোড করে এবং নির্দেশ করে দেয়া এলিমেন্টের ভেতর এই ডাটা স্থাপন করে।

সিনট্যাক্স (Syntax)

$(selector).load(URL,data,callback);

 

যে URL বা লিংক আপনি লোড করতে চান উপরের সিনট্যাক্সের “URL” প্যারামিটার এ সেটি দিতে হবে।

এখানে data প্যারামিটারটি ঐচ্ছিক। এটি কোনো রিকোয়েস্ট এর সাথে পাঠানোর জন্য querystring key/value সেট নির্ধারণ করে দেয়।

এখানে উল্লেখিত callback প্যারামিটারটিও ঐচ্ছিক বা optional । load() মেথড সম্পূর্ণ হবার পর যে ফাংশন কার্যকর (execute) হবে এটি সেই ফাংশনের নাম।

এখানে একটি উদারহণ দেওয়া হলো:

<h2>জে’কুয়েরি এবং অ্যাজাক্স মজার জিনিস!</h2>
<p id=”p1″>একটি প্যারাগ্রাফের ভিতর এখানে কিছু টেক্সট যোগ করা হয়</p>

 

নিচের উদাহরণটি “demo_test.txt” এর কনটেন্ট নির্দেশিত একটি <div> এলিমেন্টের ভেতর লোড করবে:

$("#div1").load("demo_test.txt");

ফলাফল : demo_test.txt

 

উল্লেখ্য, URL প্যারামিটারে jQuery সিলেক্টরও যোগ করা সম্ভব।

নিচের উদাহরণে “demo_test.txt” থেকে id=”p1″ নির্দেশিত এলিমেন্টের কনটেন্ট নির্ধারিত <div> এলিমেন্টের ভেতর লোড করবে।

$("#div1").load("demo_test.txt #p1");

ফলাফল : URL প্যারামিটারে jQuery সিলেক্টরও যোগ

 

ঐচ্ছিক callback প্যারামিটার একটি callback ফাংশন নির্দেশ করে যখন load() মেথডটি সম্পূর্ণ হয়। callback ফাংশন একাধিক প্যারামিটার ধারণ করতে পারে। যেমন-

  • responseTxt –যদি call সফল হয় তবে প্রাপ্ত কনটেন্ট ধারণ করে।
  • statusTxt – contains the status of the call এর পরিস্থিতি বা status ধারণ করে
  • xhr – XMLHttpRequest অবজেক্ট ধারণ করে

load() মেথড সম্পূর্ণ হবার পর একটি অ্যালার্ট বক্স প্রদর্শন করার প্রক্রিয়া নিচের উদাহরণে দেখানো হলো। যদি মেথড সফল হয় তাহলে এটি “External content loaded successfully!” বার্তা প্রদর্শন করবে। আর যদি ব্যর্থ হয় তবে error মেসেজ দেখাবে।
উদাহরণ:

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

ফলাফল : অ্যালার্ট বক্স প্রদর্শন করার প্রক্রিয়া

 

Mar 29

চিকেন এন্ড ভেজিটেবল ফ্রাইডরাইস রেসিপি

চিকেন এন্ড ভেজিটেবল ফ্রাইডরাইস রেসিপি

১। চাল- ৫০০ গ্রাম

২। ভেজিটেবল- (বাধাকপি, গাজর, গ্রিন পিপার)

৩। মুরগীর মাংস- আধা কাপ

৪। পেয়াজ- ২টি(মাঝারি)

৫। লবণ

৬। তেল

৭। সয়াসস- ৩ চামচ

৮। টমেটো সস- ৩ চামচ

৯। চিনি।

প্রনালীঃ প্রথমে দুই রকমের সস ওচিনি মিশিয়ে একটি বাটিতে রাখতে হবে।

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

Mar 29

শিশুর জ্বর হলে করনীয়

শিশুর জ্বর হলে করনীয়

প্রথমেই দেখতে হবে শিশুর শরীরের তাপমাত্রা ১০০ ডিগ্রি ফারেনহাইট বা তার বেশি কিনা। যদি তাপমাত্রা ১০০ ডিগ্রি বা তার বেশি হয় তবে কুসুম গরম পানিতে ভেজা কাপড় দিয়ে কিছুক্ষণ পর পর শিশুর গা মুছে দিতে হবে। শিশুর গায়ের কাপড় খুলে তাকে খোলামেলা পরিবেশে রাখতে হবে । এছাড়া শিশুকে তরল খাবার যেমন- ফলের রস, স্যুপ, পানি বেশি করে খাওয়াতে হবে। ঘন ঘন মায়ের দুধ খাওয়াতে হবে। শিশুর জ্বর ৪৮ ঘন্টার বেশি হলে অবশ্যি ডাক্তারের কাছে নিতে হবে।

Mar 29

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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