付费投稿安插

本文由码农网 –
小峰原创,转载请看清文末的转发须要,招待插足大家的付费投稿安插!

Magic是朝气蓬勃款基于JavaScript的UI组件,Magic框架的代码量非常少,运转效用特别优质。同期Magic包蕴了众多常用的网页应用组件,饱含图片轮播、日历、对话框、分页、选项卡Tab等UI组件。

图片 1

Magic的特点

  • 底层库基于百度的Tangram,Tangram是朝气蓬勃款相通于jQuery的JavaScript框架,最新的Magic能够选取使用Tangram作为底层库,同时也得以接纳jQuery作为底层库,极其灵活。
  • Magic十二分轻巧,对于其优秀的效果来说,代码量已经少之甚少了。
  • 源码下载可定制功效,你能够只打包你须要的效用,那样一来框架更加小了。
  • 提供全体的普通话文书档案,这在JavaScript UI框架中是相当少见的。

Magic的常用组件介绍

别看Magic比很小,可是其组件已经非常康健,你须求采用的花销组件基本都有了,一同来走访啊。

图片 2

图片 3

Magic图片轮播组件

图片 4

代码:

<!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>
<div id='one-carousel'></div>
<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日历组件

图片 5

代码:

<!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>
        <div class='demo'>
            <h1>DatePicker </h1>
            <form autocomplete="off">
                <p>选择日期:<input type="text" id="J_input" /></p>
            </form>
        </div>
        <script type="text/javascript">
            var datepicker = new magic.setup.datePicker('J_input', {
                    'title': {
                        enable: false
                    }
                }
            );
        </script>
    </body>
</html>

Magic对话框组件

图片 6

代码:

<!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>
        <div id="one-dialog">
        </div>
        <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组件能够访谈其官网,同期你也足以参谋其详细的国语文书档案。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website