HTML5经量级框架jQueryMobile-7.1

  %h2= "第八章 经量级框架 jQuery Mobile"
  %section
  %p.jquery-mobile
    %article.access
      %p= "dataset自定义属性"
      %div{:id => 'mobiletitle', :class => "mobiletitle", 'data-category' => '前端技术', 'data-title' => 'HTML5移动指南', 'data-time' => '2011-11-10', 'data-author' => 'sankyu' }

      %p{'data-role' => 'page'}= "data-role 功能角色"
      %p{'data-title' => 'title'}= "data-title 试图标题"
      %p{'data-transition' => 'top'}= "data-transition"
      %p{'data-rel' => 'true'}= "data-rel 试图浮动"
      %p{'data-icon' => 'nil'}= "data-icon"
      %p{'data-iconpos' => 'iconpos'}= "data-iconpos "
      %p{'data-inline' => 'inline'}= "data-inline "
      %p{'data-type' => 'type'}= "data-type "
      %p{'data-rel' => 'back'}= "data-rel "
      %p{'data-add-btn-text' => 'btn'}= "data-add-btn-text "
      %p{'data-back-btn-text' => 'text'}= "data-back-btn-text "
      %p{'data-postion' => 'text'}= "data-postion "
      %p{'data-fullscreen' => 'text'}= "data-fullscreen "
      %p{'data-native-menu' => 'text'}= "data-native-menu "
      %p{'data-placeholder' => 'text'}= "data-placeholder "
      %p{'data-inset' => 'text'}= "data-inset "
      %p{'data-split-icon' => 'text'}= "data-split-icon "
      %p{'data-split-theme' => 'text'}= "data-split-theme "
      %p{'data-filter' => 'text'}= "data-filter "

  $mobil = document.getElementsByClassName('mobiletitle')[0]
  if ($mobil.dataset)
     alert($mobil.dataset.category)
  else
    alert("不支持")