আপনি কীভাবে টগল বোতাম তৈরি করবেন?

Question

আমি সিএসএস ব্যবহার করে এইচটিএমএলে একটি টগল বোতাম তৈরি করতে চাই। আমি এটি চাই যাতে আপনি যখন এটিতে ক্লিক করেন, এটি ধাক্কা দিয়ে যায় এবং আপনি যখন আবার এটিতে ক্লিক করেন তখন এটি পপআপ হয়।

যদি কেবল সিএসএস ব্যবহার করে এটি করার কোনও উপায় না থাকে। JQuery ব্যবহার করে এটি করার কোনও উপায় আছে?

Comments

আমি কেবল CSS3 দিয়ে কীভাবে অফ / অফ স্যুইচ তৈরি করব সে সম্পর্কে একটি টিউটোরিয়াল লিখেছিলাম , কোনও জেএসের দরকার নেই। এখানে আপনি ডেমোটি দেখতে পাবেন

— ফেলিক্স হ্যাগস্পিল

এখানে কীভাবে রেডিও বোতামগুলিকে টগল বোতামে রূপান্তর করতে JQuery প্লাগইন তৈরি করতে হয় তার টিউটোরিয়াল এবং এখানে আপনি ডেমো দেখতে পারেন

— গোপাল জোশী

Answer 1

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

সুতরাং সর্বোত্তম সমাধানটি হ'ল ছোট্ট jQuery ফাংশন এবং দুটি ব্যাকগ্রাউন্ড চিত্র ব্যবহার করে বোতামের দুটি পৃথক স্ট্যাটাস স্টাইল করার জন্য। সীমানা দ্বারা প্রদত্ত একটি আপ / ডাউন এফেক্ট সহ উদাহরণ:

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});

a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

স্পষ্টতই, আপনি ব্যাকগ্রাউন্ড চিত্রগুলি যোগ করতে পারেন যা বোতামের উপরে এবং বোতামটি উপস্থাপন করে এবং পটভূমির রঙকে স্বচ্ছ করে তুলতে পারে।

Comments

এই কোডটির

— ইভান

এফওয়াইআই: আমি এই পোস্টের মতোই কাজটি করেছি, কেবল গুগল ডার্ট স্টিলপিনজটা ডটকম / 2014/03/20/toggle-buttons-in-dart ব্যবহার করে । দ্রষ্টব্য: ক্রোমিয়ামে কাজ করে তবে জাভাস্ক্রিপ্টে সংকলিত হতে পারে এবং অন্যান্য আধুনিক ব্রাউজারগুলিতে কাজ করবে। আইই ব্রাউজার হিসাবে গণনা করে না ;-)

— সার্জ মেরজলিয়াভভ

Answer 2

জিক্যুরি ইউআই টগল বোতাম তৈরির বাইরে হালকা কাজ করে। শুধু এই রাখা

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

আপনার পৃষ্ঠায় এবং তারপরে আপনার দেহে onLoadবা আপনার $.ready()(বা কোনও অজেক্টের আক্ষরিক init()কাজ যদি আপনার অজ্যাক্স সাইট তৈরি করে ..) কিছু জিকুয়েরিকে এভাবে ফেলে দিন:

$("#myToggleButton").button()

এটাই. (ভুলে যাবেন না < label for=...>কারণ জিক্যুআরআইআই টোগল বোতামের বডিটির জন্য এটি ব্যবহার করে ..)

সেখান থেকে আপনি কেবল এটির সাথে অন্য যেকোন কাজের মতোই কাজ করেন input="checkbox"কারণ অন্তর্নিহিত নিয়ন্ত্রণটি এখনও এটাই তবে জ্যাকুয়ারি ইউআই এটি স্ক্রিনে সুন্দর টগল বোতামের মতো দেখতে স্কিন করে।

Comments

ওপি jquery ট্যাগ যুক্ত করে দেওয়া এটি একটি দুর্দান্ত উত্তর। প্রদত্ত jqueryUI একত্রিত স্টাইলিং সরবরাহ করতে ব্যবহার করা যেতে পারে।

— জো জনস্টন

Answer 3

এখানে একটি উদাহরণ ব্যবহার করে pure css:

  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }

<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

Answer 4

এই উত্তরের সাথে মিলিয়ে আপনি এই ধরণের স্টাইলটি মোবাইল সেটিংস টগলারের মতো ব্যবহার করতে পারেন।

এইচটিএমএল

<a href="#" class="toggler">&nbsp;</a>
<a href="#" class="toggler off">&nbsp;</a>
<a href="#" class="toggler">&nbsp;</a>

সিএসএস

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

jQuery

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});

অনেক সুন্দর হতে পারে, কিন্তু ধারণা দেয়।
একটি সুবিধা হ'ল এটি jquery এবং / অথবা CSS3 ফিডলারের সাথে অ্যানিমেটেড করা যায়

Answer 5

আপনি যদি একটি সঠিক বোতাম চান তবে আপনার কিছু জাভাস্ক্রিপ্ট দরকার। এর মতো কিছু (স্টাইলিংয়ের জন্য কিছু কাজ দরকার তবে আপনি সংক্ষেপে পান)। সৎ হওয়ার জন্য এত তুচ্ছ কোনও জিনিসের জন্য jquery ব্যবহার করে বিরক্ত করবেন না।

<html>
<head>
<style type="text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>

Answer 6

আপনি কেবল স্থিতি toggleClass()ট্র্যাক করতে ব্যবহার করতে পারেন । তারপরে আপনি যাচাই করতে পারেন বাটন উপাদানটির ক্লাস রয়েছে কি না:

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

এবং আমি buttonশব্দার্থবিরোধী কারণে বোতামগুলির জন্য উপাদানটি ব্যবহার করি ।

<button class="toggler">Toggle me</button>

Answer 7

আপনি একটি অ্যাঙ্কর উপাদান ( <a></a>) ব্যবহার করতে পারেন এবং পটভূমি চিত্রটি টগল করতে বা বন্ধ করতে একটি: সক্রিয় এবং একটি: লিঙ্কটি ব্যবহার করতে পারেন। শুধু একটি ভাবনা.

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

var flag = 0;
function toggle(){
if(flag==0){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
    flag=1;
}
else if(flag==1){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
    flag=0;
}
}

এবং এইচটিএমএল মত <div id="toggleDiv" onclick="toggle()">Some thing</div>

Answer 8

আমি মনে করি না যে বোতাম তৈরির জন্য জেএস ব্যবহার করা ভাল অনুশীলন। যদি ব্যবহারকারীর ব্রাউজার জাভাস্ক্রিপ্ট নিষ্ক্রিয় করে?

এছাড়াও, এটি করার জন্য আপনি কেবল একটি চেকবক্স এবং কিছুটা সিএসএস ব্যবহার করতে পারেন। এবং আপনার চেকবক্সের অবস্থা পুনরুদ্ধার করা সহজ।

এটি কেবল একটি উদাহরণ, তবে আপনি কীভাবে চান তা এটি স্টাইল করতে পারেন।

http://jsfiddle.net/4gjZX/

এইচটিএমএল

<fieldset class="toggle">
  <input id="data-policy" type="checkbox" checked="checked" />
  <label for="data-policy">
  <div class="toggle-button">
    <div class="toggle-tab"></div>
  </div>
  Toggle
  </label>
</fieldset>​

সিএসএস

.toggle label {
  color: #444;
  float: left;
  line-height: 26px;
}
.toggle .toggle-button {
  margin: 0px 10px 0px 0px;
  float: left;
  width: 70px;
  height: 26px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
  background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
  background-image: linear-gradient(top, #eeeeee, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
  width: 30px;
  height: 26px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
  background-image: linear-gradient(top, #fafafa, #eeeeee);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
  border: 1px solid #CCC;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
  background-color: #2d71c2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
  background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: linear-gradient(top, #2d71c2, #4ea1db);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
  margin-left: 39px;
  -webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}​

আশাকরি এটা সাহায্য করবে

Answer 9

আমি আপনার সিএসএসে এমন একটি ক্লাস ব্যবহার করতে চাইব যা বোতামটি হতাশার সময় সীমানা রীতি বা সীমানা প্রস্থকে পরিবর্তন করে, তাই এটি একটি টগল বোতামের উপস্থিতি দেয়।

Answer 10

এই বিট চেষ্টা করুন:

input type="button" 
                           data-bind="css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />

in viewModel
self.toggleButton = ko.observable(false);

Answer 11

সুইজকের একটি জ্যাকারি প্লাগইন রয়েছে , যা এটি অন্যান্য জিনিসের মধ্যে করতে পারে: https://github.com/Swizec/styled-button

(পুরানো লিঙ্কটি ছিল http://swizec.com/code/styledButton/ , আমি প্রতিস্থাপনের পুরোপুরি পরীক্ষা করিনি, কেবল এটি ডাব্লু / গুগল খুঁজে পেয়েছি))

Answer 12

আপনি "সক্রিয়" সিউডোক্লাস ব্যবহার করতে পারেন (এটি লিঙ্ক ব্যতীত অন্য উপাদানগুলির জন্য আইআই 6-তে কাজ করবে না)

a:active
{
    ...desired style here...
}

Answer 13

<label for="input">বাস্তবায়নের সাথে jQuery ব্যবহার করে টগলবাটনের একটি উদাহরণ / বৈকল্পিক (আরও বিশদ বর্ণিত) এর একটি is

1 ম আমরা ক্লাসিক এইচটিএমএল <input>এবং ব্যবহার করে আমাদের টগল বাটনের জন্য ধারক তৈরি করব<label>

<span>
  <input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
  <label for="feature_cb" id="label_for_some_feature">
    <img alt="Stylish image" src="/images/icons/feature.png">
  </label>
</span>

এরপরে আমরা আমাদের বোতাম টগল করার জন্য ফাংশনটি সংজ্ঞায়িত করব। আমাদের বোতামটি আসলে স্বাভাবিক <label>যা আমরা টগলিংয়ের মান উপস্থাপন করতে স্টাইলিং করব।

function toggleButton(button) {

var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).

if (isChecked)
    $(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
    $(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}

ফাংশন পুনরায় ব্যবহারযোগ্য উপায়ে প্রয়োগ করা হয়। আপনি এটি তৈরি করেছেন এক, দুটি বা এমনকি তিনটি টগলব্যাটনের বেশি ব্যবহার করতে পারেন।

... এবং পরিশেষে ... এটি প্রত্যাশা অনুযায়ী কাজ করার জন্য, আমাদের টোগল ফাংশনটি আমাদের সংশোধিত <label>বোতামের একটি ইভেন্টের ("পরিবর্তন" ইভেন্ট) সাথে আবদ্ধ করা উচিত (এটি clickইভেন্ট বেক হবে we আমরা checkboxসরাসরি পরিবর্তন করছি না , তাই কোনও changeইভেন্ট নেই) no জন্য বরখাস্ত করা যেতে পারে <label>)।

$(document).ready(function(){

    $("#some_feature_label").click(function () {
        toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
    });

    $("#some_other_feature_label").click(function () {
        toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
    });

});

সিএসএসের সাহায্যে আমরা সংজ্ঞা নির্ধারণ করতে পারি backgorund-imageবা borderকিছুতে মান পরিবর্তনের প্রতিনিধিত্ব <label>করতে পারি যখন একটি চেকবক্সের মান পরিবর্তন করার জন্য আমাদের কাজ করবে;)।

আশা করি এটি কাউকে সাহায্য করবে।

Comments

এই প্রয়োগটি মোবাইল ডিভাইসেও সঠিকভাবে কাজ করছে বলে মনে হচ্ছে, বেক। টিডিবেইলুল দ্বারা প্রস্তাবিত সিসিএস বাস্তবায়ন অ্যান্ড্রয়েডে সঠিকভাবে কাজ করছে না (অ্যান্ড্রয়েড ২.৩.৫ ডিফল্ট ব্রাউজার; একই সিস্টেমে অপেরা মোবাইল ঠিক ছিল))

— পল টি। রাউকেন

এছাড়াও, পরিবর্তে .addClass()/.removeClass() আপনি ব্যবহার করতে পারেন .toggleClass(), তবে বর্ণিত পদ্ধতি checked/ uncheckedমানগুলির জন্য ক্রিয়াগুলি স্পষ্টভাবে সংজ্ঞায়িত করে ।

— পল টি। রাউকেন

Answer 14

চেষ্টা করুন;

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

এবং নিশ্চিত করুন

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

মনে রাখবেন আপনি যখন এই কোডিং করছেন, কেবলমাত্র somename এবং someidইনপুট ট্যাগে পরিবর্তন করতে পারেন, অন্যথায় এটি কাজ করে না।

Answer 15

যতদূর আমি উত্তরটিও সন্ধান করছিলাম এবং সিএসএস দিয়ে এটি সম্পাদন করতে চেয়েছিলাম। আমি সিএসএস নিনজা এর সমাধান পেয়েছি এটি একটি দুর্দান্ত ইমপ্লিমেন্টেশন <input type="checkbox">এবং কিছু সিএসএস লাইভ ডেমো ! যদিও এটি ইন্টারনেট 8 কাজ করছে না আপনি বাস্তবায়ন হতে পারে selectivizr ! এবং ফিক্স সিএসএস যেখানে ব্যবহারসমূহ opacityথেকে filterএটা আইই কাজ করা।

সম্পাদনা 2014:

নতুন টগল বোতামগুলির জন্য আমি লায় ভারো ব্লগে আইওএস চেকবাক্সের সাথে দৃশ্যত অনুরূপ সমাধান পেয়েছি found