{"id":312,"date":"2014-02-21T16:53:47","date_gmt":"2014-02-21T07:53:47","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=312"},"modified":"2014-04-01T13:22:04","modified_gmt":"2014-04-01T04:22:04","slug":"jqueryplugin%e3%81%a7%e3%82%b7%e3%83%b3%e3%83%97%e3%83%ab%e3%81%aa%e3%83%97%e3%83%ad%e3%82%b0%e3%83%ac%e3%82%b9%e8%a1%a8%e7%a4%ba%e6%a9%9f%e8%83%bd%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=312","title":{"rendered":"jquery Plugin\u3067\u30b7\u30f3\u30d7\u30eb\u306a\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u6a5f\u80fd\u3092\u4f5c\u3063\u3066\u307f\u305f\u3002(jquery.simpleProgress)"},"content":{"rendered":"<p>Ajax\u3067\u305d\u308c\u306a\u308a\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u975e\u540c\u671f\u51e6\u7406\u5b9f\u884c\u4e2d\u306b\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u51e6\u7406\u304c\u9032\u884c\u4e2d\u3067\u3059\u3088\u3068\u7406\u89e3\u3057\u3066\u3082\u3089\u3046\u305f\u3081\u306e\u3061\u3087\u3063\u3068\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f5c\u308a\u307e\u3057\u305f\u3002\u826f\u304b\u3063\u305f\u3089\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\u30da\u30fc\u30b8\u6700\u4e0b\u90e8\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002<\/p>\n<h4>\u52d5\u4f5c\u30a4\u30e1\u30fc\u30b8<\/h4>\n<div style=\"width: 640px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-312-1\" width=\"640\" height=\"360\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/ogg\" src=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2014\/02\/progress-1-1.ogv?_=1\" \/><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2014\/02\/progress-1-1.ogv\">http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2014\/02\/progress-1-1.ogv<\/a><\/video><\/div>\n<h4>\u30d7\u30e9\u30b0\u30a4\u30f3\u540d<\/h4>\n<p>jquery.simpleProgress<\/p>\n<h4>\u5fc5\u8981\u306a\u30d5\u30a1\u30a4\u30eb<\/h4>\n<p>jquery.simpleProgress.js<br \/>\nani.png<\/p>\n<h4>\u4f7f\u3044\u65b9<\/h4>\n<p>HTML<\/p>\n<p>\u975e\u8868\u793a\u306eDIV\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p>[html mark=&#8221;3,7&#8243;]<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n\t&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;jquery.simpleProgress.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<\/p>\n<p>&lt;body&gt;<br \/>\n\t&lt;div id=&#8221;spProgress&#8221; style=&#8221;display:none&#8221;&gt;&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n[\/html]<\/p>\n<p><\/p>\n<p>JavaScript<\/p>\n<p>\u975e\u540c\u671f\u51e6\u7406\u3092\u884c\u3046\u30a4\u30d9\u30f3\u30c8\u306e\u5148\u982d\u3067\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u8d77\u52d5\u3002\u975e\u540c\u671f\u51e6\u7406\u7d42\u4e86\u6642\u306b\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u975e\u8868\u793a\u306b\u3002<br \/>\n[js mark=&#8221;2,7&#8243;]<br \/>\nfunction \u975e\u540c\u671f\u51e6\u7406\u30a4\u30d9\u30f3\u30c8(){<br \/>\n  $(&#8220;#spProgress&#8221;).simpleProgress();<\/p>\n<p>  $.ajax({<br \/>\n     url: &#8220;\/xxxx\/xxxx&#8221;,<br \/>\n     success: function(json, dataType){<br \/>\n        $(&#8220;#spProgress&#8221;).css(&#8220;display&#8221;,&#8221;none&#8221;);<br \/>\n  });<br \/>\n}<\/p>\n<p>[\/js]<\/p>\n<p><\/p>\n<p>\u30aa\u30d7\u30b7\u30e7\u30f3<\/p>\n<p>[js]<br \/>\n   \/\/\u8868\u793a\u5ea7\u6a19\u6307\u5b9a<br \/>\n   $(&#8220;#spProgress&#8221;).simpleProgress({top:100,left:100});<\/p>\n<p>   \/\/\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306e\u76f8\u5bfe\u4f4d\u7f6e\u6307\u5b9a<br \/>\n   $(&#8220;#spProgress&#8221;).simpleProgress({relpath:&#8221;..\/..\/&#8221;});<\/p>\n<p>   \/\/\u8868\u793a\u6587\u5b57\u5217\u6307\u5b9a<br \/>\n   $(&#8220;#spProgress&#8221;).simpleProgress({message:&#8221;\u51e6\u7406\u5b9f\u884c\u4e2d&#8221;});<\/p>\n<p>   \/\/\u30bf\u30a4\u30de\u30fc\u51e6\u7406\u611f\u899a\u6307\u5b9a<br \/>\n   $(&#8220;#spProgress&#8221;).simpleProgress({interval:500});<\/p>\n<p>[\/js]<\/p>\n<p><\/p>\n<h4>\u30bd\u30fc\u30b9\u5168\u6587<\/h4>\n<p>[js]<\/p>\n<p>\/*<br \/>\nusage<br \/>\n\t\/\/html<\/p>\n<div id=\"spProgress\" style=\"display:none\"><\/div>\n<p>    \/\/start progress<br \/>\n    $(&#8220;#spProgress&#8221;).simpleProgress();<\/p>\n<p>    \/\/stop progress<br \/>\n    $(&#8220;#spProgress&#8221;).css(&#8220;display&#8221;,&#8221;none&#8221;);<\/p>\n<p>    \/\/options<br \/>\n    $(&#8220;#spProgress&#8221;).simpleProgress({message:&#8221;updating&#8221;,interval:200,top:100,left:100,relpath:&#8221;..\/..\/&#8221;});<\/p>\n<p>*\/<\/p>\n<p>(function($){<\/p>\n<p>\t$.fn.simpleProgress = function(options){<br \/>\n\t\tvar target  = this;<\/p>\n<p>\t\tvar defaults = {<br \/>\n\t\t\tinterval : 100,<br \/>\n\t\t\tmessage : &#8220;Progress&#8221;,<br \/>\n\t\t\ttop: (screen.height \/2),<br \/>\n\t\t\tleft: (screen.width \/2) ,<br \/>\n\t\t\trelpath: &#8220;..\/&#8221;<br \/>\n\t\t};<br \/>\n\t\tvar settings = $.extend(defaults, options);;<br \/>\n\t\tvar timer = null;<\/p>\n<p>\t\tvar elementFunc = function(elem){<br \/>\n\t\t\t\/\/init<\/p>\n<p>\t\t\tvar cnt = 0;<\/p>\n<p>\t\t\tvar init = function (){<br \/>\n\t\t\t\t$(elem).empty();<br \/>\n\t\t\t\t$(elem).append(&#8220;<img src='\" + settings.relpath + \"ani.png' >&#8220;);<\/p>\n<p>\t\t\t\t$(elem).css(&#8220;display&#8221;,&#8221;block&#8221;);<br \/>\n\t\t\t\t$(elem).css(&#8220;position&#8221;,&#8221;absolute&#8221;);<br \/>\n\t\t\t\t$(elem).css(&#8220;top&#8221;,settings.top);<br \/>\n\t\t\t\t$(elem).css(&#8220;left&#8221;,settings.left);<br \/>\n\t\t\t\t$(elem).css(&#8220;z-index&#8221;,100);<br \/>\n\t\t\t\t$(elem).append(&#8220;<span class='pg-message'>&#8221; + settings.message + &#8220;<\/span>&#8220;);<br \/>\n\t\t\t\t$(elem).children(&#8220;.pg-message&#8221;).css(&#8220;display&#8221;,&#8221;block&#8221;);<br \/>\n\t\t\t\t$(elem).children(&#8220;.pg-message&#8221;).css(&#8220;float&#8221;,&#8221;left&#8221;);<br \/>\n\t\t\t\t$(elem).children(&#8220;.pg-message&#8221;).css(&#8220;padding&#8221;,10);<\/p>\n<p>\t\t\t\ttimer = setInterval(function(){<br \/>\n\t\t\t\t\tvar wk = &#8220;&#8221;;<br \/>\n\t\t\t\t\tfor (var i = 0 ; i < cnt ;i++){\n\t\t\t\t\t\twk += \".\";\n\t\t\t\t\t}\n\n\t\t\t\t\t$(elem).children(\".pg-message\").text(settings.message + wk);\n\t\t\t\t\tvar trf = \"transform: rotate(@@@deg);-ms-transform: rotate(@@@deg);-moz-transform: rotate(@@@deg);-webkit-transform: rotate(@@@deg);\"\n\t\t\t\t\ttrf = trf.replace(\/@@@\/g,cnt*45);\n\t\t\t\t\t$(elem).children(\"img\").attr(\"style\",\"float:left;\" + trf);\n\n\t\t\t\t\tcnt++;\n\n\t\t\t\t\tif ($(elem).css(\"display\") == \"none\"){\n\t\t\t\t\t\tclearInterval(timer);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (cnt == 8){\n\t\t\t\t\t\tcnt = 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t,settings.interval);\n\n\t\t\t\t$(elem).click(function(){\n\t\t\t\t\tcnt = 0;\n\t\t\t\t});\n\t\t\t};\n\n\t\t\tinit();\n\n\t\t};\n\n\n\n\n\t\tvar ret =  $(this).each(function(){\n\t\t\telementFunc(this); \n\t\t});\n\n\t\treturn ret;\n\t}\n\n\n\n})(jQuery);\n\n[\/js]\n\n\n<\/p>\n<h4>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/h4>\n<p><a href=\"http:\/\/lovelinux.mydns.jp\/wp-content\/uploads\/2014\/02\/jquery.simpleProgress.zip\">jquery.simpleProgress<\/a> size:2kb<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ajax\u3067\u305d\u308c\u306a\u308a\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u975e\u540c\u671f\u51e6\u7406\u5b9f\u884c\u4e2d\u306b\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u51e6\u7406\u304c\u9032\u884c\u4e2d\u3067\u3059\u3088\u3068\u7406\u89e3\u3057\u3066\u3082\u3089\u3046\u305f\u3081\u306e\u3061\u3087\u3063\u3068\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f5c\u308a\u307e\u3057\u305f\u3002\u826f\u304b\u3063\u305f\u3089\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\u30da\u30fc\u30b8\u6700\u4e0b\u90e8\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002 \u52d5\u4f5c\u30a4\u30e1\u30fc\u30b8 \u30d7\u30e9\u30b0\u30a4\u30f3\u540d jquery.simpleProgress \u5fc5\u8981\u306a\u30d5\u30a1\u30a4\u30eb jquery.simpleProgress.js ani.png \u4f7f\u3044\u65b9 HTML \u975e\u8868\u793a\u306eDIV\u3092\u4f5c\u308a\u307e\u3059\u3002 [html mark=&#8221;3,7&#8243;] &lt;html&gt; &lt;head&gt; &lt;script type=&#8221;text\/javascript&#8221; src=&#8221;jquery.simpleProgress.js&#8221;&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt; &lt;div id=&#8221;spProgress&#8221; style=&#8221;display:none&#8221;&gt;&lt;\/div&gt; &lt;\/body&gt; &lt;\/html&gt; [\/html] JavaScript \u975e\u540c\u671f\u51e6\u7406\u3092\u884c\u3046\u30a4\u30d9\u30f3\u30c8\u306e\u5148\u982d\u3067\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u8d77\u52d5\u3002\u975e\u540c\u671f\u51e6\u7406\u7d42\u4e86\u6642\u306b\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u975e\u8868\u793a\u306b\u3002 [js mark=&#8221;2,7&#8243;] function \u975e\u540c\u671f\u51e6\u7406\u30a4\u30d9\u30f3\u30c8(){ $(&#8220;#spProgress&#8221;).simpleProgress(); $.ajax({ url: &#8220;\/xxxx\/xxxx&#8221;, success: function(json, dataType){ $(&#8220;#spProgress&#8221;).css(&#8220;display&#8221;,&#8221;none&#8221;); }); } [\/js] \u30aa\u30d7\u30b7\u30e7\u30f3 [js] \/\/\u8868\u793a\u5ea7\u6a19\u6307\u5b9a $(&#8220;#spProgress&#8221;).simpleProgress({top:100,left:100}); \/\/\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306e\u76f8\u5bfe\u4f4d\u7f6e\u6307\u5b9a $(&#8220;#spProgress&#8221;).simpleProgress({relpath:&#8221;..\/..\/&#8221;}); \/\/\u8868\u793a\u6587\u5b57\u5217\u6307\u5b9a $(&#8220;#spProgress&#8221;).simpleProgress({message:&#8221;\u51e6\u7406\u5b9f\u884c\u4e2d&#8221;}); \/\/\u30bf\u30a4\u30de\u30fc\u51e6\u7406\u611f\u899a\u6307\u5b9a $(&#8220;#spProgress&#8221;).simpleProgress({interval:500}); [\/js] \u30bd\u30fc\u30b9\u5168\u6587 [js] \/* usage \/\/html \/\/start progress $(&#8220;#spProgress&#8221;).simpleProgress(); \/\/stop progress $(&#8220;#spProgress&#8221;).css(&#8220;display&#8221;,&#8221;none&#8221;); \/\/options $(&#8220;#spProgress&#8221;).simpleProgress({message:&#8221;updating&#8221;,interval:200,top:100,left:100,relpath:&#8221;..\/..\/&#8221;}); *\/ (function($){ $.fn.simpleProgress = function(options){ var target = this; var defaults = { interval : 100, message : &#8220;Progress&#8221;, top: (screen.height \/2), left: (screen.width \/2) , relpath: &#8220;..\/&#8221; }; var settings = $.extend(defaults, options);; var timer = null; var elementFunc = function(elem){ \/\/init var cnt = 0; var init = function (){ $(elem).empty(); $(elem).append(&#8220;&#8220;); $(elem).css(&#8220;display&#8221;,&#8221;block&#8221;); $(elem).css(&#8220;position&#8221;,&#8221;absolute&#8221;); $(elem).css(&#8220;top&#8221;,settings.top); $(elem).css(&#8220;left&#8221;,settings.left); $(elem).css(&#8220;z-index&#8221;,100); $(elem).append(&#8220;&#8221; + settings.message + &#8220;&#8220;); $(elem).children(&#8220;.pg-message&#8221;).css(&#8220;display&#8221;,&#8221;block&#8221;); $(elem).children(&#8220;.pg-message&#8221;).css(&#8220;float&#8221;,&#8221;left&#8221;); $(elem).children(&#8220;.pg-message&#8221;).css(&#8220;padding&#8221;,10); timer = setInterval(function(){ var wk = &#8220;&#8221;; for (var i = 0 ; i < cnt ;i++){ wk += \".\"; } $(elem).children(\".pg-message\").text(settings.message + wk); var trf = \"transform: rotate(@@@deg);-ms-transform: rotate(@@@deg);-moz-transform: rotate(@@@deg);-webkit-transform: rotate(@@@deg);\" trf = trf.replace(\/@@@\/g,cnt*45); $(elem).children(\"img\").attr(\"style\",\"float:left;\" + trf); cnt++; if ($(elem).css(\"display\") == \"none\"){ clearInterval(timer); } if (cnt == 8){ cnt = 0; } } ,settings.interval); $(elem).click(function(){ cnt = 0; }); }; init(); }; var ret = $(this).each(function(){ elementFunc(this); }); return ret; } })(jQuery); [\/js] \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9 jquery.simpleProgress size:2kb\n<\/p>\n","protected":false},"author":1,"featured_media":405,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[7,2],"tags":[28,20,21],"class_list":{"0":"post-312","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-jquery","8":"category-2","9":"tag-javascript-2","10":"tag-jquery-2","11":"tag-plugin"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=312"}],"version-history":[{"count":18,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/312\/revisions"}],"predecessor-version":[{"id":686,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/312\/revisions\/686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/media\/405"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}