Maison >interface Web >js tutoriel >Explication détaillée du code graphique du composant d'interface utilisateur JavaScript léger de Magic
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.
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.
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.
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>
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!