<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="./external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
.ui-selected {
background: red;
}
</style>
</head>
<body>
<ul id="sortable">
<li id="item_1">item1</li>
<li id="item_2">item2</li>
<li id="item_3">item3</li>
<li id="item_4">item4</li>
<li id="item_5">item5</li>
</ul>
<script>
$(function(){
$('#sortable').sortable({
cursor: 'move',
opacity: 0.5,
update: function(event, ui){
$(this).sortable("serialize");
}
});
});
</script>
</body>
</html>
Resizable
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="./external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="box">box</div>
<script>
$(function(){
$('.box').draggable().resizable({
handles: 'all',
//aspectRatio: true
stop: function (event, ui){
console.log(ui.size.hight, ui.size.width);
}
});
});
</script>
</body>
</html>
Selected
<script>
$(function(){
var selected = new Array();
$('#selectable').selectable({
selected: function(event, ui){
selected.push(ui.selected.id);
console.log(selected);
},
unselected: function(event, ui){
var id = ui.unselected.id;
selected.splice(selected.indexOf(id), 1);
console.log(selected);
}
});
});
</script>
Droppable
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="./external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background: #ccc;
margin-bottom: 20px;
}
.target {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="target">target</div>
<script>
$(function(){
$('.box').draggable();
$('.target').droppable({
accept: '.box',
drop: function(event, ui){
console.log('dropped!');
}
});
});
</script>
</body>
</html>
ui追加
$(function(){
$('.box').draggable({
helper: 'clone'
});
$('.target').droppable({
accept: '.box',
hoverClass: 'hover',
tolerance: 'fit',
drop: function(event, ui){
ui.draggable.clone().appendTo(this);
console.log('dropped!');
}
});
});
jQuery Draggable
jQuery UIのHPより、ひな形をダウンロードします。
jQueryUI
draggableは以下のように書きます。
$(function(){
$(‘#hoge’).draggable();
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="./external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="box">box</div>
<script>
$(function(){
$('#box').draggable();
});
</script>
</body>
</html>
設定、イベント
$(function(){
$('#box').draggable({
// axis: 'x'
opacity: 0.5,
// handle: '.handle'
drag: function(event, ui){
console.log(ui.position);
}
});
});
jQuery plug-in 作成
jQueryのプラグイン作成に、fn.extend()を使います。
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
https://api.jquery.com/jquery.fn.extend/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery plugin</title>
</head>
<body>
<p><img src="image01.jpg"></p>
<p><img src="image02.jpg"></p>
<p><img src="image03.jpg"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.showsize.js"></script>
<script>
$(function(){
$('img').showsize({
size: 22,
opacity: 0.9
});
});
</script>
</body>
</html>
;(function($){
$.fn.showsize = function(options){
var elements = this;
elements.each(function(){
var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
$(this).click(function(){
var msg = $(this).width() + ' x ' + $(this).height();
$(this).wrap('<div style="position:relative;"></div>');
var div = $('<div>')
.text(msg)
.css('position', 'absolute')
.css('top', '0')
.css('padding', '2px')
.css('background', getRandomColor())
.css('font-size', opts.size +'px')
.css('color','white')
.css('opacity',opts.opacity);
$(this).after(div);
});
});
return this;
};
function getRandomColor(){
var colors = ['red', 'pink', 'orange', 'green', 'blue'];
return colors[Math.floor(Math.random()* colors.length)];
}
$.fn.showsize.defaults = {
size: 10,
opacity: 0.8
};
})(jQuery);
jQuery mobile demo
リフェレンス：http://api.jquerymobile.com/data-attribute/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>D3.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<a href="#menu" data-icon="gear">左</a>
<h1>ホーム</h1>
<a href="#menu" data-icon="check" class="ui-btn-right">右</a>
</div>
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home" data-role="button">ホーム</a></p>
<p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">日本語</li>
<li><a href="#menu">赤いページ<span class="ui-li-count">23</span></a></li>
<li><a href="#menu">青いページ</a></li>
<li><a href="#menu">黄色いページ</a></li>
<li data-role="list-divider">英語</li>
<li><a href="#menu">Red<span class="ui-li-count">23</span></a></li>
<li><a href="#menu">Blue</a></li>
<li><a href="#menu">Yellow</a></li>
</ul>
</div>
<form action="mail.php" method="post">
<div data-role="fieldcontain">
<label for="name">お名前</label>
<input type="text" name="name" id="name" value="">
</div>
<div data-role="fieldcontain">
<label for="keywords">検索</label>
<input type="search" name="keywords" id="keywords" value="">
</div>
<div data-role="fieldcontain">
<label for="amount">数量</label>
<input type="range" name="amount" id="amount" min="0" max="100" value="">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>色</legend>
<input type="checkbox" name="color_1" id="color_1">
<label for="color_1">赤</label>
<input type="checkbox" name="color_2" id="color_2">
<label for="color_2">青</label>
<input type="checkbox" name="color_3" id="color_3">
<label for="color_3">黄</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>色</legend>
<input type="radio" name="color" value="1" id="1" checked="checked">
<label for="1">赤</label>
<input type="radio" name="color" value="2" id="2">
<label for="2">青</label>
<input type="radio" name="color" value="3" id="3">
<label for="3">黄</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="color">色</label>
<select name="color" id="color" data-native-menu="false" multiple="">
<option value="1">赤</option>
<option value="2" selected>青</option>
<option value="3">黄</option>
</select>
</div>
<input type="submit" value="送信!">
</form>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#menu" class="ui-btn-active">メニュー1</a></li>
<li><a href="#menu">メニュー2</a></li>
<li><a href="#menu">メニュー3</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="menu" data-add-back-btn="true">
<div data-role="header">
<h1>メニュー</h1>
</div>
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home">ホーム</a></p>
<p><a href="#menu">メニュー</a></p>
</div>
<div data-role="footer" class="ui-bar">
<a href="#menu" data-icon="plus">追加</a>
<a href="#menu" data-icon="delete">削除</a>
<h4>copyright 2016</h4>
</div>
</div>
</body>
</html>
jQuery mobile data-attribute
data-attribute: http://api.jquerymobile.com/data-attribute/
slideup
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home">ホーム</a></p>
<p><a href="#menu" data-transition="slideup">メニュー</a></p>
</div>
ボタン:icon(http://api.jquerymobile.com/icons/)
<div data-role="controlgroup" data-type="horizontal">
<p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
メニュー</a></p>
<p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
メニュー</a></p>
<p><a href="#menu" data-role="button" data-icon="gear" data-inline="true">
メニュー</a></p>
</div>
theme(http://api.jquerymobile.com/theme/)
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home" data-role="button">ホーム</a></p>
<p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
</div>
header button
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home" data-role="button">ホーム</a></p>
<p><a href="#menu" data-role="button" data-theme="b">メニュー</a></p>
</div>
footer
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="#menu" data-icon="plus">追加</a>
<a href="#menu" data-icon="delete">削除</a>
</div>
</div>
フッター、ヘッダーナビゲーション
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#menu" class="ui-btn-active">メニュー1</a></li>
<li><a href="#menu">メニュー2</a></li>
<li><a href="#menu">メニュー3</a></li>
</ul>
</div>
</div>
ヘッダー、フッター固定
<div data-role="header" data-position="fixed"> <div data-role="footer" data-position="fixed">
form, 検索、スライダー
<form action="mail.php" method="post">
<div data-role="fieldcontain">
<label for="name">お名前</label>
<input type="text" name="name" id="name" value="">
</div>
<input type="submit" value="送信!">
</form>
<div data-role="fieldcontain">
<label for="keywords">検索</label>
<input type="search" name="keywords" id="keywords" value="">
</div>
<div data-role="fieldcontain">
<label for="amount">数量</label>
<input type="range" name="amount" id="amount" min="0" max="100" value="">
</div>
jQuery mobile
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>D3.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>ホーム</h1>
</div>
<div data-role="content">
<p>こんにちは！</p>
</div>
<div data-role="footer">
<h4>copyright 2016</h4>
</div>
</div>
</body>
</html>
ページ内に複数ページ作成することも可能です。
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>ホーム</h1>
</div>
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home">ホーム</a></p>
<p><a href="#menu">メニュー</a></p>
</div>
<div data-role="footer">
<h4>copyright 2016</h4>
</div>
</div>
<div data-role="page" id="menu">
<div data-role="header">
<h1>メニュー</h1>
</div>
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home">ホーム</a></p>
<p><a href="#menu">メニュー</a></p>
</div>
<div data-role="footer">
<h4>copyright 2016</h4>
</div>
</div>
</body>
リンク設定
<div data-role="content">
<p>こんにちは！</p>
<p><a href="#home">ホーム</a></p>
<p><a href="#menu">メニュー</a></p>
<p><a href="http://google.com" rel="external">google</a></p>
<p><a href="a.html">a</a></p>
<p><a href="a.html" data-ajax="false">b</a></p>
</div>
Haml
HamlはHTML Abstraction Markup Languageの略でhtmlのtemplate engineと呼ばれたりもします。rubyで書かれており、railsなどにも使われています。
index.haml -> (hamlコマンド) -> index.html
[vagrant@localhost haml]$ sudo gem install haml
以下のように字下げ・空白を作って記載します。
!!!
%html{:lang => "ja"}
%head
%meta(charset="UTF-8")
%body
hello world!
hamlで変換します。
[vagrant@localhost haml]$ haml index.haml index.html
[vagrant@localhost haml]$ haml -q -f html5 index.haml index.html
改行のコントロール
!!!
%html{:lang => "ja"}
%head
%meta(charset="UTF-8")
%body
%p hello
%ul
%li<>
item
属性の記述
!!!
%html{:lang => "ja"}
%head
%meta(charset="UTF-8")
%body
$div{:id => "main", :class => "myClass"}
%div(id="main" class="myClass")
%div#main.myClass
フィルターの生成
!!!
%html{:lang => "ja"}
%head
%meta(charset="UTF-8")
%body
:css
.myStyle {
color: red;
}
:javascript
alert(1)
if(1){
alret(2);
}
ruby
!!!
%html{:lang => "ja"}
%head
%meta(charset="UTF-8")
%body
%p total is #{5 * 3}
%p= Time.now
- x = 5
%p = x
-(1..10).each do |i|
%p = i
Compass
[vagrant@localhost sass]$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2016 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
[vagrant@localhost sass]$ compass create
directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
write stylesheets/ie.css
write stylesheets/print.css
write stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
You may now add and edit sass stylesheets in the sass subdirectory of your project.
Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.
You can configure your project by editing the config.rb configuration file.
You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]
More Resources:
* Website: http://compass-style.org/
* Sass: http://sass-lang.com
* Community: http://groups.google.com/group/compass-users/
@import "compass";
.sample {
@include border-radius();
}
[vagrant@localhost sass]$ compass watch
@import "compass";
.sample {
// @include border-radius(3px);
// @include opacity(0.5);
@include box-shadow(0 0 1px #ccc);
}
@import "compass";
.sample {
// @include border-radius(3px);
// @include opacity(0.5);
// @include box-shadow(0 0 1px #ccc);
@include rotate();
@include clearfix;
}
画像
@import "compass";
$padding: 10px;
.sample {
width: image-width("baby.jpg") + ($padding * 2);
}
sprites
@import "compass"; @import "icons/*.png"; @include all-icons-sprites;