cloudpackブログ - MT5 記事編集画面 jQueryで入力チェックを入れた際のsubmitの挙動
こんにちは。 職人見習いの齋藤です。 ある案件でMT5の記事編集画面に用意したカスタムフィールドに 入力チェックを加える必要があったので、MTAppjQuery プラグインをインストールし、 form の submit()（更新ボタン押下時）に入力内容をチェックし、 問題があった場合は return false で submit をキャンセルさせ、 入力内容を修正するまで submit を無効にするという処理を追加しました。 実際に動作を確認してみると、入力チェックで submit をキャンセルするという動作は 問題なく行われたのですが、キャンセル後に再度更新ボタンを押下しても submit が動作しないという現象が発生しました。 特にスクリプトでのエラーも見られず、その他の機能は問題なく動作していたのですが、 更新ボタン右のプレビューボタン（同じくsubmit）も動作しなくなっていました
cloudpackブログ - Javascriptでテキストフィールドからパスワードフィールドに変更する
こんにちは。 職人見習いの高嶋です。 用途はあまりないかもしれませんが、Javascriptでテキストフィールドからパスワードフィールドに変更するTipsです。 そもそも何故こういうニーズが発生したかといいますと、iPadでのWebコンテンツ制作過程でBlueTooth対応バーコードリーダーで読み込まれた英数字をこのフィールドにINPUTして且つリーダー機能のEnterで処理を発生させるというものがありました。 問題はiPadのソフトウェアキーボードが日本語変換モード状態でリーダーを使用すると文字列を読み込んだ後の自動Enter機能がForm Submitではなく文字変換候補確定に充てられてしまう事でした。 その為、無理はありますがEnter機能を効かせたい場合に日本語モードの存在しないパスワードフィールドに切り替える必要がありました。 ※前提として最初はテキストフィールドで使用しなければ
cloudpackブログ - jQuery Thickboxの設定方法
こんにちわ。 職人見習いの小森です。 今回は、jQuery ThickBoxについて紹介します。 配布ページより、以下のファイルをダウンロードしてきます。 http://jquery.com/demo/thickbox/ jquery-latest.js loadingAnimation.gif thickbox.css thickbox.js thickbox.js 8行目にローディング画像のパスを自分の環境に合わせます。 var tb_pathToImage = "images/loadingAnimation.gif"; 使用するファイルを読み込みます。 サムネイル表示した画像に拡大画像を表示するリンクを付けます。 一つの場合は表示されませんが、複数表示した場合rel属性を同じ値にするとprevとnextのリンクも表示されます。 HTML内にある非表示にしているHTMLをリンクをクリ
cloudpackブログ - jQueryのリサイズイベントを使う
こんちには。 職人見習いの木村です。 最近では、WebサイトのFLASH離れが進み、HTMLでのフルスクリーンサイトも増えつつあります。 フルスクリーンサイトにおいて、必要になってくるのがウィンドウのリサイズイベントです。 今回は、jQueryでリサイズイベントを使ってみます。 jQueryでのリサイズイベントは以下のようにして、実装できます。 $(要素).resize(fn); ▽サンプルコード ▼JS $(function(){ resizeHandler(); $(window).resize(function(){ resizeHandler(); }); }); function resizeHandler(){ var h = $(window).height()-30 $("#container").height(h); } ▼HTML
cloudpackブログ - 実験くん（jQueryでグラフィカルEC2コンソール）
実験くん（jsPlumbでAWSの構成を可視化）の記事でEC2まわりの構成の視覚化をしましたが、 今回はさらに発展させて、EC2まわりのサービスの結合をしてみました。 ・実施内容 EC2、SGに加え、ELB、EBSのサービスを追加しました サービスはDrag&Dropで移動できます 移動した位置はCookieで記憶しています 各サービスの中見出しはアコーディオンです 参照だけではなく、実際のサービス接続を操作できます EC2とELB,EBSの間は未使用端点からのDrag&Dropで結合ができます コネクタをダブルクリックするとサービス結合を切断します 今回は、ソースの量が多くなってしまったので割愛して、実際に操作したところを スクリーンキャストで紹介したいと思います。 vimeoのサイトで直接みるとHD画質で再生できます。 AWS Plug by jQuery http://vimeo.c
cloudpackブログ - jQuery公式プラグイン「jQuery Templates」を使う
こんちには。 職人見習いの木村です。 jQueryの公式プラグインはいくつかありますが、今回は、テンプレートエンジンである「jQuery Templates」の使い方をご紹介します。 まずは、jQueryとjQuery Templatesを読み込みます。 次に、HTMLに以下のように、テンプレートを差し込む場所と、テンプレート自体を記述していきます。 そして、そのテンプレートに渡す値をJSの方で指定していきます。 $.getJSON('hoge.json', function(data) { $('#item').tmpl(data).appendTo('#container'); //id='container'にテンプレートid='item'を挿入する。 } JSON等などでAjax通信を必要とするアプリケーションを制作するときに、使えます。 ※この記事は、なかの人（moresmile
cloudpackブログ - 使用したjQueryプラグイン vol.3
こんにちは。 職人見習いの高嶋です。 以前案件で利用したjQueryプラグインをメジャーマイナー関わらず報告していきます。 ○cvi_busy_lib.js ダウンロード：busy.js (javascript loading indicators) jQueryプラグインではないですが、cvi_busy_lib.jsのライブラリの紹介です。 通信中などによく使用される、ローディング画面を実現させるライブラリです。 上記URLからzipファイルをダウンロードしてドキュメントルートに置きます。 HTMLのHEADERタグ内に以下の記述をします。 そして、例えば非同期通信時などの際に、以下のように記述します。 // ビジー状態呼び出し var lval = getBusyOverlay( document.body, {color:'black', opacity:0.5, text:'loa
cloudpackブログ - 使用したjqueryプラグイン vol.2
こんにちは。 職人見習いの高嶋です。 以前案件で利用したjqueryプラグインをメジャーマイナー関わらず報告していきます。 jquery.alerts.js ダウンロード：jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) javascriptの標準関数でもalert()やconfirm()はありますが、見た目があまり良くないです。 さらに、iPadやiPhone用となると、ブラウザがSafariとなりますので、ダイアログのタイトルにファイル名が表示されてしまいます。 そこでこのプラグインを利用しました。 HTMLのHEADERタグ内に以下の記述をします。 ○アラートを表示する jAlert('アラートに表示する内容', 'アラートのタイトル', function(r) {確認後の処理}); ○確認ダイアログを表示する
cloudpackブログ - 使用したjQueryプラグイン vol.1
こんにちは。 職人見習いの高嶋です。 以前案件で利用したjqueryプラグインをメジャー、マイナー関わらず報告していきます。 jquery.cookie.js ダウンロードはコチラ http://plugins.jquery.com/project/Cookie ここで紹介する必要もないくらい有名なプラグインです。 JavaScriptでクッキーを扱えます。 HTMLのHEADERタグ内に以下の記述をします。 その上でクッキーに値を保存する場合は以下のように書きます。 $.cookie('key', 'value'); そしてクッキーに保存されている値を取得する場合は以下のように書きます。 $.cookie('key'); また、クッキーに値を設定する際に保存期間を仕込む事ができます。 $.cookie('key', 'value', { expires: 保存日数 }); 逆に保存された
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
