Ajaxで背景を変更やフォーム等で色を選択する場合は最近ではカラーピッカーを
使用する事が多いと思うのですが、jQueryプラグインでは機能が多すぎたりする事が多く
なかなか良い方法がありませんでした。
Virgil Rebotonさんにシンプルで実装しやすそうなカラーピッカーがあったのでご紹介します。
jQuery Color Picker
サンプルも公開されています
導入方法
Virgil Rebotonさんからファイルをダウンロード
※ページ中程のDownloadリンクから
ヘッダーに
とりあえずヘッダーに落としてきたファイルを記述
リンクするファイルはJavasScript
<script src="jquery-1.2.2.js" type="text/javascript"></script>
<script src="ColorPicker.js" type="text/javascript"></script>
と
CSSファイル
<style type=text/css media=all>@import url( ColorPicker.css );</style>
その後に例として直書きで
<script type="text/javascript" charset="utf-8">
<!--
jQuery(function($)
{
$("#picker1").attachColorPicker();
});
//-->
</script>bodyに
bodyに下記を記述
<input name="任意のname" id="picker1" size="7">
で実装ができます！
簡単ですね！
JQueryでSwapImageさせようと思い、
奇麗なソースがないかと調べていたところ、
chobugyoさんの[jquery]ないのでつくってみた「jquery SwapImage Menu」に端的なコードがあったので参考にさせていただく事にしました。
コードは以下、記事、ありがとうございます。参考にさせていただきます。
$(function(){
$("#buttons a").hover(function(){
var picture = "images/" + $(this).attr("class") + ".jpg";
$("#swapimage .floatPicture:visible").fadeOut("fast",function(){
$("#swapimage .floatPicture:hidden").fadeIn("fast").attr("src",picture);
});
$("#swapimage a").attr({
href:$(this).attr("href"),
title:$(this).attr("title")
});
$("#swapimage .basePicture:visible").fadeIn("fast").attr("src",picture);
});
});
JSなどで画像等を後から読み込んだりする場合、
先読みをしておかないとまずい場合があるとおもいます。
そんなときにJQueryのattrにて下記のソースで先読み設定ができるようです。
jQuery.preimg = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
//配列から読み込み
}
};
jQuery.preimg("画像名.jpg", "画像名.jpg");
jqueryで
http://hogehoge.com/index.htm?cid=xx
とかのget引数を取り扱いたく、色々調べたところ
http://jquery-howto.blogspot.comさんに情報がありました。
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i <hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
上記のfunctionに
http://hogehoge.com/index.htm?cid=xx
であれば
で使用できるみたいです。
便利ですね！
WordPressでも採用されているAjaxベースのテキストエディタ「TinyMCE」
この「TinyMCE」で画像を登録するときに何故か絶対パスで設定しても相対パスに強制的に
変更されてしまう事が判明。
ドキュメンとによると設定するJSに下記を記述することで変更されなくなるみたいです。
覚え書きです。
