Home >Web Front-end >JS Tutorial >Magic lightweight JavaScript UI component graphic code detailed explanation

Magic lightweight JavaScript UI component graphic code detailed explanation

黄舟Original: 2017-03-13 17:13:142326browse

Magic lightweightJavaScript Detailed explanation of graphic code of UI components

Magic is a JavaScript-based UI component, Magic framework The amount of code is very small and the running efficiency is excellent. At the same time, Magic includes many commonly used web application components, including picture carousels, calendars, dialog boxes, paging, tabs and other UI components.

Characteristics of Magic

The underlying library is based on Baidu’s Tangram, which is a tool similar to jQuery JavaScript framework, the latest Magic can choose to use Tangram as the underlying library, and you can also choose jQuery as the underlying library, which is very flexible.
Magic is relatively lightweight, and the amount of code is very small for its excellent functions.
Source code download has customizable functions. You can only package the functions you need, which makes the framework smaller.
Provides complete Chinese documentation, which is relatively rare in JavaScript UI frameworks.

Commonly used components of MagicIntroduction

Although Magic is small, its components are very complete. The development components you need to use are basically We have it all, let’s take a look.

Magic image carousel component

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=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;http://tangram.baidu.com/bcs/magic-586/resources/default/magic.control.Carousel/magic.control.Carousel.css&#39;>
<script type=&#39;text/javascript&#39; src=&#39;http://tangram.baidu.com/imports.php?f=magic.Carousel.$button&#39;></script>
<style type=&#39;text/css&#39;>
.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=&#39;one-carousel&#39;></p>
<script type=&#39;text/javascript&#39;>
baidu(function(){
    var c = new magic.Carousel({
        viewSize: 4,
        originalIndex: 0,
        items: [
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/0.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/1.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/2.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/3.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/4.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/5.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/6.png"/>&#39;}
        ]
    });
    c.render(&#39;one-carousel&#39;);
});
</script>
</body>
</html>

Magic Calendar Component

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=&#39;http://tangram.baidu.com/imports.php?f=magic.setup.datePicker,magic.control.DatePicker.$title&#39;></script>
    </head>
    <body>
        <p class=&#39;demo&#39;>
            <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(&#39;J_input&#39;, {
                    &#39;title&#39;: {
                        enable: false
                    }
                }
            );
        </script>
    </body>
</html>

Magic Dialog Component

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>

For more Magic components, you can visit its official website, and you can also refer to its detailed Chinese documentation.

The above is the detailed content of Magic lightweight JavaScript UI component graphic code detailed explanation. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sample code sharing for getter/setter implementation in JavaScriptNext article：Sample code sharing for getter/setter implementation in JavaScript

See more