{"id":1718,"date":"2014-04-13T20:46:34","date_gmt":"2014-04-13T11:46:34","guid":{"rendered":"http:\/\/mattyan.net\/blog\/?p=1718"},"modified":"2014-04-13T20:46:34","modified_gmt":"2014-04-13T11:46:34","slug":"jquery-easyui%e3%81%a7%e3%82%a6%e3%82%a3%e3%82%b6%e3%83%bc%e3%83%89%e7%9a%84%e3%81%aa%e3%82%82%e3%81%ae%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f","status":"publish","type":"post","link":"https:\/\/mattyan.net\/blog\/?p=1718","title":{"rendered":"jquery easyui\u3067\u30a6\u30a3\u30b6\u30fc\u30c9\u7684\u306a\u3082\u306e\u4f5c\u3063\u3066\u307f\u305f"},"content":{"rendered":"

javascript\u306eGUI\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u3046\u3061\u3001easyui<\/a>\u3063\u3066\u3044\u3046\u306e\u304c\u826f\u3055\u305d\u3046\u3060\u3063\u305f\u306e\u3067\u4f7f\u7528\u4e2d\u3002\u3069\u3046\u3082\u30a6\u30a3\u30b6\u30fc\u30c9\u7684\u306a\u3082\u306e\u304c\u7121\u304b\u3063\u305f\u306e\u3067\u8a66\u3057\u306b\u4f5c\u3063\u3066\u307f\u305f\u3002
\n
\n\u4ee5\u4e0b\u8a66\u3057\u306b\u4f5c\u3063\u305f\u30b3\u30fc\u30c9\u30d9\u30bf\u8f09\u305b
\nindex.html
\n[html]
\n<!DOCTYPE html>
\n<html>
\n\t<head>
\n\t\t<meta charset="utf-8">
\n\t\t<title>jquery easyui wizard test<\/title>
\n\t\t<script type="text\/javascript" src="jquery.min.js"><\/script>
\n\t\t<script type="text\/javascript" src="jquery.easyui.min.js"><\/script>
\n\t\t<link type="text\/css" rel="stylesheet" href="themes\/metro-blue\/easyui.css">
\n\t\t<script type="text\/javascript">
\n\t\t\t<!–
\n\t\t\t\t\/**
\n\t\t\t\t * \u30a6\u30a3\u30b6\u30fc\u30c9\u30af\u30e9\u30b9
\n\t\t\t\t * @param element \u30a6\u30a3\u30b6\u30fc\u30c9\u306b\u3059\u308b\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u8b58\u5225\u5b50(#\uff5e\u306e\u30a2\u30ec)
\n\t\t\t\t *\/
\n\t\t\t\tvar Wizard = function(element){
\n\t\t\t\t\tthis.pages = new Array();
\n\t\t\t\t\tthis.index = 0;
\n\t\t\t\t\tthis.element = $(element);
\n\t\t\t\t\tself = this;
\n\t\t\t\t\t$(element).append(
\n\t\t\t\t\t\t$(‘<hr>’)
\n\t\t\t\t\t).append(
\n\t\t\t\t\t\t$(‘<a>’).attr({‘id’: ‘wizard_next_button’, ‘href’: ‘javascript: void(0)’}).html(‘\u6b21\u3078’).linkbutton().click(function(){
\n\t\t\t\t\t\t\tif(self.pages[self.index].next !== undefined && self.pages[self.index].next !== null){
\n\t\t\t\t\t\t\t\tif(self.pages[self.index].next()){
\n\t\t\t\t\t\t\t\t\tself.pages[self.index].element.css({‘display’: ‘none’});
\n\t\t\t\t\t\t\t\t\tself.index++;
\n\t\t\t\t\t\t\t\t\tif(self.index < self.pages.length){
\n\t\t\t\t\t\t\t\t\t\tself.pages[self.index].element.css({‘display’: ‘block’});
\n\t\t\t\t\t\t\t\t\t}else{
\n\t\t\t\t\t\t\t\t\t\tself.element.window(‘close’);
\n\t\t\t\t\t\t\t\t\t}
\n\t\t\t\t\t\t\t\t}else{
\n\t\t\t\t\t\t\t\t\tself.element.window(‘close’);
\n\t\t\t\t\t\t\t\t}
\n\t\t\t\t\t\t\t}
\n\t\t\t\t\t\t})
\n\t\t\t\t\t).attr({‘title’: ‘wizard’}).window({modal: true}).window(‘close’);
\n\t\t\t\t}
\n\t\t\t\t\/**
\n\t\t\t\t * \u30a6\u30a3\u30b6\u30fc\u30c9\u306b\u30da\u30fc\u30b8\u3092\u8ffd\u52a0
\n\t\t\t\t * @param element \u8ffd\u52a0\u3059\u308b\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u8b58\u5225\u5b50(#\uff5e\u306e\u30a2\u30ec)
\n\t\t\t\t * @param nextfunc \u300c\u6b21\u3078\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9
\n\t\t\t\t *\/
\n\t\t\t\tWizard.prototype.addPage = function(element, nextfunc){
\n\t\t\t\t\tthis.pages.push({‘element’: $(element), ‘next’: nextfunc});
\n\t\t\t\t\t$(element).css(‘display’, ‘none’);
\n\t\t\t\t}
\n\t\t\t\t\/**
\n\t\t\t\t * \u30a6\u30a3\u30b6\u30fc\u30c9\u3092\u8868\u793a
\n\t\t\t\t *\/
\n\t\t\t\tWizard.prototype.show = function(){
\n\t\t\t\t\tthis.index = 0;
\n\t\t\t\t\tthis.pages[this.index].element.css({‘display’: ‘block’});
\n\t\t\t\t\tthis.element.window(‘open’);
\n\t\t\t\t}
\n\t\t\t\t$(function(){
\n\t\t\t\t\t\/\/\u30a6\u30a3\u30b6\u30fc\u30c9\u4f5c\u6210
\n\t\t\t\t\twizard = new Wizard(‘#wizard’);
\n\t\t\t\t\t\/\/\u30da\u30fc\u30b8\u306e\u8ffd\u52a0
\n\t\t\t\t\twizard.addPage(‘#page1’, function(){
\n\t\t\t\t\t\t\/**
\n\t\t\t\t\t\t * \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3002\u7279\u306b\u4f55\u3082\u3057\u306a\u3044
\n\t\t\t\t\t\t *\/
\n\t\t\t\t\t\treturn true;
\n\t\t\t\t\t});
\n\t\t\t\t\twizard.addPage(‘#page2’, function(){
\n\t\t\t\t\t\t\/**
\n\t\t\t\t\t\t * \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e92\u3002\u5165\u529b\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u3092sessionStorage\u306b\u4fdd\u5b58
\n\t\t\t\t\t\t *\/
\n\t\t\t\t\t\tsessionStorage.setItem(‘a’, $(‘#hoge’).val());
\n\t\t\t\t\t\tsessionStorage.setItem(‘b’, $(‘#fuga’).val());
\n\t\t\t\t\t\treturn true;
\n\t\t\t\t\t});
\n\t\t\t\t\twizard.addPage(‘#page3’, function(){
\n\t\t\t\t\t\t\/**
\n\t\t\t\t\t\t * \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e93
\n\t\t\t\t\t\t * \u30da\u30fc\u30b82\u3067\u5165\u529b\u3055\u308c\u305f\u6587\u5b57\u5217\u3092console.log\u3067\u51fa\u529b
\n\t\t\t\t\t\t *\/
\n\t\t\t\t\t\tconsole.log(‘\u6700\u521d\u306e\u6587\u5b57\u5217: ‘ + sessionStorage.getItem(‘a’) + ‘\u6b21\u306e\u6587\u5b57\u5217: ‘ + sessionStorage.getItem(‘b’));
\n\t\t\t\t\t\treturn true;
\n\t\t\t\t\t});
\n\t\t\t\t\t\/\/\u30a6\u30a3\u30b6\u30fc\u30c9\u306e\u8868\u793a
\n\t\t\t\t\twizard.show();
\n\t\t\t\t});
\n\t\t\t\/\/ –>
\n\t\t<\/script>
\n\t<\/head>
\n\t<body>
\n\t\t<div id="wizard">
\n\t\t\t<div id="page1">\u30a6\u30a3\u30b6\u30fc\u30c9\u306e\u30c6\u30b9\u30c8\u3067\u3059<\/div>
\n\t\t\t<div id="page2">
\n\t\t\t\t\u9069\u5f53\u306a\u6587\u5b57\u5217\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044:<input type="text" id="hoge"><br>
\n\t\t\t\t\u3064\u3044\u3067\u306b\u3082\u3046\u4e00\u5ea6\u3069\u3046\u305e: <input type="text" id="fuga">
\n\t\t\t<\/div>
\n\t\t\t<div id="page3">\u4ee5\u4e0a\u3067\u30a6\u30a3\u30b6\u30fc\u30c9\u3092\u7d42\u4e86\u3057\u307e\u3059\u3002<\/div>
\n\t\t<\/div>
\n\t<\/body>
\n<\/html>
\n[\/html]
\n\u30a6\u30a3\u30b6\u30fc\u30c9\u306b\u3057\u3066\u308bhtml\u306f
\n[html]
\n<div id="wizard">
\n\t<div id="page1">\u30a6\u30a3\u30b6\u30fc\u30c9\u306e\u30c6\u30b9\u30c8\u3067\u3059<\/div>
\n\t<div id="page2">
\n\t\t\u9069\u5f53\u306a\u6587\u5b57\u5217\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044:<input type="text" id="hoge"><br>
\n\t\t\u3064\u3044\u3067\u306b\u3082\u3046\u4e00\u5ea6\u3069\u3046\u305e: <input type="text" id="fuga">
\n\t<\/div>
\n\t<div id="page3">\u4ee5\u4e0a\u3067\u30a6\u30a3\u30b6\u30fc\u30c9\u3092\u7d42\u4e86\u3057\u307e\u3059\u3002<\/div>
\n<\/div>
\n[\/html]
\n\u30a6\u30a3\u30b6\u30fc\u30c9\u3092\u4f5c\u3063\u3066\u308b\u30b3\u30fc\u30c9\u306f
\n[js]
\n$(function(){
\n\t\/\/\u30a6\u30a3\u30b6\u30fc\u30c9\u4f5c\u6210
\n\twizard = new Wizard(‘#wizard’);
\n\t\/\/\u30da\u30fc\u30b8\u306e\u8ffd\u52a0
\n\twizard.addPage(‘#page1’, function(){
\n\t\t\/**
\n\t\t * \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3002\u7279\u306b\u4f55\u3082\u3057\u306a\u3044
\n\t\t *\/
\n\t\treturn true;
\n\t});
\n\twizard.addPage(‘#page2’, function(){
\n\t\t\/**
\n\t\t * \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e92\u3002\u5165\u529b\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u3092sessionStorage\u306b\u4fdd\u5b58
\n\t\t *\/
\n\t\tsessionStorage.setItem(‘a’, $(‘#hoge’).val());
\n\t\tsessionStorage.setItem(‘b’, $(‘#fuga’).val());
\n\t\treturn true;
\n\t});
\n\twizard.addPage(‘#page3’, function(){
\n\t\t\/**
\n\t\t * \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e93
\n\t\t * \u30da\u30fc\u30b82\u3067\u5165\u529b\u3055\u308c\u305f\u6587\u5b57\u5217\u3092console.log\u3067\u51fa\u529b
\n\t\t *\/
\n\t\tconsole.log(‘\u6700\u521d\u306e\u6587\u5b57\u5217: ‘ + sessionStorage.getItem(‘a’) + ‘\u6b21\u306e\u6587\u5b57\u5217: ‘ + sessionStorage.getItem(‘b’));
\n\t\treturn true;
\n\t});
\n\t\/\/\u30a6\u30a3\u30b6\u30fc\u30c9\u306e\u8868\u793a
\n\twizard.show();
\n});
\n[\/js]
\n\u5b9f\u884c\u7d50\u679c
\n\u6700\u521d\u306e\u30da\u30fc\u30b8:
\n\"\u6700\u521d\u306e\u30da\u30fc\u30b8\"
\n2\u30da\u30fc\u30b8:
\n\"2\u30da\u30fc\u30b8\"
\n3\u30da\u30fc\u30b8:
\n\"3\u30da\u30fc\u30b8\"
\n\u30a6\u30a3\u30b6\u30fc\u30c9\u7d42\u4e86:
\n\"\u7d42\u4e86\"
\n\u6700\u5f8c\u306e\u30da\u30fc\u30b8\u3067sessionStorage\u304b\u3089\u5024\u3092\u53d6\u3063\u3066\u304d\u3066console.log\u3067\u51fa\u529b\u3057\u3066\u308b\u3002
\n\u5b9f\u969b\u306b\u30a6\u30a3\u30b6\u30fc\u30c9\u3068\u3057\u3066\u6a5f\u80fd\u3057\u3066\u308b\u30af\u30e9\u30b9\u304c\u3053\u308c
\n[js]
\n\/**
\n * \u30a6\u30a3\u30b6\u30fc\u30c9\u30af\u30e9\u30b9
\n * @param element \u30a6\u30a3\u30b6\u30fc\u30c9\u306b\u3059\u308b\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u8b58\u5225\u5b50(#\uff5e\u306e\u30a2\u30ec)
\n *\/
\nvar Wizard = function(element){
\n\tthis.pages = new Array();
\n\tthis.index = 0;
\n\tthis.element = $(element);
\n\tself = this;
\n\t$(element).append(
\n\t\t$(‘<hr>’)
\n\t).append(
\n\t\t$(‘<a>’).attr({‘id’: ‘wizard_next_button’, ‘href’: ‘javascript: void(0)’}).html(‘\u6b21\u3078’).linkbutton().click(function(){
\n\t\t\tif(self.pages[self.index].next !== undefined && self.pages[self.index].next !== null){
\n\t\t\t\tif(self.pages[self.index].next()){
\n\t\t\t\t\tself.pages[self.index].element.css({‘display’: ‘none’});
\n\t\t\t\t\tself.index++;
\n\t\t\t\t\tif(self.index < self.pages.length){
\n\t\t\t\t\t\tself.pages[self.index].element.css({‘display’: ‘block’});
\n\t\t\t\t\t}else{
\n\t\t\t\t\t\tself.element.window(‘close’);
\n\t\t\t\t\t}
\n\t\t\t\t}else{
\n\t\t\t\t\tself.element.window(‘close’);
\n\t\t\t\t}
\n\t\t\t}
\n\t\t})
\n\t).attr({‘title’: ‘wizard’}).window({modal: true}).window(‘close’);
\n}
\n\/**
\n * \u30a6\u30a3\u30b6\u30fc\u30c9\u306b\u30da\u30fc\u30b8\u3092\u8ffd\u52a0
\n * @param element \u8ffd\u52a0\u3059\u308b\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u8b58\u5225\u5b50(#\uff5e\u306e\u30a2\u30ec)
\n * @param nextfunc \u300c\u6b21\u3078\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9
\n *\/
\nWizard.prototype.addPage = function(element, nextfunc){
\n\tthis.pages.push({‘element’: $(element), ‘next’: nextfunc});
\n\t$(element).css(‘display’, ‘none’);
\n}
\n\/**
\n * \u30a6\u30a3\u30b6\u30fc\u30c9\u3092\u8868\u793a
\n *\/
\nWizard.prototype.show = function(){
\n\tthis.index = 0;
\n\tthis.pages[this.index].element.css({‘display’: ‘block’});
\n\tthis.element.window(‘open’);
\n}
\n[\/js]
\nWizard\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3067\u30a8\u30ec\u30e1\u30f3\u30c8\u306b\u7f6b\u7dda\u3068\u6b21\u3078\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u3064\u3064\u3001easyui\u306ewindow\u95a2\u6570\u3067\u30a6\u30a4\u30f3\u30c9\u30a6\u306b\u3057\u3066\u3057\u307e\u3046\u3002
\naddPage()\u3067\u30da\u30fc\u30b8\u3068\u300c\u6b21\u3078\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u914d\u5217\u306b\u8ffd\u52a0\u3057\u3066\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u65b9\u306fdisplay none\u3067\u96a0\u3059\u3002
\nshow()\u3067\u6700\u521d\u306b\u767b\u9332\u3055\u308c\u305f\u30da\u30fc\u30b8\u306e\u307fdisplay block\u3067\u8868\u793a\u3002\u6b21\u3078\u3092\u62bc\u3055\u308c\u305f\u3089\u8868\u793a\u3057\u3066\u305f\u30da\u30fc\u30b8\u3092\u96a0\u3057\u3001\u6b21\u306b\u767b\u9332\u3055\u308c\u305f\u306e\u3092\u8868\u793a\u3092\u7e70\u308a\u8fd4\u3059\u3002
\n\u30da\u30fc\u30b8\u3092\u5168\u90e8\u51e6\u7406\u3057\u5207\u308b\u304b\u3001\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u304cfalse\u3092\u8fd4\u3057\u305f\u3089\u30a6\u30a3\u30b6\u30fc\u30c9\u7d42\u4e86\u3002
\n\u3053\u308c\u306f\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306fboolean\u306e\u5024\u3057\u304b\u8fd4\u3055\u306a\u3044\u3051\u3069\u3001-1\u306a\u3089\u7d42\u4e86\u307f\u305f\u3044\u306a\u6761\u4ef6\u3064\u3051\u308c\u3070\u597d\u304d\u52dd\u624b\u306b\u30da\u30fc\u30b8\u30b8\u30e3\u30f3\u30d7\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u3068\u601d\u3046\u3002
\n\u3042\u3068\u3001jquery\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30b9\u30bf\u30a4\u30eb\u3067\u5b9f\u884c\u3067\u304d\u308b\u3068\u3044\u3044\u306a\u3041\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"

javascript\u306eGUI\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u3046\u3061\u3001easyui\u3063\u3066\u3044\u3046\u306e\u304c\u826f\u3055\u305d\u3046\u3060\u3063\u305f\u306e\u3067\u4f7f\u7528\u4e2d\u3002\u3069\u3046\u3082\u30a6\u30a3\u30b6\u30fc\u30c9\u7684\u306a\u3082\u306e\u304c\u7121\u304b\u3063\u305f\u306e\u3067\u8a66\u3057\u306b\u4f5c\u3063\u3066\u307f\u305f\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,1],"tags":[],"class_list":["post-1718","post","type-post","status-publish","format-standard","hentry","category-3","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1718"}],"version-history":[{"count":0,"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1718\/revisions"}],"wp:attachment":[{"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mattyan.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}