• かちびと.net

    HTML5製のWebサイト向けUIフレームワーク・Kendo UIモバイル版の日本語サンプル作ったので公開します。若干弱い気もしますが、選択肢の一つという事で。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTML5製のWebサイト向けUIフレームワーク・Kendo UIモバイル版の日本語サンプル作った

スポンサーリンク

以前ご紹介した、HTML5製のWebサイト
向けUIフレームワーク・Kendo UIの
モバイル版に触ってみたついでに
日本語化してサンプルにしました。
まだベータ版みたいなので、実用
段階では無さそうですが。

Kendo UIのモバイル版です。去年の夏くらいに記事書いたので合わせてご参照頂ければ幸いです。

タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI

選択肢はずいぶん増えてきましたが、これもその一つという事で・・・jQueryベースで動作しますので、JQMの代替として覚えておいてもいいんじゃないでしょうか。

基本的には有償版の販売がビジネスモデルみたいですが、OSSとしてGPLライセンスで配布されています。モバイル版もそんな感じ。

Kendo UI Mobile


モバイルバージョンです。触った感触として、まだ他フレームワークに比べて物足りなさはありましたが、これはこれで使いやすい印象もありました。ソースが少なくて済むっぽい。

ともあれ、デモを触らないとピンと来ないと思いますので作りました。

一応日本語化しましたが、日本向けに表示、レイアウトを最適化したわけではありませんので、サンプルはその程度のものって事でご了承下さい。

Sample ※別窓で開きます

スマフォないよ、って方はKendo UI本家でPC閲覧用を作っていますのでそちらで確認してください。

スクリーンショット


エミュレーターですが、一応スクショです。

使い方

基本的にはjQueryベースで動作しますので本体とKendo UIプラグインを読み込みます。

    <script src="jquery.min.js"></script>
    <script src="kendo.mobile.min.js"></script>
    <script src="content/shared/js/console.js"></script>

必要に応じてモジュールライブラリを読み込む、という形式。

実装には定番のカスタムデータ属性を使います。

<ul data-role="listview" data-type="group" data-style="inset">

↑ リストとグループ化

<li><a data-role="button" style="background-color: green">グリーン</a></li>

↑ ボタンもdata-role=”button”とすれば良いだけ。

<input id="wink-switch" />

↑ こちらはスイッチボタンです。中の文字を変える場合は↓ のようにする。

<input id="subscription-switch" />
<script>
    function mobileSwitchInit() {
        $("#subscription-switch").kendoMobileSwitch({
            checked: true,
            onLabel: "はい",
            offLabel: "いいえ"
        });
    }
</script>

セレクタを指定してオプション設定をします。※ただし、日本語だと枠に収まりませんでしたのでcssの調整が必要っぽいです。

若干サンプルの数が少ない気がしますが、今後もう少し増えるんですかね・・・ダウンロードは無料ですが、ユーザー登録(無料)が必要です。ドキュメントやダウンロードは以下よりどうぞ。

Kendo UI Mobile

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services