TypeScript jquery類代碼示例

import * as joint from "../../build/joint";
import './custom';
import {V, g} from "../../build/joint";
import * as $ from "jquery";

const $body = $('body');
const svg = joint.V('svg');
const svgRect = V('rect').attr({fill: 'red', width: 80, height: 50});
const svgEllipse = V('ellipse').attr({fill: 'green', rx: 100, ry: 50, cx: 200, cy: 80, x: 20, y: 30});

svg.append(svgRect);
svg.append(svgEllipse.node);

$body.append($('<h3/>').text('Example SVG created by Vectorizer'));
$body.append(svg.node);

const graph = new joint.dia.Graph;
const paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 650,
    height: 400,
    gridSize: 20,
    model: graph,
    markAvailable: true,
    defaultLink: new joint.shapes.app.Link()
});

let rect = new joint.shapes.basic.Rect()
    .position(10, 10)
    .size(100, 100)
    .addTo(graph)

function lnk(id: string, txt?: string) {
	var a = $('<a/>', {href: '#'+id});
	a.text(txt || (helpData[_.toLower(id)] || new HelpData(id, () => [])).title);
	return a;
}

	protected close() {
		this.element.fadeOut();
		$('body').removeClass('modal-open');
	}

$(() => {
    $.ajax({
        url:'/stockdata/'+stock,
        success:(candles:Candle[])=>{

            const candleList:CandleList = new CandleList(candles);

            let sma8:any[] = candleList.getSMA(8);
            let sma21:any[] = candleList.getSMA(21);
            let sma55:any[] = candleList.getSMA(55);
            
            candles = candles.slice(-180);
            sma8 = sma8.slice(-180);
            sma21 = sma21.slice(-180);
            sma55 = sma55.slice(-180);
            
            $('body').append('<div id="chart"></div>');
            
            const chart = new Chart({
                svg:d3.select('#chart').append('svg'),
                width:1350,
                height:300,
                padding:{top:50,right:70,bottom:0,left:0},
                dateArray:candles.map(candle => candle.date),
                minValue:d3.min(candles.map(candle => candle.low)),
                maxValue:d3.max(candles.map(candle => candle.high))
            });
            
            chart.plotPivots(new CandleList(candles).getPivots().lows,'pivot-lows','blue','low');
            chart.plotPivots(new CandleList(candles).getPivots().highs,'pivot-highs','red','high');
            
            chart.plotDateAxis('date-axis');
            chart.plotValueAxis('price-axis',10);
            // chart.plotSupportLines(candles);
            chart.plotCandles(candles,'price-chart');
            chart.onMouseMove(date=>{
                console.log(date);
            });
            // chart.plotCurve(candles.map(candle => {return {
            //     date:candle.date,
            //     value:candle.low
            // }}),'price-chart','yellow');
            // chart.plotCurve(candles.map(candle => {return {
            //     date:candle.date,
            //     value:candle.high
            // }}),'price-chart','steelblue');
            // chart.plotCurve(sma8,'price-sma-8','red');
            // chart.plotCurve(sma21,'price-sma-21','blue');
            // chart.plotCurve(sma55,'price-sma-55','yellow');
            
            
            
            chart.plotCrossHair();
        },
        error:(error) => {
            console.log(error);
        }
    });
});

 constructor(elementRef: ElementRef) {
   this.element = $(elementRef.nativeElement);
   GROUPS.set(this.scrollGroup, GROUPS.get(this.scrollGroup) || []);
   GROUPS.get(this.scrollGroup).push(this.element);
 }

		this.element.on('click', function (e: any) {
			var target = $(e.target);
			if (!target.closest('.modal-dialog').length) {
				modal.close();
			}
		});

 renderEl() {
   const scrollEl = super.renderEl()
   return $('<div class="fc-scroller-clip" />').append(scrollEl) // return value
 }

function print_log(msg: Log) {
    const log_line = $("<div></div>").text(msg.line);
    console.log("line")
    $('#log').append(log_line);
}

export function canUndo(): boolean {
    return (
        getTheOneReaderToolsModel().shouldHandleUndo() &&
        getTheOneReaderToolsModel().canUndo()
    );
}

export function undo() {
    getTheOneReaderToolsModel().undo();
}

export function applyToolboxStateToPage() {
    applyToolboxStateToUpdatedPage();
}

$(document).ready(() => {
    getTheOneToolbox().initialize();
});

// Make the one instance of each Toolbox class and register it with the master toolbox.
// The imports we need to make these calls possible also serve to ensure that each
// toolbox's code is made part of the bundle.
ToolBox.registerTool(new BookSettings());
ToolBox.registerTool(new DecodableReaderToolboxTool());
ToolBox.registerTool(new LeveledReaderToolboxTool());
ToolBox.registerTool(new MusicToolAdaptor());
ToolBox.registerTool(new ImpairmentVisualizerAdaptor());
ToolBox.registerTool(new MotionTool());
ToolBox.registerTool(new TalkingBookTool());
ToolBox.registerTool(new SignLanguageTool());
ToolBox.registerTool(new ImageDescriptionAdapter());

		$('#content').slideUp(function() { $('#content').empty().append(content).slideDown(); });