Mar 30

HTML এর প্রথমিক কিছু বিষয়

HTML এর প্রথমিক কিছু বিষয়

 

HTML Documents(নথি):

<!DOCTYPE html> লেখার মধ্য দিয়ে সব ধরণের HTML document শুরু হয়।<html> tag লেখার মাধ্যমে শুরু এবং </html> tag লেখার মাধ্যমে শেষ হয়।<body> এবং </body> tag এর মাঝখানে HTML Document এর দৃশ্যমান অংশটুকু অবস্থান করে।

উদাহরণস্বরূপঃ

<!DOCTYPE html>

<html>

<body>

<h1> আমার প্রথম শিরোনাম </h1>

<p> আমার প্রথম অনুচ্ছেদ <p>

</body>

<html>

 

 

HTML Headings(শিরোনাম):

<h1> থেকে <h6> tag দিয়ে HTML এর Heading কে বিশেষায়িত করা হয়।

উদাহরণঃ

<h1> এই হল একটি শিরোনাম </h1>

<h2> এই হল একটি শিরোনাম </h2>

<h3> এই হল একটি শিরোনাম </h3>

HTML Paragraphs(অনুচ্ছেদ):

<p> tag এর মধ্য দিয়ে HTML এর Paragraph কে তুলে ধরা হয়।

উদাহরণঃ

<p> এই হল একটি অনুচ্ছেদ <p>

 

HTML Links(সংযোগ):

<a> tag এর মধ্য দিয়ে HTML Link কে তুলে ধরা হয়।

উদাহরণস্বরূপঃ

<a herf =http://www.salearningschool.com>

This is a link </a>

এখানে (herf )attribute টি ব্যবহৃত হয়েছে link Address কে চিহ্নিত করার জন্য।এই attribute গুলো HTML elements এর অতিরিক্ত তথ্য সরবারহ করার জন্য ব্যবহৃত হয়।

 

HTML Images(চিত্র):

<img> tag এর মাধ্যমে HTML image কে প্রকাশ করা হয়।যার source file হিসেবে (src), alternative text হিসেবে (alt) এবং size প্রকাশ করতে (width এবং height) attribute ব্যবহার করা হয়।

উদাহরণস্বরূপঃ

<img src = “salearningschools.jpg” alt= ”salearningschool.com” width= “104” height= “ 142”>

আপনারা পরবর্তী অধ্যায়ে attribute সম্পর্কে আরও জানবেন।

Mar 30

জেকুএরি ভুমিকা । jQuery Introduction

jQuery হলো JavaScript এর সমগ্র বা Library. JavaScript প্রোগ্রামকে সহজীকরণ করে। এর সাহায্যে জটিলতম JavaScript প্রোগ্রামগুলোকে সহজে একসূত্রে গাঁথা যায়। খুব সামান্য চেষ্টা এবং শ্রম ব্যয় করে আপনি jQuery শিখতে পারবেন।

এই ওয়েবসাইটের প্রতি অনুচ্ছেদে “নিজে চেষ্টা কর” রয়েছে।
আমাদের অনলাইন এডিটরের সাহায্যে আপনি সহজে কোড এডিট করতে এবং ফলাফল দেখতে পারবেন।

উদাহরণ:
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});

“নিজে চেষ্টা কর” বাটনে ক্লিক করুন এবং এর ফলাফল দেখুন।

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

jQuery কুইজ টেস্ট
এই ওয়েবসাইটে jQuery এর পর্যাপ্ত পরিমাণ কুইজ টেস্ট রয়েছে। এসকল কুইজে অংশ নিয়ে আপনি আপনার jQuery দক্ষতা পরীক্ষা করতে পারবেন সহজেই।

jQuery রেফারেন্স
jQuery এর পরিপূর্ণ শিক্ষণের জন্য এর অবজেক্ট ও মেথড সম্পর্কে যথার্থ শিক্ষা উপকরণ প্রয়োজন। এই ওয়েবসাইটে অবজেক্ট ও মেথড সম্পর্কে পরিপূর্ণ রেফারেন্স পাওয়া যায়।

—————–

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

Mar 30

ASP.NET টিউটোরিয়াল :[পর্বঃ ৭]:: ASP.NET Web Forms দিয়ে TextBox বানানো : ASP.NET Web Forms – The TextBox Control

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

আমরা চাই আমাদের সাইটে একটা TextBox থাকুক যেখানে আমাদের ইউজাররা তাদের প্রশ্ন অথবা কোনো সমস্যা আমাদেরকে টেক্স আকারে মেসেজ করতে পারে । তাই আজকে আমরা শিখবো ASP.NET Web Forms দিয়ে TextBox কনট্রোল করে কিভাবে TextBox বানানো যায় ।

TextBox কনট্রোল কি?
TextBox কনট্রোল হলো একটি TextBox তৈরী করা যার সাহায্যে ইউজাররা টেক্সট পাঠাতে পারে । TextBox কনট্রোল এর জন্য আপনাকে কিছু এট্রিবিউট এবং প্রোপার্টিজ ব্যবহার করতে হবে । আসুন একটা কোডের উদাহরণ দেই তাহলেই বুঝতে পারবেন ।

<html>
<body>

<form runat=”server”>

A basic TextBox:
<asp:TextBox id=”tb1″ runat=”server” />
<br /><br />

A password TextBox:
<asp:TextBox id=”tb2″ TextMode=”password” runat=”server” />
<br /><br />

A TextBox with text:
<asp:TextBox id=”tb4″ Text=”Hello World!” runat=”server” />
<br /><br />

A multiline TextBox:
<asp:TextBox id=”tb3″ TextMode=”multiline” runat=”server” />
<br /><br />

A TextBox with height:
<asp:TextBox id=”tb6″ rows=”5″ TextMode=”multiline”
runat=”server” />
<br /><br />

A TextBox with width:
<asp:TextBox id=”tb5″ columns=”30″ runat=”server” />

</form>

</body>
</html>

এই কোডটা একটু ভালভাবে পর্যবেক্ষণ করলেই বুঝতে পারবেন ।

স্ক্রিপ্ট যোগ করা
আমরা চাইলে এই TextBox এর ভিতরে অনেকগুলো স্ক্রিপ্ট যোগ করতে পারি । আসুন তাহলে আর ভিতর একটি TextBox কন্ট্রোল, একটি বাটন কন্ট্রোল এবং একটি লেবেল কন্ট্রোল যোগ করতে চাইলে স্ক্রিপ্টটা কেমন হবে ।

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

<html>
<body>

<form runat=”server”>
Enter 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>

এই স্ক্রিপ্টের ভিতর একটি TextBox কন্ট্রোল, একটি বাটন কন্ট্রোল এবং একটি লেবেল কন্ট্রোল যোগ করা আছে । আপনি কোডগুলো ভালভাবে দেখলে বুঝতে পারবেন ।

এবার আসুন তাইলে শুধু একটি TextBox কন্ট্রোল এবং একটি লেবেল কন্ট্রোল যোগ করলে স্ক্রিপ্টটা কেমন হবে ।

<script runat=”server”>
Sub change(sender As Object, e As EventArgs)
lbl1.Text=”You changed text to ” & txt1.Text
End Sub
</script>

<html>
<body>

<form runat=”server”>
Enter your name:
<asp:TextBox id=”txt1″ runat=”server”
text=”Hello World!”
ontextchanged=”change” autopostback=”true”/>
<p><asp:Label id=”lbl1″ runat=”server” /></p>
</form>

</body>
</html>

আপনি যখন এই .aspx ফাইলের TextBox মান পরিবর্তন করবেন অথবা TextBox এর বাইরে ক্লিক করবেন অথবা Tab key চাপবেন তখন এই সাবরুটিনের মানগুলো সম্পাদন করে দেখাবে ।

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

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

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