<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="zhangcs">
<meta name="Keywords" content="frame">
<meta name="Description" content="frame">
<!-- css -->
<link type="text/css" rel="stylesheet" href="https://at.alicdn.com/t/font_901539_b2i57avtg9c.css" />
<link type="text/css" rel="stylesheet" href="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- jquery -->
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- ui框架 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/jquery.easyui.min.js"></script>
<!-- js框架 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-route.min.js"></script>
<!-- 视图插件 -->
<script src="http://www.my97.net/My97DatePicker/WdatePicker.js"></script>
<script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js"></script>
<script src="https://api.map.baidu.com/api?v=2.0&ak=n8cnIRhS3q7oRp9gSDnZ2Y5KRxHGpTI6&s=1"></script>
<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=54c5c9d5520a038657678a615eb01ade"></script>
<style type="text/css">
.panel-body {padding: 0}
.panel-body {height: 150px;}
.header {
height: 60px;
border: none;
background: #1CCAEC;
}
</style>
<title>框架大集合 | 几种框架混合使用</title>
</head>
<body>
<!-- sideNav -->
<ul style="position: fixed;right:0;bottom:20px;z-index:99" class="module">
<li class="btn btn-default" style=" 85px;">Bootstrap</li><br />
<li class="btn btn-default" style=" 85px;">EasyUI</li>
</ul>
<!-- Bootstrap 强大的栅格系统-->
<div class="container" module="Bootstrap">
<div class="row">
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">标题</div>
<div class="panel-body">
<ul>
<li><a class="btn btn-info" href="#/">首页</a></li>
<li><a class="btn btn-info" href="#/news">新闻</a></li>
</ul>
<div ng-view></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">标题</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">标题</div>
<div class="panel-body"></div>
</div>
</div>
</div>
<div class="row">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
你好
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- EasyUI 不写js -->
<div class="easyui-layout" fit="true" module="EasyUI">
<!-- north -->
<div data-options="region:'north',title:'title'" class="header">
</div>
<!-- south -->
<!--<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>-->
<!-- east -->
<!-- <div data-options="region:'east',title:'East',split:true" style="100px;"></div>-->
<!-- west -->
<div data-options="region:'west',title:'West',split:true" style="230px;padding:0;">
</div>
<!-- center -->
<div data-options="region:'center'" style="padding:0;">
<!-- tabs -->
<div class="easyui-tabs" fit="true" id="tabs">
<div title="BMap" >
<div id="map" style="height: 100%;"></div>
</div>
<div title="TMap">
<div id="TMap" style="height: 100%;"></div>
</div>
<div title="echarts">
<div id="chart" style="height: 100%;"></div>
</div>
<div title="echarts_bar">
<div id="echarts_bar" style="height: 100%;"></div>
</div>
<div title="panel | 面板">
<div id="p" class="easyui-panel" title="My Panel"
style="500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
</div>
<div title="window | 窗口">
<div id="win" class="easyui-window" title="My Window" style="600px;height:400px"
data-options="iconCls:'icon-save',modal:true,closed:true">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'east',split:true" style="100px"></div>
<div data-options="region:'center'" style="padding:10px;">
jQuery EasyUI framework help you build your web page easily.
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="javascript:alert('ok')" style="80px">Ok</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')" style="80px">Cancel</a>
</div>
</div>
</div>
</div>
<div title="dialog">
<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="400px;height:200px;padding:10px">
The dialog content.
</div>
</div>
<div title="datalist">
<ul class="easyui-datalist" title="DataList" data-options="checkbox: true,
selectOnCheck: false," style="400px;height:250px">
<li value="AL">Alabama</li>
<li value="AK">Alaska</li>
<li value="AZ">Arizona</li>
<li value="AR">Arkansas</li>
<li value="CA">California</li>
<li value="CO">Colorado</li>
</ul>
</div>
<div title="datagrid">
<table class="easyui-datagrid" title="Basic DataGrid" style="700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'http://www.jeasyui.net/demo/datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',80">Item ID</th>
<th data-options="field:'productid',100">Product</th>
<th data-options="field:'listprice',80,align:'right'">List Price</th>
<th data-options="field:'unitcost',80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',250">Attribute</th>
<th data-options="field:'status',60,align:'center'">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
<!--客户端脚本-->
<scri pt type="text/javascript" src="http://www.superslide2.com/jquery.SuperSlide.2.1.3.js"></script>
<script type="text/javascript" module="jQuery | 操作dom简化">
$(function() {
var $module = $('.module');
var $handle = $module.find('li');
$('[module=Bootstrap]').hide();
$($handle).click(function() {
$(this).addClass('btn-info').siblings().removeClass('btn-info');
if ($(this).text() == 'Bootstrap') {
$('[module=Bootstrap]').show();
$('[module=EasyUI]').hide();
} else {
$('[module=Bootstrap]').hide();
$('[module=EasyUI]').show();
}
});
var $row = $('.row'); // 父元素
var $col = $row.children('div');
console.log($col);
console.log($row);
var row = document.getElementsByClassName('row');
var col = row[0].childNodes;
console.log(row);
console.log(col);
});
</script>
<script type="text/javascript" module="BMap">
// 百度地图API功能
var map = new BMap.Map("map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(113.058477,28.282743), 12); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
<script type="text/javascript" module="TMap">
//初始化地图对象
map = new T.Map("TMap", {datasourcesControl: true});
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(113.058477,28.282743), 12);
//创建对象
var ctrl = new T.Control.MapType();
//添加控件
map.addControl(ctrl);
</script>
<script type="text/javascript" module="echarts">
var option = {
title : {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
var optionPie = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
$('#tabs').tabs({
border:false,
onSelect:function(title, index){
if (title == 'echarts') {
echarts.init(document.getElementById('chart')).setOption(option);
} else if (title == 'echarts_bar') {
echarts.init(document.getElementById('echarts_bar')).setOption(optionPie);
} else if (title == 'window | 窗口') {
$('#win').window('open');
} else if (title == 'dialog') {
$('#dlg').window('open');
}
}
});
var obj = {
name: '122323',
};
var Zhang = function() {
return '构造函数';
};
Zhang.prototype.version = '2323';
var _obj = new Zhang(); // {name:'zhangcs',__proto__:zhang.prototype}
</script>
<script type="text/javascript">
angular.module('app', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
console.log('=============================angular=============================');
console.log($locationProvider);
console.log($routeProvider);
console.log('=============================angular=============================');
$routeProvider
.when('/', {
template:'这是首页',
})
.when('/news', {
template:'这是新闻呀',
}).otherwise({
redirectTo:'/'
});
}]);
</script>
</html>