[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>[jQuery]スクロールバーはもう古い。長いソースコードをスマートに表示できるjquery.stretchable.js
[jQuery]スクロールバーはもう古い。長いソースコードをスマートに表示できるjquery.stretchable.js
長いソースコードをブログとかに張り付けると出てくるスクロールバーって いまいち操作しずらいし、見た目も良くないですよね。
そんな不満を抱えて悶々としてる人はjquery.stretchable.jsを使ってみてはどうでしょう。
サンプル
右上の三角を押すと広がります。
javascript
- function Test(){
- var li = document.getElementById("gEBTN").getElementsByTagName("li"); var result = document.getElementById("gEBTNresult");
- for($i=0; $i<li.length; $i++){ result.innerHTML += "<li>" + li[$i].innerHTML + "<\/li>"; }
- }
ちょっとカスタマイズ
このサイトでは広げた時に影を付けるなどハイライト表示したかったので、下記の部分をちょっと変更してます。
javascript
- $mark = $("<div class='" + options.mark.classname + "' />").css(options.mark.css)
- .attr("title", options.stretchTitle).on("click", function(e){
- var $t = $(this), stretched = $t.data("stretched?"),
- p = stretched ? ["-", options.stretchTitle] : ["+", options.shrinkTitle];
- $t.data("stretched?", !stretched).attr("title", p[1]).prev().parent().andSelf()
- .animate({ width: p[0] + "=" + options.width }, options.speed, options.easing);
- // 横に広がった時に、highlightを追加する。
- $(e.target).closest("div." + options.wrapper.classname).toggleClass("highlight");
- });
jQuery1.7系を利用してるのでclick()からon()に変更して、jQueryのイベントオブジェクトを渡すようにしています。 そして横に広がった時に、一番外側にhighlightを付けるようにしています。
実行時は一番外側のdivにクラス名を付けるオプション wrapper classname を必ず指定するようにします。
javascript
- $('.hoge').stretchable({
- wrapper: { classname: 'wrap-hoge' }
- });
これでデフォルト時と横に広がった時で違うスタイルを設定することが出来ます。
CSS
- /* デフォルト */
- .wrap-hoge {
- }
- /* ハイライト */
- .wrap-hoge.highlight {
- box-shadow: 0 0 5px #000000;
- }
Chrome 16.0.912.75ではばっちり動いてますが、バージョンが0.0.1なのでもしかしたら不安定な部分があるかもしれません。
ちなみに三角のアイコンが微妙だよねと思っている方はオプションで変更できたりしますよ。 詳しいオプションとダウンロードは下記ページを参照してください。
開発者は日本の方なので日本語ドキュメントですヽ(ﾟ∀ﾟ)ﾉ
| 投稿日 | 2012年3月15日 01:34 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | プラグイン |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1286 |
うりん
2012年3月22日 21:14 | 返信
作者のうりんです。ご紹介ありがとうございます。