كيفية تبديل المحتوى في أزرار واجهة المستخدم الدلالية؟

https://stackoverflow.com//questions/23032833

21-12-2019
|

سؤال

ال توثيق يقول يمكن تنسيق الزر للتبديل بين التشغيل أو الإيقاف, ، ولكن المثال المعطى هو مجرد

<div class="ui toggle button">
    Vote
</div>

والذي بطبيعة الحال لا يعمل.يكشف فحص الكود المصدري للمثال عن active تمت إضافة الفئة برمجياً.

ربما أفتقد شيئًا بسيطًا، ولكن كيف يمكنني إنشاء زر تبديل كما في هذا المثال؟ما هو بناء الجملة لتحديد ما للتبديل بين؟

المحلول

الكود أدناه يفعل السحر:

semantic.button = {};

// ready event
semantic.button.ready = function() {

  // selector cache
  var
    $buttons = $('.ui.buttons .button'),
    $toggle  = $('.main .ui.toggle.button'),
    $button  = $('.ui.button').not($buttons).not($toggle),
    // alias
    handler = {

      activate: function() {
        $(this)
          .addClass('active')
          .siblings()
          .removeClass('active')
        ;
      }

    }
  ;

  $buttons
    .on('click', handler.activate)
  ;


  $toggle
    .state({
      text: {
        inactive : 'Vote',
        active   : 'Voted'
      }
    })
  ;

};


// attach ready event
$(document)
  .ready(semantic.button.ready)
;

نصائح أخرى

أسهل طريقة لتشغيل أزرار التبديل دون أي خيارات وما إلى ذلك هي ما يلي:

$('.ui.button.toggle').state();

يجب أن يتم التبديل بين اللونين الرمادي والأخضر الافتراضيين عند النقر.انظر الإجابات الأخرى لمعرفة السلوك الأكثر تعقيدًا.تأكد من تحميل DOM وما إلى ذلك أولاً كما هو الحال مع مُهيئات واجهة المستخدم الدلالية الأخرى.

أنها بسيطة جدا،

<button class="ui toggle button active" id="tgl">Toogle button</button>

ما عليك سوى استخدام نقرة jquery الكلاسيكية لتبديل الفصل النشط وإضافة أي تغييرات أخرى تحتاجها.أعتقد أن استخدام المرحلة الدلالية هو مضيعة للوقت في هذه الحالة.

$('#tgl').click(function(){      
            $(this).toggleClass('active');
});

تعمل التعليمات البرمجية البسيطة التالية بشكل جيد مع زري تبديل مختلفين مع حدث onClick.شكرا موكيش لإلهام لي.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="../../dist/semantic.css">
<script src="../assets/library/jquery.min.js"></script>
<script src="../../dist/semantic.js"></script>

</head>
<script>

function show(b){
alert( $(b).hasClass("active"));
}

// attach ready event
$(document)
  .ready(function() {
  var $toggle  = $('.ui.toggle.button');
  $toggle
    .state({
      text: {
        inactive : 'Vote',
        active   : 'Voted'
      }
    })
  ;

})
;
</script>
<body>

<button class="ui toggle button" onclick="show(this)">
  Vote
</button>
<br/><br/>
<button class="ui toggle button" onclick="show(this)">
  Vote
</button>


</body>
</html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow