TypeScript
jQuery Mobileにはドロップダウンは標準でもあるのですが、いろいろ痛い目に合わされるので、ボタンとポップアップで作ってみます /* * ドロップダウン */ interface DropdownOptions { alignRight?: boolean; onSelected?: (selItem: Dropdown.Item) => voi…
以前にHandsonTableの編集でPopupを表示して・・・とやりましたが死角がありましたその1 Popup表示後のタブキー押下で制御がHandsonTableに戻ってしまい、裏でセル選択が移動します 対策としてキー入力禁止メソッドを作成しておきます 合わせてカレントセル…
スクロールするページで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で表示すると日本語入力できません キーボードに負けます 公式のデモでもそうなので、現状どうしようもないのでしょうそこで別途オーバーラップな子ウィンドウをでっち…