jQueryを利用してプログラミングした牌画URL入力支援のサンプルページです。面倒な牌画URLの入力を軽減できます。麻雀ブログやサイト制作にご利用ください。ソースはブラウザの「ソースを表示」でご確認ください。
ブログ内記事・・・麻雀ブログ!勝負は下駄を履くまで
HTMLのhead内にjQueryを呼び出すコードを追加する。これを忘れると動きません^^;
<script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
たったのこれだけです。
$(document).ready(function() {
//牌画を配置する関数
$("img","#haiga").click(function() {
//クリックされた牌の属性値を取得する処理
var haisrc = $(this).attr("src"); //牌画の場所を取得
var hainame = $(this).attr("name"); //牌画の名前を取得
var haialt = $(this).attr("alt"); //牌画のAlt属性の内容を取得
var haihaba = $(this).attr("width"); //牌画の幅を取得
var haitakasa = $(this).attr("height"); //牌画の高さを取得
//テキストボックスから牌画のURLを取得する処理
var haiiti = $(".haipath").val(); //牌画のディレクトリのURLを取得
//牌画のファイル形式を設定する(拡張子を入力)
var filetype = "gif"; //牌画のファイル形式を設定する
//牌画を配置する処理
var a = $("<img>").attr("src",haisrc);
$(".tehai").append(a); //tehaiクラスの要素内に追加
//牌画のURLを配置する処理
var b = "<img src=\"" + haiiti + hainame + "." + filetype + "\" alt=\"" + haialt + "\" width=\"" + haihaba + "\" height=\"" + haitakasa + "\">";
$(".url").append(b); //urlクラスの要素内に追加
});
//テキストを配置する関数
$("a","#haiga").click(function() {
var titletxt = $(this).attr("title"); //タイトル文字を取得
$(".tehai").append(titletxt);
$(".url").append(titletxt);
});
//URLを選択する関数
$(".urlbtn").click(function(){
$(".url").select();
return false;
});
//リセット関数
$(".resetbtn").click(function(){
$(".tehai").empty();
$(".url").empty();
return false;
});
});
本サンプルページでは、まつセンの牌画(24×34ピクセル)を使用しています。いつもたいへんお世話になっているサイトです。
このページはJavaScriptでプログラミングされています。本コンテンツを利用する場合は、ご使用のブラウザをJavaScriptが利用できる状態に設定しておいてください。