Maison > Article > interface Web > Explication détaillée du code graphique du composant d'interface utilisateur JavaScript léger de Magic

Explication détaillée du code graphique du composant d'interface utilisateur JavaScript léger de Magic

黄舟original: 2017-03-13 17:13:142307parcourir

Magic léger JavaScript Explication détaillée du code graphique des composants de l'interface utilisateur

Magic est un composant d'interface utilisateur basé sur JavaScript, Magic framework The la quantité de code est très faible et l'efficacité d'exécution est excellente. Dans le même temps, Magic inclut de nombreux composants d'applications Web couramment utilisés, notamment des carrousels d'images, des calendriers, des boîtes de dialogue, des paginations, des onglets et d'autres composants d'interface utilisateur.

Fonctionnalités de Magic

La bibliothèque sous-jacente est basée sur le Tangram de Baidu, qui est un outil similaire à jQuery Framework JavaScript, le dernier Magic peut choisir d'utiliser Tangram comme bibliothèque sous-jacente, et vous pouvez également choisir jQuery comme bibliothèque sous-jacente, ce qui est très flexible.
Magic est relativement léger et la quantité de code est très faible pour ses excellentes fonctions.
Le téléchargement du code source a des fonctions personnalisables. Vous ne pouvez empaqueter que les fonctions dont vous avez besoin, ce qui rend le framework plus petit.
fournit une documentation chinoise complète, ce qui est relativement rare dans les frameworks d'interface utilisateur JavaScript.

Composants couramment utilisés de MagicIntroduction

Bien que Magic soit petit, ses composants sont déjà très complets. Les composants de développement que vous devez utiliser sont. en gros, nous avons tout, jetons un coup d’œil.

Composant carrousel d'images magiques

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>

Composant du calendrier magique

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>

Composant de dialogue magique

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>

Pour plus de composants Magic, vous pouvez visiter son site officiel, et vous pouvez également vous référer à sa documentation chinoise détaillée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de partage de code pour l'implémentation getter/setter en JavaScriptArticle suivant：Exemple de partage de code pour l'implémentation getter/setter en JavaScript

Articles Liés

Voir plus