Magic Lightweight JavaScript Detaillierte Erläuterung des grafischen Codes von UI-Komponenten
Magic ist eine JavaScript-basierte UI-Komponente, das Magic-Framework Die Codemenge ist sehr gering und die Laufeffizienz ist ausgezeichnet. Gleichzeitig enthält Magic viele häufig verwendete Webanwendungskomponenten, darunter Bildkarussells, Kalender, Dialogfelder, Seiten, Registerkarten und andere UI-Komponenten.
Die zugrunde liegende Bibliothek basiert auf Baidus Tangram, einem Tool ähnlich zu jQuery JavaScript-Framework, das neueste Magic kann Tangram als zugrunde liegende Bibliothek verwenden, und Sie können auch jQuery als zugrunde liegende Bibliothek auswählen, was sehr flexibel ist.
Magic ist aufgrund seiner hervorragenden Funktionen bereits sehr klein.
Der Download des Quellcodes verfügt über anpassbare Funktionen. Sie können nur die Funktionen packen, die Sie benötigen, wodurch das Framework kleiner wird.
bietet eine vollständige chinesische Dokumentation, was in JavaScript-UI-Frameworks relativ selten ist.
Obwohl Magic klein ist, sind seine Komponenten bereits sehr vollständig und die Entwicklungskomponenten, die Sie verwenden müssen sind im Grunde Wir haben alles, werfen wir einen Blick darauf.
Code:
<!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>
Code:
<!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>
Code:
<!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>Weitere Magic-Komponenten finden Sie auf der offiziellen Website und in der ausführlichen chinesischen Dokumentation.
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des grafischen Codes der Magic Lightweight JavaScript UI-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
