【JavaScript】Item Picker

結構 用select標籤做items,size的值給大一點讓item-box可以變長 已選取item的背景色要用線性漸層 #mySelect.options[i] 可以回傳#mySelect的第i個選項 #mySelect.selectedIndex可以回傳目前被選取的序列 table.item-picker tr th 未加入功能清單 th th 已加入功能清單 tr td select(size=”6″ name=”source1″).pick-list option(value=”0″) 平台資訊審核 option(value=”1″) 手續費審核 option(value=”2″) 使用者管理 option(value=”3″) 角色管理 td button.add → br button.delete ← td select(size=”6″ name=”target1″).pick-list option(value=”4″) 平台資訊設定 option(value=”5″) 手續費設定 option(value=”6″) 顧客約定管理 $dark: #439E96 $turquoise: #50BBB6 $light: #E7F2F1 $black: #596D6C $gray: #CCE0DE * // border: 1px solid […]

【CSS】px to rem

px rem 10px 0.625rem 11px 0.6875rem 12px 0.75rem 13px 0.8125rem 14px 0.875rem 15px 0.9375rem 16px 1rem 17px 1.0625rem 18px 1.125rem 19px 1.1875rem 20px 1.25rem 21px 1.3125rem 22px 1.375rem 23px 1.4375rem 24px 1.5rem 25px 1.5625rem 26px 1.625rem 27px 1.6875rem 28px 1.75rem 29px 1.8125rem 30px 1.875rem 31px 1.9375rem 32px 2rem 33px 2.0625rem 34px 2.125rem 35px 2.1875rem 36px […]

【Angular】service引入外部資料

外部資料檔案與接口 建立mock-members.ts import { Member } from ‘./member’; //外部からアクセルできるようにexport export const MEMBERS: Member[] = [ {id: 11, name: ‘武山学’}, {id: 12, name: ‘初音ミク’}, {id: 13, name: ‘桐山零’}, {id: 14, name: ‘三角竜之’}, {id: 15, name: ‘羽生結弦’}, {id: 16, name: ‘佐々木希’}, {id: 17, name: ‘松崎はとり’}, {id: 18, name: ‘半沢直樹’}, {id: 19, name: ‘伊藤幸’}, {id: 20, name: ‘桜田深雪’} […]

【Angular】分割元件

定義元件 在app資料夾建立新檔案,檔名為「member-detail.component.ts」 在member-detail.component.ts新增以下內容 import {Component} from ‘@angular/core’; //angular coreからComponentというモジュールをインポートします //Componentのメタデータを定義する //<member-detail></member-detail>として使います @Component({ selector: ‘member-detail’, templateUrl: ‘./member-detail.component.html’ }) // ※@Component裡面不能放註解否則會壞掉 //HTMLテンプレートを定義する export class MemberDetailComponent { } 建立共用Class(將Class獨立出來) 新增member.ts檔案 在member.ts新增以下內容 export class Member { id: number; name: string; } //クラスをpublicにする 在member-detail.component.ts的第二行新增以下內容,引入member.ts import {Member} from ‘./member’; 引入外部Property 使用input。修改member-detail.component.ts為以下內容 import { Component, Input } from ‘@angular/core’; //データを渡す //Input は外部のデータを参照するためのモジュールです import […]

【Angular】事件綁定與ngIf

基本用法 <li (click)=”onSelected(member)”> onclik → onclick事件 onSelected(member) → 綁定的handler函數,定義會寫在app.component.ts Typescript定義 export class Member { id: number; name: string; } //Member クラスのようにプロパティーを強制する const MEMBERS: Member[] = [ {id: 11, name: ‘武山学’}, {id: 12, name: ‘初音ミク’}, {id: 13, name: ‘桐山零’}, {id: 14, name: ‘三角竜之’}, {id: 15, name: ‘羽生結弦’}, {id: 16, name: ‘佐々木希’}, {id: 17, name: ‘松崎はとり’}, {id: […]

【Angular】Ngfor 迴圈

用途 可以迴圈生成HTML片段 物件設定 export class Member { id: number; name: string; } //Member クラスのようにプロパティーを強制する const MEMBERS: Member[] = [ {id: 11, name: ‘武山学’}, {id: 12, name: ‘初音ミク’}, {id: 13, name: ‘桐山零’}, {id: 14, name: ‘三角竜之’}, {id: 15, name: ‘羽生結弦’}, {id: 16, name: ‘佐々木希’}, {id: 17, name: ‘松崎はとり’}, {id: 18, name: ‘半沢直樹’}, {id: 19, name: ‘伊藤幸’}, […]

【Angular】雙向綁定

意涵 input元素⇄JS物件 input元素的值會由JS物件決定 當input發生輸入,新的值會重設JS物件的值 定義Property export class Member { id: number; name: string; } @Component({ selector: ‘my-app’, templateUrl: ‘./app.component.html’, styleUrls: [ ‘./app.component.css’ ] }) // プロパティーを定義する export class AppComponent { title=’自社社員名簿’; // クラスを型として指定。IDとnameのプロパティーをオブジェクトに強制したい member: Member={ id: 1, name: ‘山田太郎’ } } 設定HTML模板 <h1>{{title}}</h1> <h2>{{member.name}}</h2> <div> <label>id: </label> <span>{{member.id}}</span> </div> <div> <label>name: </label> <!– <span>{{member.name}}</span> –> […]

【TypeScript】interface

用法 interface(接口),可以強制定義class的屬性名稱,數量,型別 定義class //インターフェイスは定義だけで実装がない、クラスのようなものですものです //クラスに特定な機能を実装を強制する目的で利用されます interface Animal { name: string;//「name」というプロパティーをクラスに強制する legs: number; isCry: boolean; cry(): void; } class Dog implements Animal { name: string=’Maru’; legs: number=4; isCry: boolean=true; cry(): void{ if (this.isCry) { console.log(‘bow, wow!’); } } } 定義物件 interface Animal { name: string; legs: number; isCry: boolean; cry(): void; } let Dog: Animal { […]

【TypeScript】Generics 泛型

用法 透過參數客製化class,是TypeScript獨有的機能 傳統的寫法 class NumberStore{ data: number; } class StringStore{ data: string; } //型チェックができません class AnyStore{ data: any } 使用泛型的寫法 //Tという文字は自由に名付けられる class Store<T>{ data: T; getStore(): T{ return this.data; } } let stringStore=new Store(); stringStore.data = ‘X’; console.log(stringStore.getStore()); //’X’ let numberStore = new Store(); numberStore.data = 100000; console.log(numberStore.getStore()); //100000 函數的泛型 function hello<T>(keyword: T) { console.log(`Log: […]