大阪でWEB屋しています。
OSSに関するメモ帳のかわり。
<img data-hoge="ほげ" src="xxx.png" />
$("img").data("hoge");
<div data-hoge='{"aaaa":"あいうえお", "bbbb":1000}'>
のように指定しておけば、$("div").data("hoge").aaa;
<span data-hoge="ほげ" data-fuga="ふが">
$("#foo_checkbox").attr("checked");
// または
$("#foo_checkbox").is(":checked");$("#foo_checkbox").attr("checked", "checked");$("#foo_checkbox").attr("checked", "");// 親ウィンドウ.jsです。
$(function() {
// 引数は開くファイル名、子ウィンドウ名、そのプロパティ
window.open("child.html", "child", "width=800,height=300");
});
<!-- 親ウィンドウ.html -->
<input type="text" name="name" value="">
// 子ウィンドウ.jsこれだけです。
$(function() {
window.opener.$("input").bind("keyup", view);
});
function view() {
$("body").html($(this).val());
}
jquery.myplugin.jsとします。
(function($) {
var val_1; // フィールド
var val_2; // フィールド
$.fn.myplugin = function(option) {
// 処理
}
}) (jQuery);こんな感じです。$("div#plugin_test").myplugin({val1:"value1", val2:"value2"});こんな感じになります。<head>こんな感じです。
<script type="text/javascript" src="./js/jquery-1.4.2.js">
<script type="text/javascript" src="./js/jquery.myplugin.js"></script>
</head>
<body>
<h1>MYPLUGIN</h1>
<input type="text" name="txt">
<input type="button" name="btn" value="push">
<!-- ここへ表示 -->
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
$(function() {
// ボタンがクリックされたら
$("input[name=btn]").click(function() {
// id=resultへ時刻表示とテキストボックスの値をボタンへ表示させる
$("input[name=btn]").myplugin({dest:"result", value:$("input[name=tx]").val()});
});
});
</script>
(function($) {
var _option; // 値を保持するフィールド
var _dest; // 時刻の表示先ID
var _value; // テキストボックスの値
var _elem; // ボタンエレメント
/**
* コンストラクタ的なもの
* option はhtml側から渡された引数オブジェクト
*/
$.fn.increment = function(option) {
_option = $.extend({
_dest : option.dest, // 時刻表示先ID
_value : option.value, // ボタン表示値
_elem : this // 表示させるボタンエレメント
}, option);
draw();
}
function draw() {
// 日付を指定されたIDに表示させる
var date = new Date();
$("#"+_option._dest).html(date.toGMTString());
// ボタンの表示を変更
_option._elem.val(_option._value);
}
}) (jQuery);こうです。<html>htmlはこんな感じにしておきます。
<title>
<script type="text/javascript" scr="js/jquery-1.3.2.js">
<!-- ドラッグできるように -->
<script type="text/javascript" scr="js/ui.core.js">
<!-- ドラッグできるように -->
<script type="text/javascript" scr="js/ui.draggable.js">
</title>
<body>
ポップアップ
<hr>
<!-- ポップアップ -->
<div id="popup">
ココにポップアップ表示
</div>
<!-- ポップアップ以外をクリックすれば、ポップアップが消えるように -->
<div id="delete"></div>
</body>
</html>
div#popup {
position: absolute; /* 移動できるように */
z-index: 99; /* z-indexは高く */
}
div#delete {
position: absolute; /* absoluteで！ */
z-index: 0; /* div#popupより低く！ */
display: none; /* 初期は非表示 */
}CSSはこんな感じ。$(function() {
// パレットをclickでbind()しておく
$("div#popup").bind("click", $(this), popup);
// パレット以外の部分をクリックすると消えるように
$("div#delete").bind("click", function() {
$("div#popup").hide(); // パレットを非表示
$(this).hide(); // 自身も非表示
});
});
function popup(e) {
// パレットを表示
$("div#popup").css({"top":e.pageY-100,"left":e.pageX+50}).show().draggable();
// パレット以外の部分をクリックすると消す部分（mask）の処理
var height = $(document).height();
var width = $(document).width();
$("div#delete").css({"width":width,"height":height,"top":0,"left":0});
$("div#delete").show();
}こんな感じです。<td><a href="foo" id="foo_id" value="foo_value">FOO</a></td>のようなテーブルがあるとします。
<td><a href="bar" id="bar_id" value="bar_value">BAR</a></td>
$("a").click(function() {
id = $(this).attr("id"); // idの取得
val = $(this).attr("value"); // valueの取得
});という調べたらすぐ分かるような方法で取得できます。