0

I tried to figure out how battlelog manages to start native application from inside Edge browser and found the following:

<button class="btn btn-primary" data-intro-step="4" data-bind-action="matchmake-mp-role" data-track="playnow.matchmake.cqclassic.join" data-bind-intro="next" data-expansion="0" data-game="2048" data-platform="1" data-role="1" data-experience="1">
Play now
</button>

Please help me to understand how these attributes like data-bind-action, etc. have been added to button element as well as how are them being processed?

Zorgiev
  • 794
  • 1
  • 7
  • 19
  • 2
    see this https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes – prasanth May 05 '17 at 08:51
  • If you want to use jquery see this https://api.jquery.com/jquery.data/ – Super User May 05 '17 at 08:55
  • Custom attributes are just a way of storing *valid* data in a DOM element that has no inherent meaning or visual property. How they are added and how they are used (or processed) can't be determined by just the HTML you are displaying. – jeremye May 05 '17 at 08:56

1 Answers1

-2

The data-* attribute are custom attributes; they're only use to store specific data that the web developer will use it in tater time in his code in JavaScript.

<button id="mybutton" class="btn btn-primary" data-intro-step="4" data-bind-action="matchmake-mp-role" data-track="playnow.matchmake.cqclassic.join" data-bind-intro="next" data-expansion="0" data-game="2048" data-platform="1" data-role="1" data-experience="1">
Play now
</button>

For example to access the data-intro-step value from jquery, developer may type $('#mybutton').attr('data-intro-step') or $('#mybutton').data('data-intro-step') and use it with somethiing in his code.

Usually they're add from php or a js framework like jquery-plugins or angularjs, and used in js. put you could also add them from js to use it later.

Abozanona
  • 2,261
  • 1
  • 24
  • 60
  • 1
    "The data-* attribute is not a standard" — [It is a standard](https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes) – Quentin May 05 '17 at 08:59
  • "Usually they're add from php" — That's a very narrow view of the world. – Quentin May 05 '17 at 09:00