以前はSiderというプラグインで実装したけど今回は違うやつ。
公式は下記。
http://plugins.adchsm.me/slidebars/
デフォルトでよさ気なアニメーションも効いているのでとてもグッド。
【jQueryUI】テキスト選択を無効にする。
メモ。
■HTML
<p id="disable-selection"> テキスト </p>
■Javascript
$(function(){
$('#disable-selection').disableSelection();
});
これでマッチした要素集合のテキスト選択を無効にすることが出来る。
DragableやSortableと併せると、ユーザービリティ的にグッド。
【Javascript】正規表現で整数と少数にマッチさせる。
めも。
■整数部分と小数部分無制限にマッチさせる
^([1-9]\d*|0)(\.\d+)?$
■整数部分と少数第2位までマッチさせる
^([1-9]\d*|0)(\.\d{1,2})?$
※{1,2}の部分を変えれば好きな位にコントロール出来る。
【Javascript】selectize.jsでなういタグ選択ボックスを実装する。
selectize.js
最近のWebサービスでよく見かけるこんな風ななういタグ選択ボックスが簡単に実装できる。
詳細は後日。ということで本家URLは下記。
http://brianreavis.github.io/selectize.js/
【jQuery】テーブルの行をアニメーションさせる。
テーブルrowはアニメーションに対応していないため、ちょっとトリッキーなことをしないとslideDown、slideUpが出来ない。
今回それを簡単に実現してくれるすばらしいプラグインをstackoverflowで見つけたので保存代わりにメモ。
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);
■使い方
普通
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
応用
$('#row_id').slideRow('down', 500); //スライドスピード
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // スライドスピードとコールバック関数
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); // スライドスピード、イージングオプション、コールバック関数
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); // オプションをオブジェクトで渡すことも可能
これは痒いところに手が届いた神プラグイン。
【Javascript】++[[]][+[]]+[+[]] は “10”。
http://stackoverflow.com/questions/7202157/why-is-10
面白い記事をみつけたからためしたらマジだった。
++[[]][+[]]+[+[]] ↓ "10"
これは笑ったｗ
【jQuery】テーブルの最後の要素に行を挿入する。
めも。
例えば下記のようなテーブルがあったとして。
<table id="table">
<tbody>
<tr>aaa</tr>
<tr>bbb</tr>
<tr>ccc</tr>
</tbody>
</table>
スクリプトは下記の通り。
$('#table tr:last').after('<tr>ddd</tr><tr>eee</tr>');
【Javascript】elementStyleで擬似hover属性を実装する。
cssファイルに記述するのがめんどくさい時。要素への記述のみでhoverが実現できたら楽だよね。
<a href="hoge.html" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">text</a>