jjzjj

javascript - 如何将 jQuery 用于预定义事件？

coder 2024-05-12 原文

在 jQuery 插件中实现预定义事件是否有任何标准规则？

例如Zebra Accordion的特例插件(一个用于 jQuery 的微型 Accordion 插件)或任何其他插件定义了一些事件，如下所示:

Zebra Accordion 事件:

onClose: Event fired after a tab is collapsed.

onOpen: Event fired after a tab is collapsed.

在这种情况下，如果我想添加一个带有特殊 Font Awesome 的 div collapsed(关闭，折叠状态)时框标题后的字符(例如 fa-chevron-down)，然后删除该字符并用新字符(例如 fa-chevron-up)替换它靠近展开(打开状态)时的框标题。我想最终添加一些功能，如 jQuery Accordion给它。我试过下面的代码，但似乎有问题:

$('.Zebra_Accordion').on('onOpen', function(e) {
      $(this).append( "<span class='fa fa-chevron-down'></span>" );
  });
  
$('.Zebra_Accordion').off('onClose', function(e) {
      $(this).append( "<span class='fa fa-chevron-up'></span>" );
  });

最佳答案

大多数 jQuery 插件都有一个您传入的选项对象。 在这里您可以定义要设置的属性，包括事件处理程序。

documentation对于斑马 Accordion 事件，插件提供的每个事件都表示:

The callback function takes 3 arguments:

  • the tab's position in the accordion (0 based)
  • the associated title element, as a jQuery object
  • the tab, as a jQuery object

我刚刚给了他们 3 个合适的名字，并使用了第二个参数(我随意命名为 hdr )。

如文档中所述 hdr返回的参数是一个包含 <dt> 的 jQuery 对象元素(至少在我的例子中)。在这个对象上，我调用了 jQuery 函数 .find() 找到里面的元素 <dt>拥有 fa-chevron-*类，然后我切换类 span通过链接更多的 jQuery 函数。

如评论中所述，您可以完美地在线完成此操作，例如:

var accordian = new $.Zebra_Accordion($('.Zebra_Accordion'), {
    collapsible: true,
    onBeforeOpen: function(index, hdr, body) {
       hdr.find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
    },
    onBeforeClose: function(index, hdr, body) {
       hdr.find(".fa-chevron-up").removeClass('fa-chevron-down').addClass('fa-chevron-down');
    }
});

在这种特殊情况下，我会这样做，但我想说明当处理程序有更多代码时该怎么做，在这种情况下，将它们分开的函数可以提高可读性。

不要忘记使用 console.log() 很多 - 它是 JavaScript 开发人员最好的 friend 。

为了检查 Zebra Accordion 为我提供了什么，我首先执行了以下操作:

onBeforeOpen: function(index, hdr, body) {
       console.log("onBeforeOpen", index, hdr, body);
},

此输出显示在浏览器的开发人员控制台中。

这是我将所有内容放在一起的演示: 

$(function() {
  
  // add default chevrons here so they only get appended once
  $(".Zebra_Accordion dt").append("<span class='chevron fa fa-chevron-down'></span>");

  // set up the according options
  var accordian = new $.Zebra_Accordion($('.Zebra_Accordion'), {
    collapsible: true,
    onBeforeOpen: showCollapseChevron,
    onBeforeClose: showExpandChevron
  });
  
  function showExpandChevron(index, hdr, body) {
      hdr.find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
  }
  
  function showCollapseChevron(index, hdr, body) {
      hdr.find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
  }
  
});
dl.Zebra_Accordion { width: 100% }
dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px }
dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0 } 
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000 }

.chevron {
  margin-left: 5px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion/dist/zebra_accordion.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion/dist/zebra_accordion.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<dl class="Zebra_Accordion">
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
</dl>

外部演示 https://jsfiddle.net/8wzvucgb/

关于javascript - 如何将 jQuery 用于预定义事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46118192/

javascript预定AccordioncodeZebra_Accordionjquerydomjquery-pluginsjquery-events

有关javascript - 如何将 jQuery 用于预定义事件？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  4. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  5. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  6. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  7. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  8. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  9. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  10. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

随机推荐