サンプルJSプラグイン2、無名関数の引数渡し。
2017.10.01
昨日に続きJQueryのプラグイン作りを行なっています。
いろいろと勉強になります、何となく分かってきました。
javascriptでもいろいろと出来るのだなと感心しています。
ソースを毎度おなじみですが、解説なしのコードを貼り付けておきます。
今回はリターン時に無名関数を使ってみました。そして無名関数に引数渡しを
行なっています。
サンプルプログラムはこちらです。
https://zip358.com/tool/jsp/index1.html
(function($){
$.fn.Lform = {
Lget:function(c){
var s = "";
if(!c){
$("body form").each(function(i, e) {
s+= "<input type='button' class='cssform' data-lfm='" + i + "' value='" + i + "番目のフォームを送信させる'><br>";
});
}else{
s = "<input type='button' class='cssform' data-lfm='" + c + "' value='" + c + "番目のフォームを送信させる'><br>";
}
return (function(s){
console.log(s);
$("#lsform").html(s);
$(".cssform").click(function(){
var i = $(this).data("lfm");
$("body form").eq(i).submit();
});
})(s);
}
};
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<title>JQプラグインか？::from送信プラグイン｛BODYの中に複数のフォームが有る場合、指定したフォームを送信させる。｝</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="lform.js"></script>
<script>
$(function(){
$("#gLform").click(function(){
$("#gLform").Lform.Lget();
});
$("#gLform1").click(function(){
$("#gLform1").Lform.Lget(1);
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71682075-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<h1>form送信プラグイン｛BODYの中に複数のフォームが有る場合、指定したフォームを送信させる。｝</h1>
<input type="button" id="gLform" value="送信する"><input type="button" id="gLform1" value="送信する">
<p id="lsform"></p>
<form action="https://yahoo.co.jp" method="GET">
</form>
<form action="https://google.co.jp" method="GET">
</form>
<form action="https://www.msn.com/ja-jp" method="GET">
</form>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'cssform', 'GoogleAnalyticsObject', AM, body form, body>, button, data-lfm, DOCTYPE html>, form action, form>, gLform1, head>, input type, Lform.Lget, lsform, m.parentNode.insertBefore, s.getElementsByTagName, script src, script>, title>,
猫でもできるjsでゴリゴリ
2017.06.10
有言実行ということで、ゴリゴリJSのサンプル書いてみました。
と言ってもサンプルなので数行だけです。
唯、これを理解すると結構便利です。使い方は人それぞれだと思いますが
簡単に言えばJSのプラグインの考え方と似ていますね。
最初の部分だけ変更すればプラグインになっちゃうからね。
トイウコトでサンプルです。
本当はボタン押しても何も動かない仕様にするつもりでした。
コンソールログから出力した値から導き出して欲しかったけど
いまどきオープンなので・・・。
サンプルサイトとソースを掲載します。
https://zip358.com/tool/ajikan_js/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>猫でもできるjsでゴリゴリ</title>
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../topcoat/main/fonts/stylesheet.css">
<link rel="stylesheet" type="text/css" href="../topcoat/css/topcoat-desktop-dark.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/main.css">
<link rel="stylesheet" type="text/css" href="../topcoat/main/css/brackets.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script>
$(function(){
var ajikan = {
ajisen:function(){
var str = "味せんべい";
console.log(str);
return str;
},neko:function(){
var str = "猫が";
console.log(str);
return str;
},loop:function(obj){
var cnt = Number($(obj).val());
console.log(cnt);
return cnt;
},taberu:function(ore,str1,str2,cnt){
var o = "";
for(var i=0;i<cnt;i++){
o+=str1;
}
for(var i=0;i<cnt;i++){
o+=str2;
}
o+="たべる？";
$(ore).html(o);
return;
}
};
$("#ore").click(function(){
console.log("oioioi・・投資信託");
var e = ajikan;
e.taberu("#obj",e.neko(),e.ajisen(),e.loop("#cnt"));
});
});
</script>
</head>
<body class="dark">
<div id="wrapper">
<section class="component">
<input type="text" value="" id="cnt">
<input type="button" value="お!!" id="ore">
<div id="obj">
</div>
</section>
</div>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, ajax.googleapis.com, AM, console.log, div id, div>, DOCTYPE html>, head>, html5shiv.googlecode.com, input type, link rel, meta http-equiv, return str, script src, script>, str1, stylesheet, title>, topcoat-desktop-dark.css, var ajikan, var str,