html
概要 2019年に作成したプログラムを改修し、bootstrap5を利用したレビューの一覧画面を作成しました。 テンプレートはWordPress用ではなく、自ら開発する方向けとなっています。 例えば、現在作成しているサービスのレビューサイトへ追加するといったことが…
属性付きセレクタを作成する関数を作った。 jqueryである属性がついたタグを取得したいと思ったときに、セレクタをハードコーディングすることがあります。 例えば以下のようなものです。 $("div[id='hoge']") hogeという値が動的に指定できる場合はもう少し…
textareaでtabを使えるようにするために参考にしたサイト Qiitaの記事なのですが、うまく動かなかったと思います。 https://qiita.com/laineus/items/12a220d2ab086931232d tabを押すと、文字の前にTAB_STRが挿入されます。 自分が望んでいたのは、tabを押す…
ナビゲーションのメニューがまとまっているサイトです。 http://photoshopvip.net/97481 こういったサイトはよく見ます。とても助かりますね。 この中で使えそうだなと思ったものを紹介したいと思います。 まずはこれです。 https://codepen.io/MrsColombo/p…
Djangoでページング処理を作成する際に作った関数を紹介します。 コードの紹介になるので、紹介はコードにコメントにて行います。 前後のページを表示するための関数 # self.limit: データ表示数 def page_data(self, count, page): # count: データ数 # pag…
CSRFトークンを含んだAPIの実行方法で、ドキュメントに載っているような方法ではなく、tagを使った方法を紹介します。 tagを使った方法というのは、{% cookie 'csrftoken' %}でhtml内にtokenを入れて、その値を使う方法です。 修正が必要な箇所は以下の3箇所…
領域をはみ出したときに三点リーダー(…)にする方法を紹介します。 既出かと思いますが、詳しい内容とかあまり見つからない(こうやればできるというのは見つかる)ので、私なりに調べた内容を載せます。 領域をはみ出したときに三点リーダー(…)にする場合は…
bulmaというcssフレームワークでpanelというものがあります。 このpanelではpanel-headingというのがあるのですが、このヘッダーに編集ボタンは用意されていません。 この記事ではbulmaのpanelのヘッダーに編集ボタンを付ける方法を紹介します。 panelについ…
日付選択をする際にでてくるあのカレンダーを作る方法を紹介します。 documentではdomに属性をつけてオプションを指定しているのがほとんどですが、属性をつけるとごちゃごちゃするので、jsに書きます。 準備 以下のライブラリが必要です。 リンクを付けまし…
html、css、javascriptを使ってカレンダーを作成します。 この記事では、htmlとcssの部分についてはcodepenで見つけたデザインを使用しています。 なので、javascriptをメインで紹介したいと思います。 参考にしたデザインはこちらです。 https://codepen.io…
frappe-ganttのドキュメントからチャートの更新apiを探してみたのですが、見つけられませんでした。 issueを見てみたところ、解決策が見つかったので紹介します。 https://github.com/frappe/gantt/issues/44 jsfiddleにコードを公開してくださっているので…
ガントチャートを作成するライブラリは多くありますが、今回紹介するのはfrappe-ganttというライブラリです。 github.com ↓のようなチャートを作成できます。 残念ながら、マウス操作でタスクを追加することはできません。自分で実装することはできそうなの…
frappe chartを使ってグラフを更新する方法と、ドキュメントに載っているサンプルを書いています。 最終的に↓ができます。 html、javascriptをコピペするといくつかのサンプルも確認できます。 導入 まずはインストールします。 npm install frappe-charts …
画面サイズを変えると、中のグリッドがグリグリと動く画面を作ってみます。 github.com npmでインストールします。 npm install muuri 注意事項 ドラッグして要素を動かす場合は以下のライブラリをインストールする必要があります。 npm install hammerjs np…