JavaScript備忘録

2/2ページ

Bootstrap:カッコいいカレンダー『daterangepicker』の取扱いを調べた

Bootstrap:カッコいいカレンダー『daterangepicker』の取扱いを調べた このプラグインの担当区分は日付の範囲指定です。 例えば、売上の期間集計とか『どこからどこの集計をするのか』を指示する事が出来ます。 ただし、標準状態ではPOSTの書き込みが無いので「どこに書けば良いの?」と苦戦してました。 と言う事で、個人的備忘録。 daterangepicker導入の経緯 Bootstr […]

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析①

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析① Gentelellaのデモページはココ この中のDashboard2のグラフを使うにあたって、どう動いているかを調べてみました。 該当のデザイン箇所 該当箇所のコード [crayon-65f95821e7c73285265058/] このうち、メインのグラフを作っているのが16~18行目でした。 [crayon- […]

【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由 DjangoのViews.pyでDBから取得した値をテンプレートに送り、Bootstrapの機能でグラフ化をしようとしました。 で、グラフまでは出力するのですが【X軸(横軸)】のラベルが付いてくれず3時間ほど右往左往。  ※日付が無いのでどの時点の値かわからない。 ちなみに、私が利用させていただいたテンプレートは【gentelel […]

JavaScript:画面サイズが変わってもレコードを1行に収める方法

JavaScript:画面サイズが変わってもレコードを1行に収める方法 レコードをTableに記載した時、1つのカラムが長く全体を調整されてしまうときがあります。 そんな時に上手く調整する方法です。 サンプルコード [crayon-65f95821e8200918326902/] 列ごとのサイズは【<colgroup>】で指定していますが、この中の『件名』に長いものがあった時、この設定 […]

Slickで作ったSliderで画像とdots間の大きな隙間を強引に解決した方法

Slickで作ったSliderで画像とdots間の大きな隙間を強引に解決した方法 今ドメイントップの作り変えを行ってまして、TOPページにsliderを置こうと。 で、簡単だからSlickでいいかなと思い作業をしたら、画像とページ送りのドットとの間に超でかい隙間が発生。 スマホで見ると隙間更にデカいし。 色々とスマートな方法探したのですが、解決に至らなかったので力業で解決しました。 まずは基本コー […]

ChartJSで作成したグラフのX軸の項目数を減らしたい

ChartJSで作成したグラフのX軸の項目数を減らしたい もうね、cahrt.js楽しすぎです。 今まで「グラフ化って難しそうだなぁ」と少し遠ざけていたのですが、データの理解が早いのは間違いないですね。 グラフってスゲーと思います。 そんな中、各モールでの商品ランキング(自店舗商品のランキングではありません)をグラフ化したら判り易くなるなと思い実装する事にしました。 データ元はランキングの変化 シ […]

画面サイズに合わせて最適な場所で長い文字を省略表示するOverflow

画面サイズに合わせて最適な場所で長い文字を省略表示するOverflow そんなに頻度はないものの「あれ、前どうやったっけ?」と過去に戻る事があったので備忘録的に記録します。 やりたいのはこんな感じ <div>で書けばよいのだろうけど、テーブルである必要性の高い時ってやっぱりあります。 それなのに、今の画面ってスマホもあるしワイドなPCもある。これどうやってコントロールしようかというのが […]

画面サイズに合わせた長さで文章を省略したい overflowの調整

画面サイズに合わせた長さで文章を省略したい overflowの調整 今更ながらですが、文章の省略をしたいときってあります。 今回作成したパーツは会社のトピックス。 「○○入荷しました」とか、それくらいならいいのですが、コロナウィルスの影響など内容を長い文章で記載する事もあるわけです。 ちゃんと仕掛けていなかったので、テーブル内で折り返す折り返す。 Widthの値を固定すると画面ごとに調整する値の設 […]

Laravel:削除実行前に確認画面を表示させる

Laravel:削除実行前に確認画面を表示させる 自作システムがDBとしてある程度動作するところまでたどり着きました。 実際に使いだすと欲しい『うっかり削除の防止機能』 と言うことで、【削除ボタンクリック = 即削除】をやめワンクッション置こうという施策についてです。 方法を大別すると2パターン 削除ボタンを通常は隠しておき、決まったアクションをした時だけ表示させる。 モーダルウィンドで表示の許可 […]