Tag Archives: class

Example illustrating inheritance and abstract classes

Huge Sell on Popular Electronics

illustrating inheritance এবং abstract classes এর উদাহরণ

  • Shape.java সব, বদ্ধ খোলা, বাঁকা, এবং সোজা পার্শ্বে ধারবিশিষ্ট আকার এর জন্য প্যারেন্ট ক্লাস (সারাংশ)।
  • Curve.java একটি (সারাংশ) বাঁকা আকার (খোলা বা বন্ধ)
  • StraightEdgedShape.java সরাসরি ধার সম্বলিত একটি আকৃতি (খোলা বা বন্ধ)।
  • Measurable.java পরিমাপযোগ্য এলাকায় ইন্টারফেস ডিফাইনিং ক্লাস
  • Circle.java একটি বৃত্ত যা আকার প্রসারিত করে এবং পরিমাপ প্রয়োগ করে।
  • MeasureUtil.java পরিমাপযোগ্য স্থানের উপর কাজ করে।
  • Polygon.java সরাসরি ধার সম্বলিত একটি বদ্ধ আকৃতি; StraightEdgedShape প্রসারিত করে এবং পরিমাপ প্রয়োগ করে।
  • Rectangle.java একটি আয়তক্ষেত্র যা পরিমাপযোগ্য ইন্টারফেস ধারণ করে; বহুভুজে প্রসারিত করে।
  • MeasureTest.java উদাহরণ এর জন্য ড্রাইভার

Shape.java


/** The parent class for all closed, open, curved, and 
 *  straight-edged shapes.
 *

public abstract class Shape {
  protected int x, y;

  public int getX() {
    return(x);
  }

  public void setX(int x) {
    this.x = x;
  }

  public int getY() {
    return(y);
  }

  public void setY(int y) {
    this.y = y;
  }
}


 

Curve.java

একটি (সারাংশ) বাঁকা আকার (খোলা বা বন্ধ) Curve.java An (abstract) curved Shape (open or closed)


/** A curved shape (open or closed). Subclasses will include
 *  arcs and circles.
 *
public abstract class Curve extends Shape {}

 

StraightEdgedShape.java

সরাসরি ধার সম্বলিত একটি আকৃতি (খোলা বা বন্ধ) । A Shape with straight edges (open or closed).


/** A Shape with straight edges (open or closed). Subclasses
 *  will include Line, LineSegment, LinkedLineSegments,
 *  and Polygon.
 *

public abstract class StraightEdgedShape extends Shape {}

 

Measurable.java

পরিমাপযোগ্য এলাকায় ইন্টারফেস ডিফাইনিং ক্লাস Interface defining classes with measurable areas


/** Used in classes with measurable areas. 
 *
 **************

public interface Measurable {
  double getArea();
}

 

 

Circle.java

একটি বৃত্ত যা আকার প্রসারিত করে এবং পরিমাপ প্রয়োগ করে  ।  A circle that extends Shape and implements Measurable.


/** A circle. Since you can calculate the area of
 *  circles, class implements the Measurable interface.
 *

public class Circle extends Curve implements Measurable {
  private double radius;

  public Circle(int x, int y, double radius) {
    setX(x);
    setY(y);
    setRadius(radius);
  }

  public double getRadius() {
    return(radius);
  }

  public void setRadius(double radius) {
    this.radius = radius;
  }

  /** Required for Measurable interface. */

  public double getArea() {
    return(Math.PI * radius * radius);
  }
}

 

MeasureUtil.java

পরিমাপযোগ্য স্থানের উপর কাজ করে  ।  Operates on Measurable instances


/** Some operations on Measurable instances. 
 *

public class MeasureUtil {
  public static double maxArea(Measurable m1,
                               Measurable m2) {
    return(Math.max(m1.getArea(), m2.getArea()));
  }

  public static double totalArea(Measurable[] mArray) {
    double total = 0;
    for(int i=0; i

 

jQuery দিয়ে CSS Class এর মান বের করা এবং অরোপ করা

Huge Sell on Popular Electronics

জেকুয়্যেরি (jQuery) – গেট ও সেট সিএসএস ক্লাসেস

মো: আসাদুজ্জামান
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)

 

JQuery সঙ্গে, এলিমেন্টের সিএসএস ম্যানিপুলেট সহজ।

 

jQuery ম্যানিপুলেটিং সিএসএস

jQuery এর CSS ম্যানিপুলেশন জন্য বিভিন্ন পদ্ধতি আছে। আমরা নিম্নলিখিত পদ্ধতি পর্যবেক্ষণ করবো:

  • addClass () - নির্বাচিত এলিমেন্ট এক বা একাধিক ক্লাস যুক্ত করে
  • removeClass () - নির্বাচিত এলিমেন্ট থেকে এক বা একাধিক ক্লাস মুছে ফেলে
  • toggleClass () - নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে
  • css()- সেটস্ অথবা স্টাইল এট্রিবিউট ফেরৎ করে

 

উদাহরণ স্টাইলশীট

নিম্নলিখিত স্টাইল এই পেজে সব উদাহরণ জন্য ব্যবহার করা হবে:


.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

 

jQuery এর addClass () পদ্ধতি

নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে এ কিভাবে ক্লাস এট্রিবিউট যোগ করা হয় তা দেখানো হয়েছে। ক্লাস যোগ করার সময় অবশ্যই আপনি, একাধিক এলিমেন্ট নির্বাচন করতে পারেন:

উদাহরণ:


$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});

ফলাফল : addClass ()

 

এছাড়াও আপনি addClass () মেথড এর মধ্যে একাধিক ক্লাস নির্দিষ্ট করতে পারেন:

উদাহরণ:


$("button").click(function(){
    $("#div1").addClass("important blue");
});

ফলাফল : একাধিক ক্লাস

 

jQuery এর removeClass () পদ্ধতি

নিম্নলিখিত উদাহরণে বিভিন্ন এলিমেন্টে থেকে কিভাবে ক্লাস এট্রিবিউট অপসারণ করা হয় তা দেখানো হয়েছে।

উদাহরণ:


$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});

ফলাফল : removeClass ()

 

jQuery এর toggleClass () পদ্ধতি

নিম্নলিখিত উদাহরণে দেখানো হয়েছে কিভাবে jQuery toggleClass () মেথড ব্যবহার করা হয়। এ পদ্ধতি নির্বাচিত এলিমেন্ট এ ক্লাস যোগ/ অপসারণ এর মধ্যে টগল করে:

উদাহরণ:


$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});

ফলাফল : toggleClass ()

 

jQuery এর css() পদ্ধতি

JQuery এর css()মেথড পরবর্তী অধ্যায়ে ব্যাখ্যা করা হবে।

 

jQuery এর CSS রেফারেন্স

সমস্ত jQuery সিএসএস পদ্ধতির জন্য, আমাদের jQuery এর HTML / CSS এর রেফারেন্স এ যান।

এইচটিএমএল ক্লাসেস (HTML Classes)

Huge Sell on Popular Electronics

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

 

HTML Classes

সিএসএস এর মাধ্যমে বিভিন্ন ক্লাস এর এর স্টাইল সেট করে দেওয়া যায়।

উদাহরণ


<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>

<div class="cities">
 <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> 

</body>
</html>

 

Classing ব্লক elements

এইচটিএমএল <div> একটি ব্লক লেভেল উপাদান। অন্যান্য এইচটিএমএল এর উপাদানের ক্ষেত্রে এটি container হিসেবে কাজ করতে পারে। সবগুলো এইচটিএমএল উপাদানের div এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।

উদাহরণ


<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
 </head>
<body>

<div class="cities">
 <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>

<div class="cities">
 <h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
 <h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>


 

Classing inline elements

এইচটিএমএল এর <span> উপাদান একটি ইনলাইন উপাদান যা container এর টেক্সট এর জন্য ব্যবহার হয়ে থাকে। সবগুলো এইচটিএমএল উপাদানের span এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।

উদাহরণ


<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
 </style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>


 

বুটস্ট্র্যাপ বাটন (Bootstrap Buttons)

Huge Sell on Popular Electronics

Button স্টাইল

Bootstrap এ সাতটি স্টাইলের button ব্যবহৃত হয়, যথা:

এই সাতটি স্টাইলের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Default - .btn-default
  • Primary - .btn-primary
  • Success - .btn-success
  • Info - .btn-info
  • Warning - .btn-warning
  • Danger - .btn-danger
  • Link - .btn-link

 

নিম্নোক্ত উদাহরণে ভিন্ন ভিন্ন button এর স্টা্ইলের দেখানো হলো:


<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

 

button এর class গুলো সাধারণত <a>, </a><button><a> কিংবা <input type="text" /> এলিমেন্টে যোগ করা হয়। যেমন:


<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

 

কেন <a> এলিমেন্টের href এট্রিবিউটে # ব্যবহার করা হয়েছে?

যেহেতু যোগ করার মতো আমাদের হাতে এখনো কোন link নেই এবং লিংক না থাকার কারণে যে "404" message দেখানো হয় সেটাও দেখাতে চাই না কাজেই এখানে # ব্যবহার করা হয়েছে। তবে বাস্তব ক্ষেত্রে অবশ্যই # এর পরিবর্তে একটি লিংক যোগ করতে হবে।

 

বাটনের আকার

Bootstrap এ চারটি সাইজের Button ব্যবহৃত হয়, যথা:

Button এর এই চারটি সাইজের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Large - .btn-lg
  • Medium - .btn-md
  • Small- .btn-sm
  • XSmall - .btn-xs

নিম্নোক্ত উদাহরণে Button এর ভিন্ন ভিন্ন চারটি সাইজ দেখানো হলো:


<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

 

Block Level Buttons

parent element এর পুরো width জুড়ে Button তৈরি করাকে Block Level Buttons বলা হয়।

Block Level Buttons তৈরি করতে .btn-block class টি যোগ করা হয়। যেমন:


<button type="button" class="btn btn-primary btn-block">Button 1</button>

 

Active/Disabled Buttons

কোনো Button এর status এমনভাবে set করা যেতে পারে যেন তা active (যা active রয়েছে এমন) বা disabled (যা Click করা যায় না এমন) হতে পারে।

active Button তৈরি করার জন্য .active class এবং disabled Button তৈরি করার জন্য .disabled class যোগ করতে হয়। যেমন:


<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 

বুটস্ট্র্যাপ টেবিল (Bootstrap Tables)

Huge Sell on Popular Electronics

Bootstrap বেসিক টেবিল

সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে।
.table class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন:

কোড :


<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal 
dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

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


<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/
bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
</head>

 

Striped Rows

.table-striped class ব্যবহার করে টেবিলে zebra-stripes যোগ করা হয়। যেমন:

কোড:


<div class="container">     
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Bordered Table

.table-bordered class ব্যবহার করে টেবিলের ও সেলের চারদিকে বর্ডার যোগ করা হয়। যেমন:

কোড : 


<div class="container">     
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Hover Rows

টেবিলের row বা সারিতে hover ইফেক্ট দেবার জন্য .table-hover class টি যোগ করা হয়। যেমন:

কোড :


<div class="container">         
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Condensed Table

.table-condensed class টি ব্যবহার করলে টেবিলের সেল সাধারণ প্যাডিং অর্ধেক পরিমাণে কমে যায়। যেমন:

কোড :


<div class="container">         
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Contextual Classes

সাধারণত কোনো টেবিলের rows (<tr>) কিংবা cells (<td>) এ color দেবার জন্য Contextual Classes ব্যবহার করা হয়। যেমন:

কোড :


<div class="container">        
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Contextual Class গুলো সাধারণত নির্দিষ্ট কিছু color কে নির্দেশ করে। যেসকল Contextual Class ব্যবহৃত হয় সেগুলো হলো:

 

.active কোনো টেবিলের row বা টেবিলের cell এর জন্য hover color এর জন্য ব্যবহৃত হয়।
.success সফল (successful ) বা ইতিবাচক (positive) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.info নিরপেক্ষ বা তথ্যপূর্ণ (neutral informative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.warning মনোযোগ আকর্ষণ করার জন্য বা সতর্কতামূলক (warning) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.danger বিপদজনক বা নেতিবাচক (dangerous or potentially negative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।