ホームページ > 記事 > ウェブフロントエンド > Magic の軽量 JavaScript UI コンポーネントのグラフィック コードの詳細な説明
Magic の軽量 JavaScript UI コンポーネントのグラフィック コードの詳細な説明
- 黄舟オリジナル
- 2017-03-13 17:13:142307ブラウズ
Magic LightweightJavaScript UIコンポーネントのグラフィックとテキストコードの詳細な説明
Magicは、コード量が少なく、動作効率に優れたJavaScriptベースのUIコンポーネントです。同時に、Magic には、画像カルーセル、カレンダー、ダイアログ ボックス、ページング、タブ、その他の UI コンポーネントなど、一般的に使用される Web アプリケーション コンポーネントが多数含まれています。
Magic の特徴
基盤となるライブラリは Baidu の Tangram に基づいています。Tangram は jQuery に似た JavaScript フレームワークです。最新の Magic は基盤となるライブラリとして Tangram を使用することを選択できます。基盤となるライブラリとして jQuery を使用し、非常に柔軟です。
Magic は比較的軽量で、その優れた機能の割にコードの量はすでに非常に少ないです。
ソースコードのダウンロードにはカスタマイズ可能な機能があり、必要な機能のみをパッケージ化できるため、フレームワークが小さくなります。
JavaScript UI フレームワークでは比較的珍しい、完全な中国語のドキュメントを提供します。
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>マジックカレンダーコンポーネント
<!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>マジックダイアログコンポーネント 
<!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 コンポーネントについては、公式 Web サイトにアクセスして、詳細な中国語ドキュメントを参照することもできます。
以上がMagic の軽量 JavaScript UI コンポーネントのグラフィック コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。