padding5db79b134e9f6b82c0b36e0489ee08ed:10px;>magic 轻量级javascript ui组件图文代码详解
magic是一款基于javascript的ui组件，magic框架的代码量很少，运行效率非常出色。同时magic包含了很多常用的网页应用组件，包括图片轮播、日历、对话框、分页、选项卡tab等ui组件。
magic的特点底层库基于百度的tangram，tangram是一款类似于jquery的javascript框架，最新的magic可以选择使用tangram作为底层库，同时也可以选择jquery作为底层库，非常灵活。
magic比较轻巧，对于其出色的功能来讲，代码量已经非常少了。
源码下载可定制功能，你可以只打包你需要的功能，这样一来框架更小了。
提供完整的中文文档，这在javascript ui框架中是比较少见的。
magic的常用组件介绍别看magic很小，但是其组件已经非常完善，你需要用到的开发组件基本都有了，一起来看看吧。
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日历组件
代码：
<!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对话框组件
代码：
<!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组件可以访问其官方网站，同时你也可以参考其详细的中文文档。
以上就是magic 轻量级javascript ui组件图文代码详解的详细内容。