jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」:phpspot開発日誌
WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」 2011年12月12日- Web-Based JavaScript Spreadsheet Software - dhtmlxSpreadsheet WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」。 次のような綺麗なデザインのテーブルを簡単に配置できます。PHPとJavaScriptで書かれていて、データなんかも自分のサーバ上においておけるのが特徴 データベースからのバインディングができたり、PDFやExcel形式でのエクスポートに対応しています。 WordPressプラグインもあるみたいなのでWordPressな方にも使いやすい 色を変えたりSUMしたりと多機能。 関連エントリ これは凄い、Excelの関数
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
twihelp.me
twihelp.me 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
デザインそのままにfacebookのウォールをサイトに埋め込めるjQueryプラグイン「fb.wall」:phpspot開発日誌
Facebook Wall - a jQuery Social Media Plugin デザインそのままにfacebookのウォールをサイトに埋め込めるjQueryプラグイン「fb.wall」 facebookのウォールとはTwitterのタイムラインのようなものですが、それを簡単にサイトの特定エレメント内に埋め込めるプラグインです。 Twitterのタイムラインを表示している方もおおいですが、facebookのタイムラインも表示させたいという場合はこれが便利に使えそうです。 デザインは次のようにそのままのデザインでページに埋め込むことが可能。 Live Demo として動作デモをカスタマイズして動かせるので試してみましょう。 コード例は次のようにIDなどをオプションしてあげればOK $('#live-demo').fbWall({ id:'pehpspot', showGuestEnt
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」:phpspot開発日誌
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 2011年02月10日- jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に実装できてしまいます。 実際のコードは次のようにとてもシンプル。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="//www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /><
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト