コンピュータ情報

2017年10月5日木曜日

UI,data-icon

data-icon
ボタンに対してdata-iconを付加することことでボタンにアイコンを付けることが可能です。
たとえば削除アイコンをつけたい場合は「data-icon=”delete”」を追加します。
Delete
他にも、以下のような値が指定可能です。
•data-icon=”arrow-l”
•data-icon=”arrow-r”
•data-icon=”arrow-u”
•data-icon=”arrow-d”
•data-icon=”delete”
•data-icon=”plus”
•data-icon=”minus”
•data-icon=”check”
•data-icon=”gear”
•data-icon=”refresh”
•data-icon=”forward”
•data-icon=”back”
•data-icon=”grid”
•data-icon=”star”
•data-icon=”alert”
•data-icon=”info”
•data-icon=”home”
•data-icon=”search”
•data-icon=”bars”
•data-icon=”edit”
アイコンの表示位置はdata-iconpos属性で制御できます。

webcreativepark.net
http://www.webcreativepark.net/jquerymobile/buttons/data-icon/

positionabsolute で中央に配置するやり方

positionabsolute で中央に配置するやり方 YouKnow.jp
CSS
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:好きな値;
height:好きな値;
中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。
これで、画面中央に表示されているはずです。
画面中央ではなく、親要素の中央に要素を表示させたい場合には、
要素の親要素に、position:static(初期値)以外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。
その親要素を基準にヨコ・タテ中央配置になります。
サンプルではtop.left.right.bottomに0を指定していますが、これらの数値をいじっても問題はありません。
ただし、top.left.right.bottomの初期値はautoになっているため、
これを解除するために指定しています。
そのため、topだけに80pxを指定するとタテ・ヨコ画面中央からタテのみ80px下に行く指定することも可能です。
margin:auto;をmargin:0 auto;にすれば、ヨコ方向のみ中央寄せにすることもできます

YouKnow.jp
http://youknow.jp/web/css-position

jQuery UI

jQuery UI – All Versions
jQuery UI - Git Builds
UNSTABLE, NOT FOR PRODUCTION
jQuery UI git build - uncompressed, theme
jQuery UI 1.12
jQuery UI 1.12.1 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.12.0 - uncompressed, minified, theme
jQuery UI 1.12.0-rc.2 - uncompressed, minified, theme
jQuery UI 1.12.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.12.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.11
jQuery UI 1.11.4 - uncompressed, minified
Themes
black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.11.3 - uncompressed, minified, theme
jQuery UI 1.11.2 - uncompressed, minified, theme
jQuery UI 1.11.1 - uncompressed, minified, theme
jQuery UI 1.11.0 - uncompressed, minified, theme
jQuery UI 1.11.0-beta.2 - uncompressed, minified, theme
jQuery UI 1.11.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.10
jQuery UI 1.10.4 - uncompressed, minified
Themes
black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.10.3 - uncompressed, minified, theme
jQuery UI 1.10.2 - uncompressed, minified, theme
jQuery UI 1.10.1 - uncompressed, minified, theme
jQuery UI 1.10.0 - uncompressed, minified, theme
jQuery UI 1.10.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.10.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.9
jQuery UI 1.9.2 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.9.1 - uncompressed, minified, theme
jQuery UI 1.9.0 - uncompressed, minified, theme
jQuery UI 1.9.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.9.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.8
jQuery UI 1.8.24 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.8.23 - uncompressed, minified, theme
jQuery UI 1.8.22 - uncompressed, minified, theme
jQuery UI 1.8.21 - uncompressed, minified, theme
jQuery UI 1.8.20 - uncompressed, minified, theme
jQuery UI 1.8.19 - uncompressed, minified, theme
jQuery UI 1.8.18 - uncompressed, minified, theme
jQuery UI 1.8.17 - uncompressed, minified, theme
jQuery UI 1.8.16 - uncompressed, minified, theme
jQuery UI 1.8.15 - uncompressed, minified, theme
jQuery UI 1.8.14 - uncompressed, minified, theme
jQuery UI 1.8.13 - uncompressed, minified, theme
jQuery UI 1.8.12 - uncompressed, minified, theme
jQuery UI 1.8.11 - uncompressed, minified, theme
jQuery UI 1.8.10 - uncompressed, minified, theme
jQuery UI 1.8.9 - uncompressed, minified, theme
jQuery UI 1.8.8 - uncompressed, minified, theme
jQuery UI 1.8.7 - uncompressed, minified, theme
jQuery UI 1.8.6 - uncompressed, minified, theme
jQuery UI 1.8.5 - uncompressed, minified, theme
jQuery UI 1.8.4 - uncompressed, minified, theme
jQuery UI 1.8.3 - uncompressed, minified, theme
jQuery UI 1.8.2 - uncompressed, minified, theme
jQuery UI 1.8.1 - uncompressed, minified, theme
jQuery UI 1.8.0 - uncompressed, minified, theme
jQuery UI 1.7
jQuery UI 1.7.3 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.7.2 - uncompressed, minified, theme
jQuery UI 1.7.1 - uncompressed, minified, theme
jQuery UI 1.7.0 - uncompressed, minified, theme

jQuery UI
http://code.jquery.com/ui/

連載：jQuery Mobile入門
第1回　jQuery Mobileページの基本構造を理解しよう
山田祥寛
2012/01/20
去る2011年はスマートフォンの年であった。
猫も杓子（しゃくし）も……といっては失礼かもしれないが、
多くの人がスマートフォンに興味を持ち、＠ITをはじめ、IT関連のサイトでも連日のように、スマートフォンの記事があふれかえった。
恐らくこの流れが2012年も続くことはほぼ間違いなく、
伴い、スマートフォンに対応したWebアプリケーション開発のニーズもますます増えてくるはずだ。
もっとも、開発者にとって対応するデバイスが増えることは、アプリケーションの可能性が広がるという意味で刺激的なことであると同時に、
デバイスに適したデザインやデバイスごとの検証を強いられるという意味で苦役でもある。
デスクトップの世界でも似たような問題はあったが、スマートフォン（モバイル）の形態はより多彩であり、
主なデバイスに対象を絞ったとしても、全てに対応するコードを一から準備するのは、あまり現実的でない。
そこで登場するのが、スマートフォン対応のフレームワーク／ライブラリだ。
よく聞かれるものには、以下のようなものが存在する。
ライブラリ名概要
Sencha Touch ExtJSをベースとしたJavaScriptフレームワーク。JavaScript中心の記述が特長
jqTouch スマートフォン開発に対応したjQueryプラグイン
iUi iPhoneに特化したUI開発ライブラリ
qooxdoo クロスプラットフォーム対応のJavaScript開発フレームワーク
スマートフォン対応のJavaScriptフレームワーク／ライブラリ
これらのフレームワーク／ライブラリを利用することで、デバイスの違いを（全くでないにせよ）あまり開発者に意識させることなく、
標準的な枠組みでスマートフォン対応のアプリケーションを開発できるようになる。
スマートフォン対応のフレームワークは歴史も浅く、まだまだデファクト・スタンダードといえるものはないものの、
現時点で最有力候補の一角と目されるのが、本連載のテーマでもある「jQuery Mobile」だ。
■jQuery Mobileとは？
jQueryそのものについては本稿の読者諸氏であれば、すでに既にご存じであろう――JavaScriptライブラリのデファクト・スタンダードだ。
「Write Less, Do More（よりシンプルなコードで、より多くの処理を）」をモットーに、シンプルな構文でありながら機能性も高いことから、近年急速にユーザー数を増やしている。何千、何万にも及ぶプラグインによって、自分に必要な機能を自在に拡張できるのも、人気を後押ししている一因だろう。また、ここ数年では、ASP.NET（Visual Studio）やRuby on RailsでもjQueryを標準ライブラリとして採用したことで、サーバサイド・フレームワークとの親和性も高まり、採用のけん引力ともなっている（jQueryについて詳しくは、拙著「ASP.NETプログラマーのためのjQuery入門」も参照いただきたい）。
もっとも、jQuery Mobileは、そのjQueryのモバイル版かというと、ちょっと違う。
jQuery Mobileの用途は、主に「デバイスに依らず、スマートフォン的なUIを作成する」ことに置かれており、
目的からすると、むしろjQuery UIのモバイル版といえるだろう。
jQuery UIが専らデスクトップのWebアプリケーション向けのUIを提供するのに対して、jQuery Mobileはスマートフォン・アプリケーションを対象にUI部品を提供しているわけだ。
jQuery Mobileを利用することで、あらかじめ決められたマークアップに従うだけで、モバイル・デバイスに適したページを開発できる（基本的なページであれば、JavaScriptのコードすら必要ない！）。
jQuery Mobileは、昨年11月にようやく1.0リリースに到達したばかりであるが、現時点で以下のようなデバイスに対応している。
一部のデバイス／機能については、対応に制約もあるようであるが、それでも現実的な用途には、ほぼ問題ないだろう。
•Apple iOS
•Android
•Windows Phone／Windows Mobile
•Kindle 3 and Fire
•Blackberry
•Palm WebOS
•Nokia Symbian
•Opera Mobile／Desktop
•Chrome（デスクトップ）
•Firefox（デスクトップ）
•Internet Explorer（デスクトップ）
また、jQueryをベースとしているので当然であるが、jQueryとの親和性にも優れており、独自の機能を実装するにも、jQueryの知識をそのまま活用できる。
本連載では、そのようなjQuery Mobileについて、一から解説していくものである。
まず初回の本稿では、jQuery Mobileの導入から基本的なページの開発までを紹介する。

@IT
http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_01/jqmobile_01_01.html