TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

WeQUERY সাইটের জন্য jQuery Accordion উইজেট

2

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

WeQUERY সাইটের জন্য jQuery Accordion উইজেট

উইজেটের তিনটি অংশ আছে – স্ক্রিপ্ট, CSS এবং HTML।

স্ক্রিপ্ট যোগ করা হচ্ছে

আপনার Weebly পৃষ্ঠার " ফুটার কোড " বিভাগের অধীনে নিম্নলিখিত কোড যোগ করুন :

<script type="text/javascript" data-src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $( "#accordion" ).accordion({ autoHeight: false, navigation: true }); }); </script>

যদি আপনি দেখেন অ্যাকর্ডিয়ন লোড হচ্ছে না তাহলে উপরের স্ক্রিপ্টে $ jQuery দিয়ে প্রতিস্থাপন করুন।

CSS যোগ করা হচ্ছে

আপনার Weebly পৃষ্ঠার " হেডার কোড " বিভাগের অধীনে নিচের CSS যোগ করুন :

<style> a { text-decoration: none; } :focus, :active { outline: 0; } #accordion { width: 100%; } #accordion .ui-accordion-header { background-color: #ccc; margin: 0px; } #accordion .ui-accordion-header a { color: #fff; line-height: 42px; display: block; font-size: 12pt; width: 100%; text-indent: 10px; text-shadow: 1px 1px 0px rgba(0,0,0,0.2); } #accordion .ui-accordion-content { width: 100%; background-color: #f3f3f3; color: #777; font-size: 10pt; line-height: 16pt; box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2), inset 0px -1px 0px 0px rgba(0, 0, 0, .4); } #accordion .ui-accordion-content > * { margin: 0; padding: 20px; } #accordion .ui-accordion-content a { color: #777; } #accordion .ui-accordion-header:first-of-type { background-color: #fa9300; } #accordion .ui-accordion-header:nth-of-type(2) { background-color: #389abe; } #accordion .ui-accordion-header:nth-of-type(3) { background-color: #f87aa0; } /* Start Block for Accordion */ #accordion .ui-accordion-header:nth-of-type(4) { background-color: #a8b700; } /* End Block for Accordion */ /* To add additional blocks, add the above block and use nth-of-type(5) and increase the count */ #accordion .ui-accordion-header:last-of-type { background-color: #b3bec4; } #accordion .ui-accordion-header:first-of-type a { box-shadow: 0px -1px 0px 0px #b85c0f; } #accordion .ui-accordion-content:last-of-type { box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2), inset 0px 0 0px 0px rgba(0, 0, 0, .5); } </style>

HTML যোগ করা

এখন একটি "এম্বেড কোড" উপাদান টেনে আনুন এবং ড্রপ করুন এবং নিম্নলিখিত HTML কোড যোগ করুন:

<div id="accordion"> <!-- Start of Block for Accordion --> <h3><a href=#>Heading 1 of Accordion</a></h3> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> <!-- End of Block for Accordion --> <h3><a href=#>Heading 2 of Accordion</a></h3> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> <h3><a href=#>Heading 3 of Accordion</a></h3> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> <h3><a href=#>Heading 4 of Accordion</a></h3> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> <h3><a href=#>Heading 5 of Accordion</a></h3> <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div> </div>

অ্যাকর্ডিয়নে অতিরিক্ত ব্লক যুক্ত করা

উপরের উদাহরণটিতে অ্যাকর্ডিয়নে পাঁচটি ব্লক রয়েছে। আপনি যদি অতিরিক্ত ব্লক যুক্ত করতে চান তাহলে আপনাকে CSS এবং HTML এর জন্য অতিরিক্ত কোড ব্লক যোগ করতে হবে ।

  • CSS কোডে, "অ্যাকর্ডিয়নের জন্য স্টার্ট/এন্ড ব্লক" মন্তব্যগুলির মধ্যে কোড ব্লকটি অনুলিপি করুন এবং "nth-of-child (4)" কে "nth-of-child (5)" এ পরিবর্তন করে পেস্ট করুন যা হবে অ্যাকর্ডিয়নে 5 ম ব্লক (শেষ ব্লকের ঠিক উপরে)। প্রতিটি ব্লকের একটি "ব্যাকগ্রাউন্ড-কালার" বৈশিষ্ট্য রয়েছে যা আপনি হেডারের রঙ পরিবর্তন করতে পরিবর্তন করতে পারেন।
  • একইভাবে এইচটিএমএল -এ, শেষের ঠিক উপরে "অ্যাকর্ডিয়নের জন্য ব্লকের শুরু/শেষ" মন্তব্যগুলির মধ্যে কোড ব্লক যুক্ত করুন

    ট্যাগ

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত