javascript w3schools টুইটার বুটস্ট্র্যাপে ডাটা-টগল বৈশিষ্ট্য




w3schools (8)

এটি একটি বুটস্ট্র্যাপ সংজ্ঞায়িত HTML5 ডেটা বৈশিষ্ট্য। এটি একটি ঘটনা একটি বাটন binds।

টুইটার বুটস্ট্র্যাপে data-toggle বৈশিষ্ট্য কী করে? আমি বুটস্ট্র্যাপ API এ একটি উত্তর খুঁজে পাচ্ছি না।

আমি link আগে একটি অনুরূপ প্রশ্ন দেখা যায়। কিন্তু এটা আমাকে অনেক সাহায্য করেনি।


অনেক উত্তর দেওয়া হয়েছে, কিন্তু তারা পয়েন্ট পেতে না। এর এই ঠিক করা যাক।

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

যথাযথ

  1. data- দিয়ে শুরু হওয়া যেকোনো বৈশিষ্ট্য- HTML5 প্যাসারার দ্বারা বিশ্লেষণ করা হয় না।
  2. বুটস্ট্র্যাপ পতন কার্যকারিতা তৈরি করতে data-toggle বৈশিষ্ট্য ব্যবহার করে।

কিভাবে ব্যবহার করবেন : শুধুমাত্র 2 ধাপ

  1. উপাদান #A আপনি শ্রেণীবিভাগ করতে চান class="collapse" যোগ করুন।
  2. data-target="#A" এবং data-toggle="collapse"

উদ্দেশ্য: data-toggle অ্যাট্রিবিউট যদি আমরা বুটস্ট্র্যাপ ব্যবহার করি তবে একটি div (ব্লক) div / প্রসারিত করার জন্য নিয়ন্ত্রণ তৈরি করতে দেয়।


বুটস্ট্র্যাপে ডেটা-টগল করার উদ্দেশ্য তাই আপনি নির্দিষ্ট ধরণের সমস্ত ট্যাগ খুঁজে পেতে jQuery ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি সমস্ত পপভার ট্যাগগুলিতে ডাটা-টগল = "পপোভার" রাখেন এবং তারপরে আপনি সমস্ত ট্যাগগুলি খুঁজতে JQuery নির্বাচক ব্যবহার করতে পারেন এবং পপওভার () ফাংশনটি তাদের সূচনা করতে চালাতে পারেন। আপনি ট্যাগটিতে "class =" myPopover "পাশাপাশি .myPopover সিলেক্টরটি একই জিনিসটি ব্যবহার করতে পারেন। ডকুমেন্টেশন বিভ্রান্তিকর, কারণ এটি এটি বিশেষ করে যে বৈশিষ্ট্য সঙ্গে কিছু চলছে প্রদর্শিত করে তোলে।

এই

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

ঠিক সূক্ষ্ম কাজ করে।


getbootstrap.com/javascript আপনি মানগুলির জন্য আরো উদাহরণগুলি সন্ধান করতে পারেন যা data-toggle নির্ধারিত হতে পারে। data-toggle অনুসন্ধান করতে শুধুমাত্র পৃষ্ঠায় যান এবং তারপরে CTRL+F


জাভাস্ক্রিপ্টের মধ্যে সহজেই DOM উপাদান বৈশিষ্ট্য অ্যাক্সেস করার জন্য বুটস্ট্র্যাপটি HTML5 মানদণ্ড সরবরাহ করে।

নিরীক্ষার *

কাস্টম ডেটা বৈশিষ্ট্যগুলি, যা বৈশিষ্ট্যের একটি শ্রেণিকে গঠন করে, যা স্বত্বাধিকারী তথ্যকে HTML এবং এর DOM প্রতিনিধিত্বের মধ্যে বিনিময় করার অনুমতি দেয় যা স্ক্রিপ্টগুলি দ্বারা ব্যবহৃত হতে পারে। এই ধরনের সমস্ত কাস্টম তথ্য উপাদানটির HTTLELEMENT ইন্টারফেসের মাধ্যমে উপলব্ধ করা হয়। HTMLElement.dataset সম্পত্তি তাদের অ্যাক্সেস দেয়।

Reference


এটি একটি HTML5 ডেটা অ্যাট্রিবিউট যা এটি স্বয়ংক্রিয়ভাবে উইজেটের ধরণের উপাদানটিকে হুক আপ করে।

কিছু উদাহরণ:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

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

একটি কাজ উদাহরণ:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>


কোনও বৈশিষ্ট্য যা data- দিয়ে শুরু data- এটি কোন নির্দিষ্ট উদ্দেশ্যে ব্যবহৃত কাস্টম বৈশিষ্ট্যগুলির জন্য উপসর্গ (যে উদ্দেশ্যটি অ্যাপ্লিকেশনটির উপর নির্ভর করে)। এটি লোকেদের তাদের মূল উদ্দেশ্যবস্তুর উদ্দেশ্যে অন্য কোন উদ্দেশ্যে rel এবং অন্যান্য বৈশিষ্ট্যের ভারী ব্যবহারে একটি অর্থোপার্জনীয় উপাদানের রূপে যোগ করা হয়েছিল ( rel প্রায়ই উন্নত সরঞ্জামদণ্ডগুলির মতো তথ্যগুলির জন্য তথ্য ধারণ করার জন্য ব্যবহৃত হয়)।

বুটস্ট্র্যাপের ক্ষেত্রে, আমি তার অভ্যন্তরীণ কাজের সাথে পরিচিত নই, তবে নাম থেকে বিচার করছি, আমি অনুমান করি যে এটি দৃশ্যমানতা বা সম্ভবত সংযুক্ত করা উপাদানটির একটি মোড (যেমন ধংসযোগ্য) Octopress.org উপর পার্শ্ব বার)।

এইচটিএমএল 5 ডক্টরেটটিতে একটি ভাল নিবন্ধ রয়েছে - বৈশিষ্ট্য

চক্র 2 তথ্য-বৈশিষ্ট্য ব্যাপক ব্যবহারের অন্য উদাহরণ


উদাহরণস্বরূপ, আপনি রেসিপি তালিকা এবং প্রদর্শন করতে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করা হয়েছে বলে। আপনি রেসিপি খোলা চয়ন করার আগে আপনার গ্রাহকদের তালিকা সাজানোর, রেসিপি বৈশিষ্ট্য প্রদর্শন, এবং তাই করতে চান হতে পারে। এটি করার জন্য, আপনাকে রান্না করার সময়, প্রাথমিক উপাদান, খাবারের অবস্থান, ইত্যাদির মতো জিনিসগুলিকে সংশ্লিষ্ট রেসিপিগুলির তালিকার উপাদানের ভিতরে যুক্ত করতে হবে।

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

পৃষ্ঠাটিতে যে তথ্য পেতে, আপনি অনেক বিভিন্ন জিনিস করতে পারে। আপনি প্রতিটি এল এল উপাদানগুলিতে মন্তব্য যোগ করতে পারেন, আপনি তালিকা আইটেমগুলিতে রিল বৈশিষ্ট্য যোগ করতে পারেন, আপনি সমস্ত রেসিপি সময়, খাবার এবং উপাদান (অর্থাত্) উপর ভিত্তি করে পৃথক ফোল্ডারে রাখতে পারেন। বেশিরভাগ বিকাশকারী যে সমাধানটি গ্রহণ করেছে তা বর্তমান উপাদান সম্পর্কে তথ্য সংরক্ষণ করতে শ্রেণির গুণাবলী ব্যবহার করতে হয়েছিল। এই অনেক সুবিধা আছে:

  • আপনি একটি উপাদান একাধিক ক্লাস সংরক্ষণ করতে পারেন
  • ক্লাসের নাম মানুষের পাঠযোগ্য হতে পারে
  • জাভাস্ক্রিপ্ট (ক্লাসName) সহ ক্লাস অ্যাক্সেস করা সহজ
  • ক্লাস এটি উপাদান সঙ্গে যুক্ত করা হয়

কিন্তু এই পদ্ধতিতে কিছু বড় ত্রুটি রয়েছে:

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

আমি প্রস্তাব অন্যান্য অন্যান্য পদ্ধতি এই সমস্যা পাশাপাশি অন্যদের ছিল। কিন্তু এটি দ্রুত এবং সহজেই ডেটা অন্তর্ভুক্ত করার একমাত্র উপায় ছিল, যা আমরা করেছি। রেসকিউ এইচটিএমএল তথ্য বৈশিষ্ট্য

এইচটিএমএলটি কোনও উপাদানতে নতুন ধরণের বৈশিষ্ট্য যুক্ত করেছে-কাস্টম ডেটা উপাদান (তথ্য- *)। এটি কাস্টম (* দ্বারা চিহ্নিত) বৈশিষ্ট্য যা আপনি আপনার HTML উপাদানগুলিতে যোগ করতে পারেন যেকোনো ধরনের ডেটা সংজ্ঞায়িত করতে আপনি চান। তারা দুটি অংশ গঠিত:

বৈশিষ্ট্য নাম এই বৈশিষ্ট্যটির নাম। এটি অবশ্যই কমপক্ষে একটি ছোট হাতের অক্ষর এবং উপসর্গের তথ্য থাকা আবশ্যক। উদাহরণস্বরূপ: তথ্য-প্রধান-উপাদান, তথ্য-রান্না-সময়, ডেটা-খাবার। এটি আপনার তথ্য নাম।

বৈশিষ্ট্য Vaule অন্য যে কোনও HTML এ্যাট্রিবিউটের মতো, আপনি সমান চিহ্ন দ্বারা পৃথক কোটগুলিতে ডেটা নিজেই অন্তর্ভুক্ত করুন। এই তথ্য একটি ওয়েব পৃষ্ঠায় বৈধ যে কোন স্ট্রিং হতে পারে। উদাহরণস্বরূপ: তথ্য-প্রধান-উপাদান = "চকলেট"।

আপনি তারপর আপনি চান যে কোনো এইচটিএমএল উপাদান এই তথ্য বৈশিষ্ট্য প্রয়োগ করতে পারেন। উদাহরণস্বরূপ, আপনি উপরের উদাহরণ তালিকায় তথ্য সংজ্ঞায়িত করতে পারেন:

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

আপনার HTML এ সেই তথ্যটি একবারের পরে আপনি জাভাস্ক্রিপ্টের সাথে এটি অ্যাক্সেস করতে এবং সেই ডেটা ভিত্তিক পৃষ্ঠাটিকে ম্যানিপুলেট করতে সক্ষম হবেন।





twitter-bootstrap