[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>[Javascript]複数の手続きなどのパターンを分かりやすく見せる
[Javascript]複数の手続きなどのパターンを分かりやすく見せる
なんか楽でいい方法ないかなと久しぶりにライブラリ利用せず書いてみました。
jQueryのやさしさに包まれたならきっとeach気分でfor..in使ってバグだらけ。そしてPHPのやさしさにも包まれていたためinArray()的なものが無いことに動揺。
ライブラリのやさしさと忘却のスピードがとんでもないことを実感しました。
実行結果
Javascript
Javascript
- (function(){
- var imgSwitch = window.imgSwitch = function(id, radio, img_path) {
- var self = this;
- // IEのset/getAttribute対策
- this.class_name = (document.documentElement.getAttribute("style") == document.documentElement.style)
- ? 'className'
- : 'class';
- this.wrapper = document.getElementById(id);
- this.radios = [];
- // 画像のエリア
- this.img_erea = document.createElement('div');
- this.img_erea.setAttribute(this.class_name, 'imgErea');
- // ラジオボタンのグループ
- this.radioBtn = function(radio_collection, default_checked) {
- var my = this;
- this.target;
- for (var i=0; i<radio_collection.length; i++) {
- radio_collection[i].onclick = function() {
- my.target = this;
- self.imgChange(this.name);
- }
- if (i === default_checked) {
- radio_collection[i].checked = true;
- this.target = radio_collection[i];
- }
- }
- }
- this.radioBtn.prototype = {
- getValue: function(){
- return this.target.value;
- },
- getName: function(){
- return this.target.name;
- },
- getImgname: function(){
- return this.getName() + '/' + this.getValue();
- }
- }
- /**
- * ボタンクリック時に画像を差し替え
- *
- */
- this.imgChange = function(class_name) {
- var p = this.img_erea.getElementsByTagName('p');
- for (var i=0; i<p.length; i++) {
- if (p[i].getAttribute(this.class_name) == class_name) {
- p[i].getElementsByTagName('img').item(0).setAttribute('src', img_path + radios[i].getImgname() + '.gif');
- }
- }
- }
- /**
- * 初期化用の関数
- *
- */
- this.init = function() {
- var p;
- var img;
- var attr;
- for (var i=0; i<this.radios.length; i++) {
- p = document.createElement('p');
- p.setAttribute(this.class_name, radios[i].getName());
- img = document.createElement('img');
- img.setAttribute('src', img_path + radios[i].getImgname() + '.gif');
- p.appendChild(img);
- this.img_erea.appendChild(p);
- }
- this.wrapper.appendChild(this.img_erea);
- }
- for (var key in radio) {
- this.radios.push(new this.radioBtn(document.getElementsByName(key), radio[key]));
- }
- this.init();
- }
- })();
- onload = function() {
- // グループ:デフォルトチェックのindex番号
- var value_img = {step1: 0, step2: 1, step3: 2};
- /**
- * 第三引数は表示画像のパス
- * 上記パスとradioボタンのname valueを利用
- *
- * パス/name/value.gif
- */
- imgSwitch('imgSwitch', value_img, '/storage/pg/sample/radiobutton/img/');
- }
HTML
HTML
- <div id="imgSwitch">
- <div class="ctrlPanel">
- <label>輸入国</label>
- <label><input type="radio" name="step1" value="img1" />インドネシア</label>
- <label><input type="radio" name="step1" value="img2" />メキシコ</label>
- <label><input type="radio" name="step1" value="img3" />インド</label>
- <hr />
- <label>輸送方法</label>
- <label><input type="radio" name="step2" value="img1" />海運</label>
- <label><input type="radio" name="step2" value="img2" />空輸</label>
- <label><input type="radio" name="step2" value="img3" />陸路</label>
- <hr />
- <label>通関業者</label>
- <label><input type="radio" name="step3" value="img1" />A社</label>
- <label><input type="radio" name="step3" value="img2" />B社</label>
- <label><input type="radio" name="step3" value="img3" />C社</label>
- </div>
- </div>
CSS
CSS
- #imgSwitch .imgErea {
- width: 500px;
- height: 500px;
- position: relative;
- }
- #imgSwitch .imgErea p {
- position: absolute;
- top: 0px;
- left: 0px;
- }
- #imgSwitch .imgErea p.step1 {
- z-index: 10;
- }
- #imgSwitch .imgErea p.step2 {
- z-index: 20;
- }
- #imgSwitch .imgErea p.step3 {
- z-index: 30;
- }
全然楽にはなってないですね。結局面倒なのは画像だよなぁ・・・なんとかならないかな。 ホームページの見せ方じゃなくてその業務フローをまずなんとかしろよと言えたらどんなに楽か・・・w
| 投稿日 | 2010年4月15日 04:42 |
|---|---|
| カテゴリ | JavaScript |
| タグ | サンプルコード |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1206 |
コメント