No.4753【引用】jquery ダイアログ スマートフォン
http://www.matsuaz.com/matsumotojs/2012/12/03/1354524096064.html
http://fabien-d.github.io/alertify.js/
トップ > メモ一覧 > カテゴリ「jQuery」の絞り込み結果 : 55件
http://www.matsuaz.com/matsumotojs/2012/12/03/1354524096064.html
http://fabien-d.github.io/alertify.js/
No.4639 jquery でブラウザ判定して、表示内容を出し分ける
jquery でブラウザ判定して、表示内容を出し分ける
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SP判定</title>
<style>
.sp, .pc { display: none;}
</style>
</head>
<body>
<p id="hello">Hello World</p>
<div class="pc">PCです！</div>
<div class="sp">SPです！</div>
<div class="pc"><img src="/test/img/pc/kawasemi.jpg" alt="hoge"></div>
<div class="sp"><img src="/test/img/sp/kawasemi.jpg" alt="hoge"></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
if (is_sp()) {
$('.sp').show();
} else {
$('.pc').show();
}
function is_sp() {
var is_sp = false;
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1){
is_sp = true;
}else if(agent.search(/Android/) != -1){
is_sp = true;
}
return is_sp;
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SP判定</title>
<style>
.sp, .pc { display: none;}
</style>
</head>
<body>
<p id="hello">Hello World</p>
<div class="pc">PCです！</div>
<div class="sp">SPです！</div>
<div class="pc"><img src="/test/img/pc/kawasemi.jpg" alt="hoge"></div>
<div class="sp"><img src="/test/img/sp/kawasemi.jpg" alt="hoge"></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
if (is_sp()) {
$('.sp').show();
} else {
$('.pc').show();
}
function is_sp() {
var is_sp = false;
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1){
is_sp = true;
}else if(agent.search(/Android/) != -1){
is_sp = true;
}
return is_sp;
}
</script>
</html>
No.4598 サンプル: 入力がある時のみ確認する
サンプル: 入力がある時のみ確認する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<h2>sample</h2>
<a href="javaScript:void(0);" onclick="sample();">移動する</a>
<ul>
<li>番号<input type="text" name="orderNo" /> 個数<input type="text" name="orderQty" /></li>
<li>番号<input type="text" name="orderNo" /> 個数<input type="text" name="orderQty" /></li>
<li>番号<input type="text" name="orderNo" /> 個数<input type="text" name="orderQty" /></li>
</ul>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" charset="utf-8">
function sample() {
if (check_is_input()) {
if (window.confirm('移動してよろしいですか？')) location.href = "http://google.com";
} else {
location.href = "http://google.com";
}
}
function check_is_input() {
var is_input = false;
$("input").each(function() {
if ($(this).val().length > 0) is_input = true;
});
return is_input;
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<h2>sample</h2>
<a href="javaScript:void(0);" onclick="sample();">移動する</a>
<ul>
<li>番号<input type="text" name="orderNo" /> 個数<input type="text" name="orderQty" /></li>
<li>番号<input type="text" name="orderNo" /> 個数<input type="text" name="orderQty" /></li>
<li>番号<input type="text" name="orderNo" /> 個数<input type="text" name="orderQty" /></li>
</ul>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" charset="utf-8">
function sample() {
if (check_is_input()) {
if (window.confirm('移動してよろしいですか？')) location.href = "http://google.com";
} else {
location.href = "http://google.com";
}
}
function check_is_input() {
var is_input = false;
$("input").each(function() {
if ($(this).val().length > 0) is_input = true;
});
return is_input;
}
</script>
</html>
引用元
No.4546【引用】[jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル
[jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル
jQueryでPOST送信をすることができるメソッドにajaxとpostがあります。その2つのメソッドを用いた簡単なサンプルコードです。それぞれpost.phpにPOST送信を行い、レスポンスをアラートで表示します。
まずはpostメソッドの使用例です。
post.html
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/java...
→ 続きを見る
引用元
No.4544【引用】jQueryで追加する部分だけにエフェクトをかける方法を覚えた - 日曜プログラマのそゞろ事
jQueryで追加する部分だけにエフェクトをかける方法を覚えた - 日曜プログラマのそゞろ事
jQueryで追加する部分だけにエフェクトをかける方法を覚えた
2011年1月15日
nqounet
色々と駆使して今更 チャットを作ってみた わけですが、適当に追加していると、本当に追加されているのかよく分からない場合があります。
元々はこんな感じです。
var add_log = function ( text ){ $ ( '#for_ajax' ). prepend ( "<p&g...
jQueryで追加する部分だけにエフェクトをかける方法を覚えた
2011年1月15日
nqounet
色々と駆使して今更 チャットを作ってみた わけですが、適当に追加していると、本当に追加されているのかよく分からない場合があります。
元々はこんな感じです。
var add_log = function ( text ){ $ ( '#for_ajax' ). prepend ( "<p&g...
→ 続きを見る
引用元
No.4543【引用】アニメーションで行を追加する
jq:アニメーションで行を追加する
一番苦労したのがこの部分です。先頭に追加する場合のjQueryは次のように記述します。
jQuery('tbody').prepend(data); jQuery('td div').slideDown("fast");
挿入するHTML（上記サンプルの「data」の部分）がキモで、次のようにtd要素の中にdiv要素を仕込みます。
<tr> <td><div style="display:none">テキスト1</div></td> <td><div style="display:none">テキスト2</div></...
一番苦労したのがこの部分です。先頭に追加する場合のjQueryは次のように記述します。
jQuery('tbody').prepend(data); jQuery('td div').slideDown("fast");
挿入するHTML（上記サンプルの「data」の部分）がキモで、次のようにtd要素の中にdiv要素を仕込みます。
<tr> <td><div style="display:none">テキスト1</div></td> <td><div style="display:none">テキスト2</div></...
→ 続きを見る
引用元
No.4542【引用】そんな感じで
jQueryのappendパターン
appendで追加するあれやこれのパターン。別に珍しいことないですよくある光景です。appendだけじゃなくてhtmlとかafterとかそゆのでも使えます。まあ何で使えるかっていうのは jQueryのドキュメント 見てください
jQueryオブジェクト
まあ普通はこれですよ。
var hoge = $("#hoge"); $("#fuga").append(hoge);
とか極端な例だけど
$("#hoge").append( $("<div></div>") .append( $("<a></a>") ...
appendで追加するあれやこれのパターン。別に珍しいことないですよくある光景です。appendだけじゃなくてhtmlとかafterとかそゆのでも使えます。まあ何で使えるかっていうのは jQueryのドキュメント 見てください
jQueryオブジェクト
まあ普通はこれですよ。
var hoge = $("#hoge"); $("#fuga").append(hoge);
とか極端な例だけど
$("#hoge").append( $("<div></div>") .append( $("<a></a>") ...
→ 続きを見る
引用元
No.4541【引用】第15回 HTMLの挿入 jQueryによるJavaScript入門
第15回 HTMLの挿入 jQueryによるJavaScript入門
ブログ
2008 年 12 月 9 日
西畑 一馬
powerd by SBM Tool in SEO対策TIPS
こんにちは。 to-R の西畑です。 jQueryによるJavaScript入門 第15回はHTMLの挿入について解説したいと思います。
htmlの制御 では指定した要素の内側のHTMLを変更する方法を解説しましたが、今回は追加です。
append
appendは指定した要素の最後にHTMLを追加する為の関数です。
$ ( "指定した要素" ) . append ( "追加するHTML...
→ 続きを見る
引用元
No.4455 日付範囲指定
日付範囲指定
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
No.4158【引用】文字を光らせるGlowイフェクトをJavaScriptで「jQuery Glow」
文字を光らせるGlowイフェクトをJavaScriptで「jQuery Glow」
admin
Web , オープンソース
JavaScript , github , MIT License , ライブラリ , 開発
ユーザに何かのアクションを起こさせようとする時にマウスオーバーでボタンを点滅させたり、色を変えるようなアクションを行うことがある。文字の色を変えるくらいなら簡単だが、ボタンを作成したりするのは面倒に感じてしまう。 0
光り輝く文字は相当目立つ 0
だ...
admin
Web , オープンソース
JavaScript , github , MIT License , ライブラリ , 開発
ユーザに何かのアクションを起こさせようとする時にマウスオーバーでボタンを点滅させたり、色を変えるようなアクションを行うことがある。文字の色を変えるくらいなら簡単だが、ボタンを作成したりするのは面倒に感じてしまう。 0
光り輝く文字は相当目立つ 0
だ...
→ 続きを見る
