마법의 경량 JavaScript UI 구성 요소 그래픽 코드 자세한 설명
- 黄舟원래의
- 2017-03-13 17:13:142307검색
Magic 경량 JavaScript UI 컴포넌트의 그래픽 코드에 대한 자세한 설명
Magic은 JavaScript 기반의 UI 컴포넌트인 Magic 프레임워크입니다. 코드의 양이 매우 적고 실행 효율성이 뛰어납니다. 동시에 Magic에는 그림 회전판, 달력, 대화 상자, 페이징, 탭 및 기타 UI 구성 요소를 포함하여 일반적으로 사용되는 많은 웹 응용 프로그램 구성 요소가 포함되어 있습니다.
Magic의 특징
- Magic은 뛰어난 기능에 비해 코드의 양이 이미 매우 적습니다.
- 소스 코드 다운로드에는 필요한 기능만 패키징할 수 있으므로 프레임워크가 더 작아집니다.
- 은 JavaScript UI 프레임워크에서는 비교적 드물게 완전한 중국어 문서를 제공합니다.
소개
Magic은 작지만 필요한 구성 요소는 이미 매우 완벽합니다. 기본적으로 우리는 모든 것을 갖추고 있습니다. 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Carousel 组件 quickStart">
<title>图片轮播组件 quickStart</title>
<script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
<link rel='stylesheet' type='text/css' href='http://tangram.baidu.com/bcs/magic-586/resources/default/magic.control.Carousel/magic.control.Carousel.css'>
<script type='text/javascript' src='http://tangram.baidu.com/imports.php?f=magic.Carousel.$button'></script>
<style type='text/css'>
.tang-carousel {
width: 644px;
height: 140px;
}
.tang-carousel .tang-carousel-container ul,
.tang-carousel .tang-carousel-container ul li,
.tang-carousel .tang-carousel-container ul li img {margin: 0px; padding: 0px;}
</style>
</head>
<body>
<p id='one-carousel'></p>
<script type='text/javascript'>
baidu(function(){
var c = new magic.Carousel({
viewSize: 4,
originalIndex: 0,
items: [
{content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/0.png"/>'},
{content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/1.png"/>'},
{content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/2.png"/>'},
{content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/3.png"/>'},
{content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/4.png"/>'},
{content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/5.png"/>'},
{content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/6.png"/>'}
]
});
c.render('one-carousel');
});
</script>
</body>
</html> Magic Calendar 구성 요소
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="DatePicker 组件quickStart">
<title>日历组件quickStart</title>
<link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
<script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
<script type="text/javascript" src="http://tangram.baidu.com/bcs/magic-586/demos/common/demo.js"></script>
<link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/magic.Calendar/magic.Calendar.css">
<script type="text/javascript" src='http://tangram.baidu.com/imports.php?f=magic.setup.datePicker,magic.control.DatePicker.$title'></script>
</head>
<body>
<p class='demo'>
<h1>DatePicker </h1>
<form autocomplete="off">
<p>选择日期：<input type="text" id="J_input" /></p>
</form>
</p>
<script type="text/javascript">
var datepicker = new magic.setup.datePicker('J_input', {
'title': {
enable: false
}
}
);
</script>
</body>
</html>Magic Dialog 구성 요소
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Dialog 组件quickStart">
<script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
<link rel="stylesheet" type="text/css"
href="http://tangram.baidu.com/bcs/magic-586/resources/default/magic.control.Dialog/magic.control.Dialog.css">
<script type="text/javascript" src="http://tangram.baidu.com/imports.php?f=magic.Dialog"></script>
<title>对话框组件quickStart</title>
</head>
<body>
<p id="one-dialog">
</p>
<script type="text/javascript">
var dialog = new magic.Dialog({
draggable: true,
titleText: "对话框标题",
content: "对话框内容",
left: 80,
top: 40,
width: 400,
height: 300
});
dialog.render("one-dialog");
</script>
</body>
</html>더 많은 Magic 구성 요소를 보려면 해당 공식 웹사이트를 방문하고 자세한 중국어 설명서를 참조할 수도 있습니다.
위 내용은 마법의 경량 JavaScript UI 구성 요소 그래픽 코드 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.