data-toggleটুইটার বুটস্ট্র্যাপে বৈশিষ্ট্যগুলি কী করে ? বুটস্ট্র্যাপ এপিআইতে আমি কোনও উত্তর খুঁজে পাইনি।
আমি আগে লিঙ্কটি একই ধরণের প্রশ্ন দেখেছি । তবে এটি আমাকে খুব একটা কাজে দেয়নি।
data-toggleটুইটার বুটস্ট্র্যাপে বৈশিষ্ট্যগুলি কী করে ? বুটস্ট্র্যাপ এপিআইতে আমি কোনও উত্তর খুঁজে পাইনি।
আমি আগে লিঙ্কটি একই ধরণের প্রশ্ন দেখেছি । তবে এটি আমাকে খুব একটা কাজে দেয়নি।
উত্তর:
এটি একটি বুটস্ট্র্যাপ ডেটা অ্যাট্রিবিউট যা স্বয়ংক্রিয়ভাবে উপাদানটিকে যে ধরণের উইজেটের মতো করে তা সন্ধান করে। ডেটা- * এইচটিএমএল 5 স্পেসের অংশ, এবং ডেটা-টগল বুটস্ট্র্যাপের জন্য নির্দিষ্ট।
কিছু উদাহরণ:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট ডকসগুলির মাধ্যমে যান এবং ডেটা-টগল অনুসন্ধান করুন এবং আপনি কোড উদাহরণে এটি ব্যবহার দেখতে পাবেন see
একটি কার্যকারী উদাহরণ:
<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-তা হ'ল কিছু নির্দিষ্ট উদ্দেশ্যে ব্যবহৃত কাস্টম অ্যাট্রিবিউটের উপসর্গ (সেই উদ্দেশ্যটি অ্যাপ্লিকেশনটির উপর নির্ভর করে)। এটি মানুষের প্রচুর ব্যবহার relএবং তাদের মূল উদ্দেশ্যে উদ্দেশ্যগুলি ব্যতীত অন্য বৈশিষ্ট্যের জন্য অতিরিক্ত বৈশিষ্ট্যগুলির relপ্রায়শই প্রতিকার হিসাবে যুক্ত করা হয়েছিল ( প্রায়শই উন্নত সরঞ্জামদণ্ডের মতো জিনিসগুলির জন্য ডেটা ধরে রাখার জন্য ব্যবহৃত হত)।
বুটস্ট্র্যাপের ক্ষেত্রে, আমি এর অভ্যন্তরীণ কাজগুলির সাথে পরিচিত নই, তবে নামটি বিবেচনা করে আমি অনুমান করতে পারি যে এটি দৃশ্যমানতা টগল করার অনুমতি দেয় বা সম্ভবত এটির সাথে সংযুক্ত উপাদানটির একটি মোড (যেমন সংযোগযোগ্য) Octopress.org এ সাইড বার )।
এইচটিএমএল 5 ডক্টরের ডেটা-অ্যাট্রিবিউট সম্পর্কে একটি ভাল নিবন্ধ রয়েছে ।
উদাহরণস্বরূপ, বলুন যে আপনি রেসিপিগুলি তালিকাবদ্ধ করতে এবং প্রদর্শন করতে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করেছিলেন। আপনার গ্রাহকরা তালিকাটি বাছাই করতে, রেসিপিগুলির বৈশিষ্ট্যগুলি প্রদর্শন করতে এবং এই জাতীয় রেসিপিটি খোলার আগে তাদের পছন্দ করতে পারেন। এটি করার জন্য, আপনাকে রান্নার সময়, প্রাথমিক উপাদান, খাবারের অবস্থান এবং এই জাতীয় কিছু রেসিপিগুলির জন্য তালিকার সঠিক উপাদানগুলির মধ্যে সংযুক্ত করতে হবে।
<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>পৃষ্ঠায় এই তথ্যটি পেতে, আপনি অনেকগুলি বিভিন্ন জিনিস করতে পারেন। আপনি প্রতিটি এলআই উপাদানগুলিতে মন্তব্য যুক্ত করতে পারেন, আপনি তালিকা আইটেমগুলিতে rel বৈশিষ্ট্যগুলি যুক্ত করতে পারেন, আপনি সময়, খাবার এবং উপাদানগুলির (যেমন) এর উপর ভিত্তি করে সমস্ত রেসিপিগুলি আলাদা ফোল্ডারে রেখে দিতে পারেন। বেশিরভাগ বিকাশকারীরা যে সমাধানটি নিয়েছিলেন তা হ'ল বর্তমান উপাদান সম্পর্কে তথ্য সংরক্ষণের জন্য শ্রেণি বৈশিষ্ট্যগুলি ব্যবহার করা। এর বিভিন্ন সুবিধা রয়েছে:
তবে এই পদ্ধতির কিছু বড় ত্রুটি রয়েছে:
আমি প্রস্তাবিত অন্যান্য সমস্ত পদ্ধতিগুলির পাশাপাশি অন্যদেরও এই সমস্যাগুলি ছিল। তবে যেহেতু এটি দ্রুত এবং সহজেই ডেটা অন্তর্ভুক্ত করার একমাত্র উপায় ছিল, আমরা তা-ই করেছি। এইচটিএমএল 5 ডেটা রেসকিউতে অ্যাট্রিবিউট
এইচটিএমএল 5 কোনও উপাদানের সাথে নতুন ধরণের বৈশিষ্ট্য যুক্ত করেছে। কাস্টম ডেটা উপাদান (ডেটা- *)। এগুলি কাস্টম (* দ্বারা চিহ্নিত) বৈশিষ্ট্য যা আপনি আপনার HTML উপাদানগুলিতে যে কোনও ধরণের ডেটা সংজ্ঞায়িত করতে যোগ করতে পারেন। এগুলির দুটি অংশ রয়েছে:
বৈশিষ্ট্যের নাম এটি গুণকের নাম। এটি অবশ্যই কমপক্ষে একটি ছোট হাতের অক্ষর এবং প্রিফিক্স ডেটা থাকতে হবে। উদাহরণস্বরূপ: ডেটা-প্রধান-উপাদান, ডেটা-রান্না-সময়, ডেটা-খাবার। এটি আপনার ডেটার নাম।
বৈশিষ্ট্য ভল এই ডেটা কোনও পৃষ্ঠাতে বৈধ যে কোনও স্ট্রিং হতে পারে। উদাহরণস্বরূপ: ডেটা-প্রধান-উপাদান = "চকোলেট"।
তারপরে আপনি যে কোনও 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 এ তথ্যটি একবার হয়ে গেলে আপনি জাভাস্ক্রিপ্টের সাহায্যে এটি অ্যাক্সেস করতে পারবেন এবং সেই ডেটার উপর ভিত্তি করে পৃষ্ঠাটি ম্যানিপুলেট করতে পারবেন।
<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a
controller element, like a button, along with a data-target="#foo" or href="#foo"
to target a specific modal to toggle.-->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>অনেক উত্তর দেওয়া হয়েছে, কিন্তু তারা বিষয়টি পেতে পারে না। এটি ঠিক করা যাক।
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
বিন্দুতে
data-HTML5 পার্সার দ্বারা পার্স করা হয় না।data-toggleধসের কার্যকারিতা তৈরি করতে বৈশিষ্ট্যটি ব্যবহার করে ।কীভাবে ব্যবহার করবেন : মাত্র ২ টি পদক্ষেপ
class="collapse"উপাদানে #Aআপনি সঙ্কুচিত করতে চাই।data-target="#A"এবং data-toggle="collapse"।উদ্দেশ্য: data-toggleবৈশিষ্ট্যটি divযদি আমরা বুটস্ট্র্যাপ ব্যবহার করি তবে একটি (ব্লক) ভেঙে ফেলার / নিয়ন্ত্রণের জন্য একটি নিয়ন্ত্রণ তৈরি করতে দেয় allows
এই ডেটা-অ্যাট্রিবিউটটির উপস্থিতি বুটস্ট্র্যাপকে ব্যবহারকারী ইন্টারঅ্যাকশনে ভিজ্যুয়াল বা অন্য উপাদানটির যৌক্তিক অবস্থার মধ্যে স্যুইচ করতে বলে।
এটি মোডাল, ট্যাব সামগ্রী, সরঞ্জামদণ্ড এবং পপওভার মেনুগুলি প্রদর্শন করার পাশাপাশি একটি টগল-বোতামের জন্য একটি চাপিত-স্থিতি সেট করতে ব্যবহৃত হয়। এটি একটি পরিষ্কার ডকুমেন্টেশন ছাড়াই একাধিক উপায়ে ব্যবহৃত হয়।
বুটস্ট্র্যাপে ডেটা-টগল করার উদ্দেশ্য তাই আপনি একটি নির্দিষ্ট ধরণের সমস্ত ট্যাগ খুঁজে পেতে jQuery ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি সমস্ত পপওভার ট্যাগগুলিতে ডেটা-টগল = "পপওভার" রেখেছিলেন এবং তারপরে আপনি এই সমস্ত ট্যাগগুলি খুঁজে পেতে এবং সেগুলি শুরু করার জন্য পপওভার () ফাংশনটি চালাতে একটি জিকুয়েরি নির্বাচক ব্যবহার করতে পারেন। আপনি ট্যাগটিতে ক্লাস = "মাইপোভার "টি ঠিক রাখতে পারেন এবং একই কাজটি করার জন্য .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>ঠিক কাজ করে।
এটি একটি বুটস্ট্র্যাপ সংজ্ঞায়িত HTML5 ডেটা অ্যাট্রিবিউট। এটি একটি ইভেন্টে একটি বোতাম বেঁধে রাখে।
জাভাস্ক্রিপ্টের মধ্যে সহজেই ডোম উপাদান বৈশিষ্ট্যগুলি অ্যাক্সেস করতে বুটস্ট্র্যাপ HTML5 স্ট্যান্ডার্ডকে কাজে লাগায়।
স্ক্রিপ্টগুলির সাহায্যে এইচটিএমএল এবং এর ডিওএম উপস্থাপনার মধ্যে মালিকানা সম্পর্কিত তথ্য আদান প্রদানের অনুমতি দেয় এমন কাস্টম ডেটা অ্যাট্রিবিউট নামে পরিচিত এমন একাধিক বৈশিষ্ট্যের ফর্ম গঠন করে। এই জাতীয় সমস্ত কাস্টম ডেটা হ'ল বৈশিষ্ট্যটি সেট করা উপাদানটির HTMLElement ইন্টারফেসের মাধ্যমে উপলব্ধ। HTMLElement.dataset সম্পত্তি তাদের অ্যাক্সেস দেয়।