textareaでtab
var addTabKeyEvent = function($textarea){
$textarea.on('keydown',function(e){
if(e.keyCode == 9){
e.preventDefault();
}else{
return;
}
var $this = $(this);
var start = this.selectionStart;
var v = $this.val();
$this.val(v.substring(0,start) + "\t" + v.substring(this.selectionEnd));
this.selectionStart = this.selectionEnd = start + 1;
});
};
addTabKeyEvent($('textarea'));
汎用スムーススクロール
$('a[href^="#"]').click(function(e){
var $this = $(this);
var id = $this.attr('href').split('#').pop();
var top = $('#'+id).offset().top;
$('html,body').stop().animate({scrollTop:top},{duration:400});
return false;
});
jquery.validate.js
http://jqueryvalidation.org/
ページのロードが終わったらgifアニメーションをスタートさせる
画像は2つ用意しておく
アニメーションgifの最初の状態のpng
//execute when all things loaded
$(window).load(function(){
var image = new Image();
image.src = "gif.gif?"+(new Date()).getTime();
$(image).load(function(){
$('#main-kv').hide();
$('#main-kv').parent().append(image);
});
});
$.ajaxでcookieも送信
IE10未満は不可
$.ajax({
type:'post',
url:'url',
dataType:'text',
data:data,
crossDomain:true,
cache:false,
xhrFields: {
withCredentials:true
},
success:function(data, dataType){
},
error:function(XMLHttpRequest, textStatus, errorThrown){
},
complete:function(){
}
});
noUiSlider
inputでファイル選択後即時アップ。
[Twitter]tweet with mediaでも実装していました。jQuery.uploadを使います。
Sample ※Firefox,IE8,9で動作確認済
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>ファイル選択後即時アップ</title> <meta name="description" content="****"> <meta name="keywords" content="****"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="stylesheet" href="style.css" type="text/css"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.upload-1.0.2.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <form method="post" action="" target="f1" enctype="multipart/form-data"> <input id="filebox" type="file" name="image" size="0" accept="image/*"/> </form> <ul id="preview"></ul> </body> </html>
script.js
$(function(){
set_thumaction();
});
function remove_thum(){
$('#preview').empty();
}
function set_thumaction(){
$('#filebox').change(function() {
var preview = $('#preview');
$(this).upload('upload.php',$("form").serialize(),function(html){
preview.append(html);
},'html');
});
}
function form_tweetmode(){
$('#filebox').remove();
$('form').attr('enctype','application/x-www-form-urlencoded');
}
function restore_form(){
$('#fileboxwrap').html('<input id="filebox" type="file" name="image" size="0">');
$('form').attr('enctype','multipart/form-data');
set_thumaction();
}
upload.php
<?php
if(isset($_FILES["image"])){
deleteFilesOfDir('./tmp');
$html='<li>';
$v=$_FILES["image"];
$ext=end(explode('.', $v["name"]));
$filename='./tmp/'.time().'.'.$ext;
$result = @move_uploaded_file( $v["tmp_name"], $filename);
if($result){
$html .= '<img src="'.$filename.'" width="300"/><br/>';
}else{
$html .= 'エラー<br/>';
}
foreach($_FILES["image"] as $key => $v){
$html .= $key.' : '.$v.'<br/>';
}
$html .= '</li>';
echo $html;
}
function deleteFilesOfDir($dirPath){
if (!isset($dirPath)) {
return;
}
$res_dir = opendir($dirPath);
while( $file_name = readdir( $res_dir ) ){
if (is_dir($dirPath.'/'.$file_name)) {
continue;
}
unlink($dirPath.'/'.$file_name);
}
closedir($res_dir);
}
?>
jQuery.upload
http://lagoscript.org/jquery/upload
タイトル通り
基本形
var m=get_query();
var flashvars={};
flashvars.browser=navigator.userAgent;
flashvars.id=(m.id)?m.id:'';
var params={};
params.base=".";
params.menu="false";
params.wmode="opaque";
params.allowfullscreen="false";
params.allowscriptaccess="always";
swfobject.embedSWF("swf/main.swf", "flashcontent", "100%", "100%", "9.0.45", null, flashvars, params);
FlashPlayerのバージョン判定だけ
swfobject.hasFlashPlayerVersion("9.0.45")
動的にFlash領域の大きさを変える
$(window).bind('resize',when_window_resize);
function when_window_resize(){
var n=$('#flashcontent');
var wt=$(window).height();
n.css({height:(wt-80)+'px'});
}
タイトル通り
data.xml
<?xml version="1.0" encoding="UTF-8" ?> <data> <item id="A">あいうえお</item> <item id="B">かきくけこ</item> <item id="C">さしすせそ</item> <item id="D">なにぬねの</item> </data>
JavaScript
$.ajax({
type:"GET",
url:"data.xml",
dataType:"xml",
async:true,
success:function(xml){
$("#status").empty();
$(xml).find("item").each(function(){
var id=$(this).attr("id");
var tex=$(this).text();
$("#status").append("id:"+id+" text:"+tex+"<br/>");
});
}
});