jQuery Mobile - Badge Plugin

2014-06-29 /Development #jQuery Mobile

この記事は最終更新日から10年以上経過しています。

先日jQuery Mobileの書籍を執筆させていただきました。その中でjQuery Mobileで扱えるプラグインの紹介コーナーがあるのですが、自分でもいくつかプラグインを作ってみてご紹介しています。

このプラグインはツイッターでいうところのRetweetやFavoriteのようなバッジをリストビューの右肩に表示させるプラグインになります。

リポジトリ

https://github.com/is8r/jquerymobile-badge

デモ

http://is8r.github.io/jquerymobile-badge/htdocs/

使い方

プラグインをヘッダにインクルードして

コピーしました
<script src="jquery.mobile.badge.js"></script>
<link href="jquery.mobile.badge.css" rel="stylesheet" />

バッジを追加したいlistview内のli要素に対してdata-badge="like"などを追加します。

コピーしました
<ul data-role="listview">
  <li data-badge="fav"><a href="#">data-badge="fav"</a></li>
  <li data-badge="like"><a href="#">data-badge="like"</a></li>
</ul>

jQuery Mobileの本を書きました。

jQuery Mobileスマートフォンサイト・デザイン Webクリエイターが身につけておくべき新・100の法則。 (新・100の法則。シリーズ https://www.amazon.co.jp/dp/B00LWTUNDW?tag=blg12pxcom-22

ボタンやリストの作り方などの初歩的な部分から解説する比較的やさしい内容の本になっています。紹介しているバージョン1.4は以前のバージョンと比べてボタンなどのスタイルの指定がデータ属性ではなくマルチクラスで指定するように変更されていたり、テーマが白黒の2種類に変わったりと、結構変わっている部分があります。よろしければお手に取っていただけますと幸いです。