2015年3月 – 端くれプログラマの備忘録

[jQuery UI] 基本メモ: Tabs

2015年3月31日2015年8月21日 @84kure

サンプルコード

<div id="tabs">
    <ul>
        <li><a href="#menu1">menu1</a></li>
        <li><a href="#menu2">menu2</a></li>
        <li><a href="#menu3">menu3</a></li>
    </ul>
    <div id="menu1">menu 1</div>
    <div id="menu2">menu 2</div>
    <div id="menu3">menu 3</div>
</div>

<ul>

</ul>

</div>

$('#tabs').tabs({
    selected: 0,
})

$('#tabs').tabs({

selected: 0,

})

参考サイト

Tabs | jQuery UI
https://jqueryui.com/tabs/

[jQuery UI] 基本メモ: Slider

2015年3月30日2015年8月21日 @84kure

サンプルコード

スライダーの動きに併せてプログレスバーを変化させてみる。

<div id="bar" style="width:200px"></div>
<div id="slider" style="width:200px"></div>

1 2	<div id="bar" style="width:200px"></div> <div id="slider" style="width:200px"></div>

$('#bar').progressbar({
    value: 0,
})
$('#slider').slider({
    slide: function(event, ui) {
        console.log(ui.value);
        $('#bar').progressbar('option','value',ui.value);
    }
})

$('#bar').progressbar({

value: 0,

})

$('#slider').slider({

slide: function(event, ui) {

console.log(ui.value);

$('#bar').progressbar('option','value',ui.value);

}

})

参考サイト

Slider | jQuery UI
https://jqueryui.com/slider/

[jQuery UI] 基本メモ: Progressbar

2015年3月29日2015年8月21日 @84kure

サンプルコード

<div id="bar" style="width:200px"></div>

1	<div id="bar" style="width:200px"></div>

$('#bar').progressbar({
    value: 40,
})

$('#bar').progressbar({

value: 40,

})

参考サイト

Progressbar | jQuery UI
https://jqueryui.com/progressbar/

[jQuery UI] 基本メモ: Dialog

2015年3月28日2015年8月21日 @84kure

サンプルコード

<button>open</button>
<div id="msg">hello</div>

1 2	<button>open</button> <div id="msg">hello</div>

$('button').click(function() {
    $('#msg').dialog('open');
})
$('#msg').dialog({
    autoOpen: false,
    buttons: {
        'OK': function() {
            $(this).dialog('close');
        }
    },
    title: 'Title',
    modal: true,
})

$('button').click(function() {

$('#msg').dialog('open');

})

$('#msg').dialog({

autoOpen: false,

buttons: {

'OK': function() {

$(this).dialog('close');

}

title: 'Title',

modal: true,

})

参考サイト

Dialog | jQuery UI
https://jqueryui.com/dialog/

[jQuery UI] 基本メモ: Datepicker

2015年3月27日2015年8月21日 @84kure

サンプルコード

<input type="text" id="datepicker">

1	<input type="text" id="datepicker">

$('#datepicker').datepicker();

1	$('#datepicker').datepicker();

オプションを追加してみる。

$('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',　//形式
    numberOfMonths: 3, //3ヶ月分のカレンダーを表示
    minDate: -2, //2日前から
    maxDate: '+1M', //1ヶ月先まで
});

$('#datepicker').datepicker({

dateFormat: 'yy-mm-dd',　//形式

numberOfMonths: 3, //3ヶ月分のカレンダーを表示

minDate: -2, //2日前から

maxDate: '+1M', //1ヶ月先まで

});

参考サイト

Datepicker | jQuery UI
https://jqueryui.com/datepicker/

[jQuery UI] 基本メモ: Button

2015年3月26日2015年8月21日 @84kure

サンプルコード

<button>click</button>
<input type="checkbox" id="check">
<label for="check">check</label>
<div id="set">
    <input type="radio" id="radio1" name="radio">
    <label for="radio1">1</label>
    <input type="radio" id="radio2" name="radio">
    <label for="radio2">2</label>
    <input type="radio" id="radio3" name="radio">
    <label for="radio3">3</label>
</div>

<button>click</button>

<label for="check">check</label>

</div>

$('button').button();
$('#check').button();
$('input[type=radio]').button();
$('#set').buttonset();

$('button').button();

$('#check').button();

$('input[type=radio]').button();

$('#set').buttonset();

参考サイト

Button | jQuery UI
https://jqueryui.com/button/

[jQuery UI] 基本メモ: Autocomplete

2015年3月25日2015年8月21日 @84kure

サンプルコード

<input type="text" id="langs">

1	<input type="text" id="langs">

var langs = ['ja','en','cn','fr','sp'];
$('#langs').autocomplete({
    source: langs,
});

var langs = ['ja','en','cn','fr','sp'];

$('#langs').autocomplete({

source: langs,

});

参考サイト

Autocomplete | jQuery UI
https://jqueryui.com/autocomplete/

[jQuery UI] 基本メモ: Accordion

2015年3月24日2015年8月21日 @84kure

サンプルコード

<div id="accordion">
    <h3><a href="">Title</a></h3>
    <div>Hello!</div>
    <h3><a href="">Title</a></h3>
    <div>Hello!</div>
</div>

<h3><a href="">Title</a></h3>

<div>Hello!</div>

<h3><a href="">Title</a></h3>

<div>Hello!</div>

</div>

$('#accordion').accordion();

1	$('#accordion').accordion();

参考サイト

Accordion | jQuery UI
https://jqueryui.com/accordion/

[jQuery UI] 基本メモ: Sortable

2015年3月23日2015年8月21日 @84kure

サンプルコード

<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>

</ul>

$('#sortable').sortable();

1	$('#sortable').sortable();

オプションを追加してみる。

$('#sortable').sortable({
    cursor: 'move',
    opacity: 0.5,
    update: function(event, ui) {
        console.log($(this).sortable('serialize'));
    }
});

$('#sortable').sortable({

cursor: 'move',

opacity: 0.5,

update: function(event, ui) {

console.log($(this).sortable('serialize'));

}

});

参考サイト

Sortable | jQuery UI
https://jqueryui.com/sortable/

[jQuery UI] 基本メモ: Selectable

2015年3月22日2015年8月21日 @84kure

サンプルコード

<style>
    .ui-selected {
    background: red;
}
</style>

<style>

.ui-selected {

background: red;

}

</style>

<ul id="selectable">
    <li id="item-1">item1</li>
    <li id="item-2">item2</li>
    <li id="item-3">item3</li>
</ul>

</ul>

$('#selectable').selectable();

1	$('#selectable').selectable();

イベントを使って選択状態の変化をトレースする。

var selected = new Array();
$('#selectable').selectable({
    selected: function(event, ui) {
        if (selected.indexOf(ui.selected.id) === -1) {
            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);
    }
})

var selected = new Array();

$('#selectable').selectable({

selected: function(event, ui) {

if (selected.indexOf(ui.selected.id) === -1) {

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);

}

})

参考サイト

Selectable | jQuery UI
https://jqueryui.com/selectable/