Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maxpoletaev/jquery-bem
[Deprecaetd] Plugin for comfortable work with BEM DOM from jQuery
https://github.com/maxpoletaev/jquery-bem
Last synced: about 2 months ago
JSON representation
[Deprecaetd] Plugin for comfortable work with BEM DOM from jQuery
- Host: GitHub
- URL: https://github.com/maxpoletaev/jquery-bem
- Owner: maxpoletaev
- Created: 2013-08-30T10:26:48.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-01-25T16:42:40.000Z (almost 8 years ago)
- Last Synced: 2024-10-11T12:27:59.125Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 64
- Watchers: 6
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Please, read the [deprecation notice](https://github.com/zenwalker/jquery-bem/issues/22)**
# jQuery.BEM
jQuery.BEM is small jQuery plugin for comfortable working with HTML made by BEM methodology.
## Selecting elements
```html
Coffe
$2
Tea
$1
```
### Getting block
```javascript
$('.b-product:first').elem('name').block(); // $('.b-product:first > .b-product__name').closest('.b-product')
```
### Getting element
```javascript
$('.b-product:first').elem('name').block(); // $('.b-product:first > .b-product__name').closest('.b-product')
```
## Working with modifiers
### Setting modifier
```html
...
```
```javascript
$('.b-product').mod('theme', 'premium'); // will get .b-product.b-product_theme_premium
$('.b-product').mod('premium', true); // will get .b-product.b-product_premium
```
### Remove modifier
```html
...
```
```javascript
$('.b-product').delMod('theme', 'premium'); // $('.b-product').removeClass('b-product_theme_premium');
$('.b-product').delMod('theme'); // remove the modifier "theme" of any value (.b-product_theme_*)
$('.b-product').mod('theme', false); // same
```
### Getting modifier
```html
...
```
```javascript
$('.b-product').mod('theme') // will return "premium"
$('.b-product').mod('discount'); // will rerurn null (non-existent modifier)
```
### Checking modifier
```html
...
```
```javascript
$('.b-product').hasMod('theme'); // true
$('.b-product').hasMod('theme', 'premium'); // true
$('.b-product').hasMod('theme', 'discount') // false
```
### Toggle modifier
```html
...
```
```javascript
$('.b-product').toggleMod('theme', 'premium', 'discount');
$('.b-product').hasMod('theme', 'premium'); // true
$('.b-product').hasMod('theme', 'discount') // false
$('.b-product').toggleMod('theme', 'premium', 'discount');
$('.b-product').hasMod('theme', 'premium'); // false
$('.b-product').hasMod('theme', 'discount') // true
```
### Filtering by modifier
```html
...
...
```
```javascript
$('.b-product').byMod('theme', 'premium'); // instead of $('.b-product.b-product_theme_premium')
$('.b-product').byNotMod('theme', 'premium'); // instead of $('.b-product').not('.b-product_theme_premium')
$('.b-product').byMod('theme'); // filtering by modifier "theme" of any value (?)
```
### Events
You can subscribe to `setmod` and `delmod` events for obtain modifier data at the time thier setting or removal.
```js
$('.block').on('setmod', function(e, modKey, modVal) {});
$('.block').on('delmod', function(e, modKey, modVal) {});
```
## Switching context
Use `.ctx` function for change block context. For sample:
```html
```
```js
$('.block').elem('elem').ctx('some-block').elem('elem');
```