jQueryプラグイン jQuery.expose
- 2009 05月29日
- コメントは受け付けていません。
月刊Webテク通信で紹介されていました。
http://www.flowplayer.org/tools/expose.html
こちら以外にも
http://www.flowplayer.org/tools/scrollable.html
http://www.flowplayer.org/tools/overlay.html
などがあります。
MIT and GPL 2+ licensesだそうです。
tips_admin jQueryjQuery入門 No.21
- 2009 05月29日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.21
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ 要素の後にコンテンツを追加する
├ 要素の前にコンテンツを追加する
├ 要素を指定した要素の後に設定する
├ 要素を指定した要素の前に設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素の後にコンテンツを追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
after(“コンテンツ”)
となります。
以下の例ではボタンをクリックすると、「暑いですね」の
後に「<div>そうですね</div>」
を追加しています。
例1)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text”).after(“<div>そうですね</div>”);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text”>暑いですね。</p>
<form>
<input type=”button” value=”追加” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素の前にコンテンツを追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
before(“コンテンツ”)
となります。
以下の例ではボタンをクリックすると、「暑いですね」の前に
「<div>こんにちは！</div>」が追加されます。
例2)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text”).before(“<div>こんにちは!</div>”);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text”>暑いですね。</p>
<form>
<input type=”button” value=”追加” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素を指定した要素の後に設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
insertAfter(“要素”)
となります。
以下の例では、ボタンをクリックすると、「暑いですね」の
前に「こんにちは!」が表示されます。
$(“#text”).insertAfter(“#text2″);
部分でidがtext2の要素の後にidがtextの要素を設定しています。
例3)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text”).insertAfter(“#text2″);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text”>暑いですね。</p>
<div id=”text2″>こんにちは！</div>
<form>
<input type=”button” value=”変更” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素を指定した要素の前に設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
insertBefore(“要素”)
となります。
以下の例では、ボタンをクリックすると、「暑いですね」の
後ろに「こんにちは!」が表示されます。
$(“#text2″).insertBefore(“#text”);
部分でidがtextの前にidがtext2の要素を挿入しています。
例4)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text2″).insertBefore(“#text”);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text”>こんにちは</p>
<div id=”text2″>暑いですね。</div>
<form>
<input type=”button” value=”変更” />
</form>
</body>
</html>
jQuery入門 No.20
- 2009 05月21日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.20
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ コンテンツを追加する
├ 要素の内容を追加する
├ コンテンツを先頭に追加する
├ 要素の内容を他の要素の先頭に挿入する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■コンテンツを追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
append(“コンテンツ”)
となります。
以下の例ではボタンをクリックすると、「今日は」の後ろに「暑いですね」
を追加しています。
例1)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text”).append(“暑いですね”);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text”>今日は</p>
<form>
<input type=”button” value=”追加” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素の内容を追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
appendTo(“要素”)
となります。
以下の例ではボタンをクリックすると、「今日は」の前に
「暑いですね」が表示されるようになります。
例2)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text”).appendTo(“#text2″);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text”>今日は</p>
<p id=”text2″>暑いですね</p>
<form>
<input type=”button” value=”追加” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■コンテンツを先頭に追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
prepend(“コンテンツ”)
となります。
以下の例では、ボタンをクリックすると、「暑いですね」の
前に「こんにちは、」が表示されます。。
例3)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text”).prepend(“こんにちは、”);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text”>暑いですね。</p>
<form>
<input type=”button” value=”追加” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素の内容を他の要素の先頭に挿入する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
prependTo(“要素”)
となります。
以下の例では、ボタンをクリックすると、「暑いですね。」の
前に「こんにちは、」が表示されます。
$(“#test”).prepend(“こんにちは、”);
の場合は、idがtestの要素の前に「こんにちは、」が挿入されますが
$(“#test”).prependTo(“#test2″);
の場合は、idがtest2の要素前にidがtestの要素の内容を挿入します。
例4)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“#text”).prependTo(“#text2″);
$(“input:button”).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<p id=”text2″>暑いですね。</p>
<p id=”text”>こんにちは。</p>
<form>
<input type=”button” value=”変更” />
</form>
</body>
</html>
jQuery入門 No.19
- 2009 05月15日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.19
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ フォームの有効な要素を指定する
├ フォームの無効な要素を指定する
├ フォームのチェックされている要素を指定する
├ フォームのチェックされている要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームの有効な要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:enabled
となります。
以下の例では有効なテキスト属性のinput要素に「ここです」を
入力し有効なチェックボックスをチェックしています。
例1)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“:text:enabled”).val(“ここです”);
$(“:checkbox:enabled”).attr(“checked”,”checked”);
});
</script>
</head>
<body>
<form>
<input type=”text” name=”email” disabled=”disabled” />
<input tyep=”text” name=”id” />
<input type=”checkbox” name=”check” />
<input type=”checkbox” name=”check” disabled=”disabled” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームの無効な要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:disabled
となります。
以下の例では無効なテキスト属性のinput要素に
「ここです」を入力しています。
例2)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“:text:disabled”).val(“ここです”);
$(“:checkbox:enabled”).attr(“checked”,”checked”);
});
</script>
</head>
<body>
<form>
<input type=”text” name=”email” disabled=”disabled” />
<input tyep=”text” name=”id” />
<input type=”checkbox” name=”check” />
<input type=”checkbox” name=”check” disabled=”disabled” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのチェックされている要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:checked
となります。
以下の例では、okボタンを押すとチェックボックスのチェックを
はずすようにしています。
例3)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input:button”).click(function() {
$(“input:checked”).attr(“checked”, false);
});
});
</script>
</head>
<body>
<form>
<input type=”checkbox” name=”check” />
<input type=”checkbox” name=”check1″ checked=”checked” />
<input type=”checkbox” name=”check2″ checked=”checked” />
<input type=”checkbox” name=”check3″ checked=”checked” />
<input type=”button” value=”ok” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームの選択されている要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:selected
となります。
以下の例では、選択すると、選択した値を<div></div>に
表示しています。
例4)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“select”).change(function () {
var str = $(“select option:selected”).val();
if (str != “”) {
str += “ですね”;
} else {
str = “選んでください”;
}
$(“div”).text(str);
});
});
</script>
</head>
<body>
<form>
<select name=”bloodtype”>
<option value=”"></option>
<option value=”A”>A</option>
<option value=”B”>B</option>
<option value=”O”>O</option>
<option value=”AB”>AB</option>
</select>
<div>選んでください</div>
</form>
</body>
</html>
jQuery入門 No.18
- 2009 05月07日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.18
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ フォームのinput要素のimage属性の要素を指定する
├ フォームのinput要素の:reset属性の要素を指定する
├ フォームのinput要素のbutton属性の要素を指定する
├ フォームのinput要素のfile属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のimage属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:image
となります。
以下の例では画像ボタンの枠線を赤に設定しています。
例1)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“:image”).css({border:”3px red solid”});
});
</script>
</head>
<body>
<form>
<input type=”text” name=”text1″ id=”text1″ size=”30″ />
<input type=”image” name=”submit” width=”100″ height=”30″ src=”ok.gif” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素の:reset属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:reset
となります。
となります。
以下の例ではリセットボタンの枠線を赤に設定しています。
例2)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“:reset”).css({border:”3px red solid”});
});
</script>
</head>
<body>
<form>
<input type=”text” name=”text1″ id=”text1″ size=”30″ />
<input type=”reset” name=”reset” value=”リセット” />
<input type=”submit” name=”submit” value=”送信” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のbutton属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:button
となります。
以下の例では、okボタンを押すとsubmitさせるようにしています。
例3)
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“:button”).click(function() {
$(“#form1″).submit();
});
});
</script>
</head>
<body>
<form id=”form1″>
<input type=”checkbox” name=”test1″ value=”1″ />1
<input type=”checkbox” name=”test2″ value=”2″ />2
<input type=”checkbox” name=”test3″ value=”3″ />3
<input type=”button” name=”button” value=”ok” />
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のfile属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:file
となります。
以下の例では、表示時は、ファイルアップロード出来ず、
チェックボックスをチェックすると、ファイルのアップロードが
可能になります。
例4)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“:file”).attr(“disabled”,”disabled”);
$(“:checkbox”).click(function() {
if($(this).attr(‘checked’) == true) {
$(“:file”).attr(“disabled”, false);
} else {
$(“:file”).attr(“disabled”,”disabled”);
}
});
});
</script>
</head>
<body>
<form>
<input type=”checkbox” name=”check1″ id=”check1″ value=”1″ />
<input type=”file” name=”file1″ />
<input type=”submit” name=”submit” value=”ok” />
</form>
</body>
</html>
- アーカイブ
- 最近の投稿
- タグ
- カテゴリー