フォームデータの送信

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 16:31:51 | 最終更新:2015-02-11 (水) 16:31:51

参考サイトだけ残しておく。

参考サイト

小粋空間:jQueryでフォームデータを送信する方法のまとめ
小粋空間:jQueryでajax()の重複実行を回避する方法

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 16:31:51 | 最終更新:2015-02-11 (水) 16:31:51

jquery.pjax.js (defunkt 版)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-11 (水) 15:20:23 | 最終更新:2015-02-18 (水) 15:29:09

AjaxpushState を組み合わせた技術らしい。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能

とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
 

URL 変更機能

別ページの URL へ切り替える。
 

効能

ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
 

インストール

GitHub:defunkt/jquery-pjax から DL して配置。

falsandtru 版 と呼ばれる別バージョンもあるそうなので

jquery.pjax.defunkt.js

とリネームして配置。
 

使い方
ライブラリの読込
  1. <script src="jquery.min.js"></script>
  2. <script src="jquery.pjax.defunkt.js"></script>

 

ファイルの配置
index.html
  1. <body>
  2.     <div>pjax before.</div>
  3.  
  4.     <div id="container">
  5.         <div><button>pjax before.</button></div>
  6.     </div>
  7.  
  8.     <script type="text/javascript">
  9.     $( document ).ready( function() {
  10.  
  11.         $( 'button' ).click( function() {
  12.  
  13.             $.pjax({
  14.                 url: 'pjax_test.php';
  15.                 container: '#container',
  16.                 fragment:  '#container_new'
  17.             });
  18.         });
  19.     });
  20.     </script>
  21. </body>

 

pjax_test.html
  1. <body>
  2.     <div>pjax after.</div>
  3.  
  4.     <div id="container_new">
  5.  
  6.         <div>pjax after. Good Job!</div>
  7.  
  8.     </div>
  9. </body>

 

結果

これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
 

連続

ところが、1度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
 
そこで1枚のページで差し替えるタイプにしたら、連続して動作した。

index.php
  1. <body>
  2.     <div id="container">
  3.         <div id="test">
  4.             <button id="hoge_1">pjax</button>
  5.             <button id="hoge_2"><?php echo ( empty( $_GET&#91;'value'&#93; ) ) ? 1 : $_GET&#91;'value'&#93; + 1; ?></button>
  6.         </div>
  7.     </div>
  8.  
  9.     <script type="text/javascript">
  10.     $( document ).ready( function() {
  11.         $( 'button' ).click( function() {
  12.             $.pjax({
  13.                 url: 'index.php?value=' + $( '#hoge_2' ).text(),
  14.                 container: '#container',
  15.                 fragment:  '#container_new'
  16.             });
  17.         });
  18.     });
  19.     </script>
  20. </body>

ただし、

  1. container: '#container',
  2. fragment: '#container'

ここを同じ名前にすると1回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな~。。。
 
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯

解決?

やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。

  1. container: '#container',

これでちゃんと動く。
 

オプション、イベント

オプションイベント を見てやってみましょう。
 

開始時処理
  1.  
  2. $(document).on('pjax:send', function(e) {
  3.     $('body').append("<div id='loading'>処理中</div>");
  4. });

 

終了時処理
  1. $(document).on('pjax:complete', function(e,data) {
  2.     $("#loading").remove();
  3. });

これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に!
 

フォームの値の受け渡し

フォームの値の受け渡し 参照。
 

注意

ブラウザバックとかの挙動への対処が必要ね~。
 

参考サイト

RakSul:はじめての「pjax」
Qiita:pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix:defunkt版pjaxの説明

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-11 (水) 15:20:23 | 最終更新:2015-02-18 (水) 15:29:09

書式

Posted by muchag | jQuery |
初回投稿:2015-02-10 (火) 11:14:07 | 最終更新:2016-04-17 (日) 17:07:06

色々なサイトを見て勉強させていただいているが、書式がバラバラで混乱してきたので、メモ。

jQuery フレームワークの利用

下記、どちらでも同じこと。

  1. jQuery()
  2.  
  3. $()

 
なので

  1. $.isNumeric( arg );
  2.  
  3. jQuery.isNumeric( arg );

これも同じこと。
jQuery 本体のメソッドを使ってるということ。
 

jQuery オブジェクト

下記の3タイプがある。

  1. $( selector [, context ] )
  2.  
  3. $( html [, ownerDocument ] )
  4.  
  5. $( callback )

 

$( selector [, context ] )

いっぱいあるけど、代表は CSS セレクタ(とその属性)。
Category: Selectors

わかりやすくいえば、タグ、id、class など、CSS で直接指定できるもの。

  1. $( 'body' ) // タグ <body>~</body>
  2.  
  3. $( '#hoge' ) // id <div id="hoge">~</div>
  4.  
  5. $( '.moge' ) // class <a class="moge">~</a>
  6.  
  7. $( '*' ) // ユニバーサルセレクタ(全称セレクタ)

これで、それぞれに 該当する DOM 要素を捕まえる ことができる。
 

属性まで含める場合
  1. // id が hoge で、name 属性が・・・
  2.  
  3. $( '#hoge[name="sun"]' ) // sun のもの
  4.  
  5. $( '#hoge[name!="sun"]' ) // sun でないもの
  6.  
  7. $( '#hoge[name^="sun"]' ) // sun で始まるもの
  8.  
  9. $( '#hoge[name$="sun"]' ) // sun で終わるもの
  10.  
  11. $( '#hoge[name*="sun"]' ) // sun を含むもの
  12.  
  13. $( '#hoge[name~="sun"]' ) // sun という「単語」が入っているもの
  1. // name 属性を持っているもの
  2. $( '#hoge[name]' )
  3.  
  4. // hreflang 属性が en であるもの
  5. $( '#hoge[hreflang|="en"]' )
  6.  
  7. // name 属性を持っていて、value 属性が man で終わるもの
  8. $( '#hoge[name][value$="man"]' )

 

$( html [, ownerDocument ] )

DOM 要素そのもの。
DOM 要素 生成中 に割り込む。

  1. $( '<p>jQuery の可能性はすごいね~</p>' )

 

$( callback )

特別なお方。(要は私にはよくわからない) 🙄
DOM 要素を 読み込み終えたとき に発動。

  1. $( document )

特別なので、クォーテーションで括らない
 

メソッド or イベント

オブジェクトを捕まえたら、後はそのメソッドやらイベントやらを繋げていくだけ。

  1. // id が hoge のオブジェクトの text の
  2.  
  3. $( '#hoge' ).text() // getter
  4.  
  5. $( '#hoge' ).text( arg ) // setter
  6.  
  7. $( '#hoge' ).click() // イベントリスナー

 

イベント
  1. .click( handler )
  2.  
  3. .on( "click", handler )

どちらも同意。
と思ったけど、違うらしい。
前者は、読込時に定義してしまうので、動的に変化をさせたものには対応できない。
後者は、イベント発生時に都度調査をするので、動的な変化に耐えられる。
 

onメソッドはイベントが発生するごとにhtmlの構成をチェックします。

jQuery 入門:イベント(2)

マニュアルの上っ面だけを読んでいると危ないにゃ。。。 🙄
 

.trigger
  1. .trigger( "click" )

これは、イベントを発動させる。
 

事前定義

どれも同意。

  1. $( document ).ready( handler )
  2.  
  3. $().ready( handler ) ←非推奨
  4.  
  5. $( handler )
  6.  
  7. $(document).on( "ready", handler ) ←これもあるけど、1.8で廃止予定? てか、上の3つの後になるのでダメ?

 
確かによく見るのは下記2種。
DOM 要素の読み込みを完了したら呼ばれる。

  1. $( document ).ready(function() {
  2. // Handler for .ready() called.
  3. });
  4.  
  5. $(function() {
  6. // Handler for .ready() called.
  7. });

 

this
  1. $( this )
  2.  
  3. this

これも何気に困ってた。
 

$( this ):jQuery オブジェクト
this:DOM 要素(jQuery とは関係ない)

と書いてもすぐにはピンとこないよね~。

例えば、id を取得したかったら、下記のような表記の差が出る。

  1. $( this ).attr( 'id' )
  2.  
  3. this.id
Posted by muchag | jQuery |
初回投稿:2015-02-10 (火) 11:14:07 | 最終更新:2016-04-17 (日) 17:07:06

Numeral.js (数値フォーマット)

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 22:26:14 | 最終更新:2015-02-08 (日) 22:26:14

数値フォーマットライブラリ。

Qiita:JavaScriptでカンマ区切りなどによる数値のフォーマットができるNumeral.jsが便利
こちらで紹介されていた。
 
Numeral.js

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 22:26:14 | 最終更新:2015-02-08 (日) 22:26:14

文字列 -> 検索(部分一致)

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 20:12:02 | 最終更新:2015-02-11 (水) 18:01:35

部分的に一致する名前を持つ要素を一括で操作する方法。

jQuery の場合、ページ内の要素をいっぺんに操作することがあるけど、id などを利用して名前をつけている場合、微妙に名前が違うことがある。
これを一括で操作する方法を見つけた。

Qiita:jQueryで指定した文字列を含むidの要素を非表示にする

  1. <tr id="row_1"></tr>
  2. <tr id="row_2"></tr>
  3. <tr id="row_3"></tr>
  1. $( '#row_1' ).hide();
  2. $( '#row_2' ).hide();
  3. $( '#row_3' ).hide();
  4. $( '[id *= "row_"]' ).hide();

1行毎に隠したいときは上を。
全て隠したいときは下を。
便利~♪

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 20:12:02 | 最終更新:2015-02-11 (水) 18:01:35

jquery.shapeshift.js (要素を DnD で並べ替える)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 19:18:53 | 最終更新:2015-02-12 (木) 12:34:33

前回の jquery.tile.js (タイル状に配置)で並べたタイル状要素を DnD で自由に並べ替えられるプラグイン。
jquery.shapeshift.js

またもや、下記サイトにお導きをいただきました。
啓文社:[jQuery] タイルをドラッグ&ドロップで並べ替え

【環境】
[jQuery] 1.11.2, 2.1.3
[jQuery UI] 1.11.2
JS

GitHub:jquery.shapeshift
ここから DL して、入手。

すごい数のオプションw

  1. <script type="text/javascript">
  2. defaults = {
  3.     selector: "*",
  4.     enableDrag: true,
  5.     enableCrossDrop: true,
  6.     enableResize: true,
  7.     enableTrash: false,
  8.     align: "center",
  9.     colWidth: null,
  10.     columns: null,
  11.     minColumns: 1,
  12.     autoHeight: true,
  13.     maxHeight: null,
  14.     minHeight: 100,
  15.     gutterX: 10,
  16.     gutterY: 10,
  17.     paddingX: 10,
  18.     paddingY: 10,
  19.     animated: true,
  20.     animateOnInit: false,
  21.     animationSpeed: 225,
  22.     animationThreshold: 100,
  23.     dragClone: false,
  24.     deleteClone: true,
  25.     dragRate: 100,
  26.     dragWhitelist: "*",
  27.     crossDropWhitelist: "*",
  28.     cutoffStart: null,
  29.     cutoffEnd: null,
  30.     handle: false,
  31.     cloneClass: "ss-cloned-child",
  32.     activeClass: "ss-active-child",
  33.     draggedClass: "ss-dragged-child",
  34.     placeholderClass: "ss-placeholder-child",
  35.     originalContainerClass: "ss-original-container",
  36.     currentContainerClass: "ss-current-container",
  37.     previousContainerClass: "ss-previous-container"
  38. };
  39. </script>

 

HTML
JavaScript 部分

上記オプションの必要部分を、下記で上書きする。

  1. <script type="text/javascript">
  2. $(".container").shapeshift({
  3.     minColumns: 3
  4. });
  5. </script>

 

フック

参考サイト には、下記のような記述があった。
こうすることで、フックを作れるのね~。

  1. <script type="text/javascript">
  2. $(".container").on('ss-drop-complete', function(e){
  3.     $('.tile').tile(4);
  4. });
  5. </script>

 

要素部分
  1. <div class="container">
  2.     <div class="tile">要素</div>
  3.     <div class="tile">要素</div>
  4.     <div data-ss-colspan='2'>要素</div>
  5.     <div class="tile">要素</div>
  6. </div>

 

CSS
  1. .container {
  2.     border: 1px dashed #ccc;
  3.     position: relative;
  4. }
  5.  
  6. .container > div {
  7.     background: #CCC;
  8.     height: 100px;
  9.     position: absolute;
  10.     width: 80px;
  11. }
  12.  
  13. .container > div[data-ss-colspan='2'] { width: 170px; }
  14.  
  15. .container .ss-placeholder-child {
  16.     background: transparent;
  17.     border: 1px dashed red;
  18. }

 

タイルが全て重なってしまう現象

2度起きた。
 
1度目の原因と解決法は忘れてしまった。。。残念。
 

原因

JavaScript のシンタックスエラーだった。
Firefox の開発ツールを起動し忘れていた。 😯

  1. $('[id = "hoge"') // 誤
  2.  
  3. $('[id = "hoge"]') // 誤

閉じカッコ(])が抜けていた。
 
タイル要素内のテキストボックスの値チェックを入れたときに起きた。

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 19:18:53 | 最終更新:2015-02-12 (木) 12:34:33

jquery.tile.js (タイル状に配置)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

jquery.tile.js
要素をタイル状に並べてくれるプラグイン。

説明サイト
URIN HACK:要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js

【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS

jquery.tile.js
こちらからソースをコピペして

jquery.tile.js

を作成して配置。
 

HTML
JavaScript 部分
  1. <script src="jquery.tile.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4.   $('.tile').tile();
  5. });
  6. </script>

4行目、titl メソッドの引数に数値を入れると、列数を指定できる。

というわけではなく、x列毎に同じ高さに揃える という指定らしく

  1. $('.tile').tile(4);

このように設定して、表示エリアを5列分取ったら、高さがずれたw

つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある
 

要素部分
  1. <div class="tile">1</div>
  2. <div class="tile">2</div>
  3. <div class="tile">3</div>
  4. <div class="tile">4</div>
  5. <div class="tile">5</div>

綺麗に並んだ~♪
 

CSS

お好みに応じて設定。

  1. .tile {
  2.     border:1px solid #999;
  3.     background:#f0f0f0;
  4.     float:left;
  5.     width:130px;
  6.     margin:0 10px 10px 0;
  7. }

啓文社:[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました~

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

Don’t Use jquery-latest.js

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:57:12 | 最終更新:2015-02-08 (日) 12:58:14

jquery-latest.js へのリンクは止めましょ~、とのこと。

ちゃんとバージョンが記載されている .js ファイルにリンクしてね。

  1. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- だめよ~!だめだめ! -->
  2.  
  3. <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <!-- こうしましょ! -->

jQuery:Don’t Use jquery-latest.js

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:57:12 | 最終更新:2015-02-08 (日) 12:58:14

ナビゲーションメニューバー -> CSS MenuMaker

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 12:46:37 | 最終更新:2015-02-08 (日) 12:50:18

CSS MenuMaker は、シンプルでよかった~♪

同サイト内にカスタマイズ機能も付いていて
非常に便利♪

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 12:46:37 | 最終更新:2015-02-08 (日) 12:50:18

文字列 -> 検索

Posted by muchag | JavaScript |
初回投稿:2015-02-08 (日) 12:35:00 | 最終更新:2015-02-08 (日) 12:43:46

文字列検索。

indexOf

呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。fromIndex から検索を始め、値が見つからない場合は -1 を返します。

indexOf(searchValue[,fromIndex])

MDN:String.prototype.indexOf()

searchValue
検索する値を表す文字列

fromIndex
呼び出す文字列内の検索を始めるための位置。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。

利用例
  1. if ( $( this ).text().indexOf( 'abc' ) > -1 )

 

注意

indexOf メソッドは大文字と小文字を区別します。
 

lastIndexOf

呼び出す String オブジェクト中で、指定された値が最後に現れるインデックスを返します。値が見つけられない場合、-1 を返します。呼び出す文字列は、fromIndex から検索を始め、逆方向に検索されます。

lastIndexOf( searchValue [, fromIndex ])

MDN:String.prototype.lastIndexOf()

searchValue
検索する値を表す文字列。

fromIndex
呼び出す文字列内の検索を始めるための位置(左から右)。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。
 

注意

indexOf メソッドは大文字と小文字を区別します。
 

match

正規表現 に対する 文字列 のマッチングの際に、そのマッチ結果を得るために使われます。

string.match(regexp)

MDN:String.prototype.match()

regexp
正規表現オブジェクト (RegExp) 。RegExp オブジェクトではないオブジェクト obj が渡された場合、new RegExp(obj) による RegExp オブジェクトへの暗黙的な変換が行われます。

Posted by muchag | JavaScript |
初回投稿:2015-02-08 (日) 12:35:00 | 最終更新:2015-02-08 (日) 12:43:46
« 前ページへ次ページへ »