How to create plugins in Sizzle?

Asked

Viewed 140 times

3

I’m looking for some way to create plugins on Sizzle JS. I searched a lot and did not find a good tutorial and not someone to explain me.

javascript
  • 2

    It’s nice to know that Sizzle is only a library that is part of jQuery. It is responsible for selecting browser DOM elements that do not have the most modern API. What kind of plugins were you thinking of creating?

  • I wanted to make plugins like: ". home:display(inline)", ". home:inline" and if you have another would also be good :D

2 answers

2

Checking the documentation here, I thought the easiest is:

JS:

$.extend($.expr[':'],{
  inline: function(elemento) {
    console.log(elemento, $(elemento).css('display'))
    return $(elemento).css('display') === 'inline';
  }
});
$(':inline').addClass('mostra-inline');

HTML for testing:

<div id="teste">
  <div class="inline">essa DIV é inline porque o CSS definiu</div>
  <br><br>
  <span>esse SPAN é inline por default</span>
  <br><br>
  <div>DIVs sao block</div>
</div>

see a functional example in jsfiddle

  • Luiz, so you are using jQuery, my intention is to use Sizzle =P But thank you for responding

  • I never did with pure Sizzle. give a look and put the answer

2


The answer, without jquery

example of filter extension:

Sizzle.selectors.filters.vazio = function( elem ) {
    return elem.childElementCount === 0;
};

a functional example in jsfiddle

according to the documentation, it can be extended

  • Selectors: 
    Sizzle.selectors.find.NAME = function( match, context, isXML ) {}
  • Filters:
    Sizzle.selectors.preFilter.NAME = function( match ) {}
    or 
    Sizzle.selectors.filter.NAME: function( element, match1[, match2, match[3], ...]
  • Attributes:
    Sizzle.selectors.attrHandle.LOWERCASE_NAME = function( elem, casePreservedName, isXML ) {}
  • Pseudo Selectors:
    Sizzle.selectors.pseudos.NAME = function( elem ) {}

Full documentation

  • Our, thank you \o/ If it’s not too much to ask, wanted an example of how I use each rsrs.

  • Your second item ("Filters") would not be something like Sizzle.selectors.filters.NAME? (you repeated find) And are the function parameters the same or not? (in his first example the argument was elem, in the second the arguments were match, context, isXML)

  • ta certo @mgibsonbr . correct

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.