[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>jQuery プラグイン Slide boxメモ
jQuery プラグイン Slide boxメモ
ちょうどこういうのやりたかったので どんな感じで実装されてるか調べてみた。
クライアント
PHP
- <?php
- $("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
- ?>
slideBox.js
PHP
- <?php
- /**
- * Slide Box : a jQuery Plug-in
- * Samuel Garneau <samgarneau@gmail.com>
- * http://samgarneau.com
- *
- * Released under no license, just use it where you want and when you want.
- */
- (function($){
- /**
- * プラグインの書式
- * jQueryオブジェクトにslideBoxという
- * メソッドを追加してる感じかと思われる。
- *
- * 引数 params はオブジェクト
- * default と同じプロパティが設定される。
- */
- $.fn.slideBox = function(params){
- // thisは$("#testZone")
- // id=testZone 内のHTMLを取得
- var content = $(this).html();
- // デフォルトのパラメータ
- var defaults = {
- width: "100%",
- height: "200px",
- position: "bottom" // Possible values : "top", "bottom"
- }
- /**
- * 引数あった場合は
- * デフォルトのパラメータを上書き
- *
- */
- // extending the fuction
- if(params) $.extend(defaults, params);
- var divPanel = $("<div class='slide-panel'>");
- var divContent = $("<div class='content'>");
- /**
- * $(divContent)の中身は
- *
- * <div class='content'>
- * id=testZone 内のHTML
- * </div>
- *
- * って感じになる。
- */
- $(divContent).html(content);
- /**
- * $(divPanel)にクラスの追加
- *
- * <div class='slide-panel bottom or top'>
- * </div>
- *
- * って感じになる。
- */
- $(divPanel).addClass(defaults.position);
- // $(divPanel)の横幅を設定
- $(divPanel).css("width", defaults.width);
- // $(divPanel)のセンタリング
- // centering the slide panel
- $(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");
- /**
- * topが指定された場合の処理
- *
- * <div class='slide-panel bottom or top'>
- * </div>
- *
- * って感じになる。
- */
- // if position is top we're adding
- if(defaults.position == "top")
- $(divPanel).append($(divContent));
- // adding buttons
- $(divPanel).append("<div class='slide-button'>Ouvrir</div>");
- $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'>Fermer</div>");
- if(defaults.position == "bottom")
- $(divPanel).append($(divContent));
- /**
- * DOMの置換
- *
- * <div id="testZone">
- * <p>TestZone</p>
- * </div>
- *
- * ↓
- * ↓ HTMLは下記のように変更される
- * ↓
- *
- * <div class='content'>
- *
- * <div class='slide-button'>Ouvrir</div> <= position=bottom の場合
- * <div style='display: none' id='close-button' class='slide-button'>Fermer</div> <= position=bottom の場合
- *
- * <div class='slide-panel bottom or top'>
- * <p>TestZone</p>
- * </div>
- *
- * <div class='slide-button'>Ouvrir</div> <= position=top の場合
- * <div style='display: none' id='close-button' class='slide-button'>Fermer</div> <= position=top の場合
- *
- * </div>
- *
- * これに対してCSSとイベントを追加していく。
- */
- $(this).replaceWith($(divPanel));
- // 設置したボタンにイベントを設定
- // 動きは高さを変更しています。
- // Buttons action
- $(".slide-button").click(function(){
- if($(this).attr("id") == "close-button")
- $(divContent).animate({height: "0px"}, 1000);
- else
- $(divContent).animate({height: defaults.height}, 1000);
- $(".slide-button").toggle();
- });
- };
- })(jQuery);
- ?>
何となくわかった気がする。 ついでにjQueryのプラグインの作り方もなんとなくわかった気がする。
気になったのは
- HTMLの量が多いページだとjQueryが実行されるまで時間かかるので その間隠したいところが出ちゃってる状態になる。
こと。実際使う場合は、 slideBoxの位置を考えるか、最初はCSSでdisplay: noneとかに しておいた方が良さそう。
参照サイト
| 投稿日 | 2009年6月 4日 03:35 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | プラグイン |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1158 |
コメント