jQuery
jQuery Mobileにはドロップダウンは標準でもあるのですが、いろいろ痛い目に合わされるので、ボタンとポップアップで作ってみます /* * ドロップダウン */ interface DropdownOptions { alignRight?: boolean; onSelected?: (selItem: Dropdown.Item) => voi…
スクロールするページでcm.MsgBoxを表示した時、ヘッダやフッタのボタンを基準にcm.MsgBallonを表示した時に「あ”」ってなったので、位置固定フラグを追加します/Src/cm.ts namespace cm{ .... /* * メッセージバルーン */ export class MsgBallon { onClose…
シングルページ内でのスクロール位置の保持、復元してみます シングルページで他ページへ移動後、元ページへ戻ってきてスクロール位置が復元されていないと"イラッ"とします スクロール位置の保持と復元用クラスを作成してみます/Src/cm.ts class ScrollPos …
シングルページとはいっても、やはりアプリケーションは複数のHTMLで構成されますロケーション移動メソッドを作成します /Src/cm.ts namespace cm { "use strict"; /* * サイトのルート取得 */ let _siteRoot = ""; export function getSiteRoot(): string {…
メソッドを用意します /* * ローダー表示、表示中判定 */ export function isBusy(value?: boolean): boolean { // オフライン if (isOffline() === true) { return true; } let loader = $(".ui-loader"); if (typeof value === "undefined") { return load…
ウィンドウ下端から出てくる通知メッセージを作成してみます interface ToasterOptions { timeoutSec?: number; // 閉じるまでの秒数 top?: boolean; // 上から float?: boolean; // 浮かせて表示 } namespace Toaster { "use strict"; let _timeoutHandle =…
ファイルのアップロードなんかをするときのクルクルに進捗を付けてみますui-loaderクラスを探してプログレスバー替りのdivを挿入します ui-progress-loadingクラスをでっちあげておきます あとは$.ajaxSettings.xhr()でとれた値に合わせて幅を変更するだけで…
HandsonTableは標準で優れた編集機能を有しています カラムの設定時にreadOnly:trueとすれば正にEXCELライクな編集機能が手に入ります 引っかかることもさくサックサクに動きます エディタも色々と用意されており、もうお腹いっぱいですここでは編集開始のイ…
カラムヘッダ部にボタンを付けてポップアップなんぞ表示してみます カラムヘッダに細工をする場合は、オプションのcolHeaders: trueをcolHeaders: function()に変更してメソッド内で処理します columns: GetColumnsで指定しているtitleを削除しなくては反映…
HandsonTableのセルに色を付け、アイコンを付けてみます http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/builder/からアイコンを用意します /Src/App.css .ui-icon-tag-w:after { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3…
jQuery MobileのTable Widgetにはレスポンシブ機能があります Column Toggleを適用するとウィンドウ幅に応じてカラムが増えたり減ったりします HandsonTable Proにはカラム表示/非表示機能があるようですが、community editionにはありません 多少インチキで…
HandsonTable用にサンプルページを用意します /Views/Table/index.vbhtme /Controllers/TableController.vb /Src/table.ts /Src/app.tsApp.tsにはダミーデータを格納しておきますサーバーサイド、コントローラーはテンプレのまま HTMLの発射台機能のみなので…
HandsonTableで一覧表示→詳細入力というパターンを作ってみますまずはページを移動するメソッドを追加します /Src/cm.ts namespace cm { /* * オフライン判定 */ function isOffline(): boolean { if (window.navigator.onLine === false) { $.mobile.loadin…
数値入力です jQueryプラグインとして実装します 増減ボタンとスライダーを付加してみます/Src/cm.ts interface NumberSpinOptions { digits?: number; slider?: boolean; max?: number; min?: number; step?: number; width?: string; } interface JQuery {…
日付関連プラグインです カレンダー等入力補助のDateBox http://dev.jtsage.com/DateBox/ 日付関連のたぶんド定番Moment.js https://momentjs.com/ DateBoxにはd.tsは無いようなので自作です moment.d.tsはGitHubで取れます 手元にあるのは2.11.1とかなり古…
入力系を一通り揃えたので、次は一覧 HandsonTableは引くほど高性能なTableをお手軽に作成してくれます バージョン7以降はMITライセンスではなくなってしまったのMIT最後の6.2.2を使用します なかなかいいお値段してます NeGetでもGitHubでも取れますがバー…
Popupをもう少し拡張しておきます 位置指定オプションにx,y,x1,y1,x2,y2を追加します x,yはポップアップ中心 x1,y1はwindow左上からポップアップ左上 x2,y2はwindow右下からポップアップ右下 を指定します/Src/cm.ts /* * ポップアップ */ interface PopupOp…
入力のエラーメッセージを用意します 大した話ではないです /Src/cm.ts /* * エラーバルーン設定 */ export function errorBallon(selector?: string | JQuery, message?: string) { let target = $(".ui-error"); if (selector) { target = $(selector); } …
スクロールバープラグインです http://utatti.github.io/perfect-scrollbar/ 最新は1.4.0 d.tsも公式で用意されていますが、TypeScript2以降用のようなのでエラーになる定義はコメントアウトか型をanyにします 最初の頃はJqueyプラグインだったと記憶してい…
パネルです 横からスライドしてくるパネルですが、NuGetから落ちてくるjQuery Mobileの古いd.tsには含まれていません 仕方がないので自力で追加しますが、たいしたものではないのでcm.tsに含めてしまいます /Src/cm.ts /* * Panel */ interface PanelOptions…
ポップアップを拡張してみます/Src/cm.css /* Popup */ .ui-popup > .ui-header:after, .ui-popup > .ui-footer:after { content: ""; clear: both; display: block; } ポップアップにヘッダ、フッタを付けたときのfloat対策です/Src/cm.ts namespace cmを追…
本題の子ウィンドウを作成します 理屈は簡単で、半透明のオーバーラップ用div(position: fixed)の内側にウィンドウ枠となるdiv(position: relative)だけです クラスは.ui-subwindowとします /Src/cm.css /* Subwindow */ div.ui-subwindow, div.ui-subwindow…
かなりポンコツなjQuery Mobile 特にPopupは結構致命傷で、例えばInputを配置してAndroidで表示すると日本語入力できません キーボードに負けます 公式のデモでもそうなので、現状どうしようもないのでしょうそこで別途オーバーラップな子ウィンドウをでっち…
実際にページを作ってみます ポチッとな /Home/Index.vbhtml <html> <head> <title>Home</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8" /> </meta></meta></meta></head></html>
jQuery MobileのクソなところをCSSで修正しちゃいます。ソースフォルダは/Srcとします。 app.css アプリケーション固有のCSS cm.css 共通CSS としておきます可能な限りimportantは使わないようにしましょう 適用順を上位にしたい場合は.ui-pageとかbodyとか…
今にも消えそうなjQuery Mobileのネタを放出します jQuery Mobileは2014年以降、すっかりお亡くなりになってるモバイル用と称されるアプリケーションフレームワークです こいつをゴニョゴニョしてデスクトップ用に仕立ててみようというネタです全て使い古さ…
