Gridstack.js: gridstack.js์—์„œ jquery-ui ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 08์›” 18์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: gridstack/gridstack.js

jquery-ui 1.12.0์—์„œ๋Š” ๋ชจ๋“  ๊ด€๋ จ ํŒŒ์ผ์ด ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์•„๋‹Œ ui ๋””๋ ‰ํ† ๋ฆฌ๋กœ ์ด๋™๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ gridstack.js์˜ ๋‹ค์Œ ์ฝ”๋“œ๋Š” ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

if (์œ ํ˜• ์ •์˜ === 'ํ•จ์ˆ˜' && ์ •์˜.amd) {
define(['jquery', 'lodash', 'jquery-ui/data', 'jquery-ui/disable-selection', 'jquery-ui/focusable',
'jquery-ui/form', 'jquery-ui/ie', 'jquery-ui/keycode', 'jquery-ui/labels', 'jquery-ui/jquery-1-7',
'jquery-ui/plugin', 'jquery-ui/safe-active-element', 'jquery-ui/safe-blur', 'jquery-ui/scroll-parent',
'jquery-ui/tabbable', 'jquery-ui/unique-id', 'jquery-ui/๋ฒ„์ „', 'jquery-ui/์œ„์ ฏ',
'jquery-ui/widgets/๋งˆ์šฐ์Šค', 'jquery-ui/widgets/dragable', 'jquery-ui/widgets/droppable',
'jquery-ui/widgets/ํฌ๊ธฐ ์กฐ์ • ๊ฐ€๋Šฅ'], ๊ณต์žฅ);

๋Œ€์ฒดํ•˜๋ ค๋ฉด define(['jquery', 'lodash', 'jquery-ui']) ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ณ„์นญ ์žฌ์ •์˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋‹ค๋ฅธ jQueryUI ํ”Œ๋Ÿฌ๊ทธ์ธ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋ฉฐ, ์ด๋Š” ํ—ˆ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  4 ๋Œ“๊ธ€

jquery-ui ํŒŒ์ผ์€ bower๋ฅผ ํ†ตํ•ด ์„ค์น˜๋œ jquery-ui์šฉ v.1.11์˜ /ui ์— ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. gridstack์—์„œ jquery-ui ์˜ ์ •ํ™•ํ•œ ์œ„์น˜๋ฅผ ์ •์˜ํ•˜์ง€ ์•Š์Œ์œผ๋กœ์จ ์‹ค์ œ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

main.js ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

require.config({
    paths: {
        'jquery-ui': 'vendor/jquery-ui/ui/'
...

jqui์˜ ์ž์ฒด ํŽ˜์ด์ง€(https://learn.jquery.com/jquery-ui/environments/amd/)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ณด๋ฉด ์ด๊ฒƒ์ด ๊ฐ€์žฅ ์ ํ•ฉํ•œ ์†”๋ฃจ์…˜์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ถŒ์žฅ ์„ค์ •์„ ์—…๋ฐ์ดํŠธํ•œ ๊ฒฝ์šฐ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ˜„์žฌ๋กœ์„œ๋Š” ์ด ๋ฐฉ๋ฒ•์œผ๋กœ ์ถฉ๋ถ„ํ•ฉ๋‹ˆ๋‹ค. ๋” ๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ตœ์‹  jqui์— ๋Œ€ํ•œ ์ข…์†์„ฑ์„ ์—…๋ฐ์ดํŠธํ•จ์— ๋”ฐ๋ผ ์ด๊ฒƒ์„ ์—…๋ฐ์ดํŠธํ•  ๊ฒƒ์ด๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค.

ํ™•์ธ. ์•Œ๊ฒ ์–ด. ๊ฐ์‚ฌ ํ•ด์š”.

ๅŽŸๅง‹้‚ฎไปถ
ๅ‘ไปถไบบ:[email protected]
ๆ”ถไปถไบบ:troolee/gridstack.jsgridstack. [email protected]
ๆŠ„้€:[email protected]; ์ž‘์„ฑ์ž@noreply.github.com
ๅ‘้€ๆ—ถ้—ด:2016ๅนด8ๆœˆ19ๆ—ฅ(ๅ‘จไบ”) 04:38
ไธป้ข˜:Re: [troolee/gridstack.js] jquery-ui ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์ž˜๋ชป๋œ ingridstack.js(#513)

jquery-ui ํŒŒ์ผ์€ bower๋ฅผ ํ†ตํ•ด ์„ค์น˜๋œ jquery-ui์šฉ v.1.11์˜ /ui์— ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. gridstack์—์„œ jquery-ui์˜ ์ •ํ™•ํ•œ ์œ„์น˜๋ฅผ ์ •์˜ํ•˜์ง€ ์•Š์Œ์œผ๋กœ์จ ์‹ค์ œ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
main.js ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
require.config({ ๊ฒฝ๋กœ: { 'jquery-ui': 'vendor/jquery-ui/ui/' ...
jqui์˜ ์ž์ฒด ํŽ˜์ด์ง€(https://learn.jquery.com/jquery-ui/environments/amd/)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ณด๋ฉด ์ด๊ฒƒ์ด ๊ฐ€์žฅ ์ ํ•ฉํ•œ ์†”๋ฃจ์…˜์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ถŒ์žฅ ์„ค์ •์„ ์—…๋ฐ์ดํŠธํ•œ ๊ฒฝ์šฐ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ˜„์žฌ๋กœ์„œ๋Š” ์ด ๋ฐฉ๋ฒ•์œผ๋กœ ์ถฉ๋ถ„ํ•ฉ๋‹ˆ๋‹ค. ๋” ๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ตœ์‹  jqui์— ๋Œ€ํ•œ ์ข…์†์„ฑ์„ ์—…๋ฐ์ดํŠธํ•จ์— ๋”ฐ๋ผ ์ด๊ฒƒ์„ ์—…๋ฐ์ดํŠธํ•  ๊ฒƒ์ด๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค.
โ€”
์Šค๋ ˆ๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ฉ”์‹œ์ง€๋ฅผ ๋ฐ›๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ฑฐ๋‚˜ GitHub์—์„œ ๋ณด๊ฑฐ๋‚˜ ์Šค๋ ˆ๋“œ๋ฅผ ์Œ์†Œ๊ฑฐํ•˜์„ธ์š”.

jquery-ui๊ฐ€ ์กฐ์–ธ์„ ์—…๋ฐ์ดํŠธํ–ˆ์œผ๋ฉฐ ์ด์ œ gridstack.jQueryUI.js์˜ ๊ฒฝ๋กœ๊ฐ€ 'ui' ํด๋”๋ฅผ ํฌํ•จํ•˜๋„๋ก ๋ณ€๊ฒฝ๋  ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์€ jquery ui 1.12 ์—…๊ทธ๋ ˆ์ด๋“œ ๊ฐ€์ด๋“œ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

์—…๊ทธ๋ ˆ์ด๋“œํ•  ์ค€๋น„๊ฐ€ ๋˜๋ฉด ๊ฐ€์ ธ์˜ค๊ธฐ ๊ฒฝ๋กœ๋ฅผ ์—…๋ฐ์ดํŠธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ „์—:

var autocomplete = require( "jquery-ui/autocomplete" );
ํ›„์—:

var autocomplete = require( "jquery-ui/ui/widgets/autocomplete" );

๋‚ด Angular 2 CLI ํ”„๋กœ์ ํŠธ tsconfig.app.json ํŒŒ์ผ์— ๊ฒฝ๋กœ ๋ณ„์นญ์„ ์ถ”๊ฐ€ํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ์ง€๋งŒ ๊ฐ๋„ ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ์ค‘๋‹จ๋ฉ๋‹ˆ๋‹ค.
"baseUrl": "",
"๊ฒฝ๋กœ":{
"jquery-ui/ ":["jquery-ui/ui/ "]
}

"jquery-ui"๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ์‹œ๋„ํ•˜๋Š” ๋ฌดํ•œ ์žฌ๊ท€ ๋ฃจํ”„์— ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ ๊ฐ™์•„์š”. Angular 2 CLI ํ”„๋กœ์ ํŠธ์— ๋ณ„์นญ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๋ณ„์นญ ์žฌ์ •์˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋‹ค๋ฅธ jQueryUI ํ”Œ๋Ÿฌ๊ทธ์ธ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋ฉฐ, ์ด๋Š” ํ—ˆ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰