前端的小玩意.删除.折叠.最大化.拖拽布局.树状菜单

最新推荐文章于 2024-01-26 11:54:41 发布

转载最新推荐文章于 2024-01-26 11:54:41 发布 · 181 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=hbcc0c110jhj&title=%E5%89%8D%E7%AB%AF%E7%9A%84%E5%B0%8F%E7%8E%A9%E6%84%8F.%E5%88%A0%E9%99%A4.%E6%8A%98%E5%8F%A0.%E6%9C%80%E5%A4%A7%E5%8C%96.%E6%8B%96%E6%8B%BD%E5%B8%83%E5%B1%80.%E6%A0%91%E7%8A%B6%E8%8F%9C%E5%8D%95

前端专栏收录该内容

241 篇文章

订阅专栏

本文介绍了一种自定义网页布局的方法，包括如何通过JavaScript删除DOM元素，实现元素的拖拽布局，以及使用Bootstrap进行折叠和最大化效果的技巧。同时，提供了具体的代码示例，如remove方法的自定义实现，以及利用DOM操作实现元素删除。

以上是整体布局

添加Remove方法

Array.prototype.indexOf = function (val) {
for (var i = 0; i < this.length; i  ) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function (val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};

传入id就能删除对应元素

function Delete(obj) {
var m = document.getElementById(obj);

m.parentNode.removeChild(m);

}

以下是调用方式

<a class="btn btn-default pull-right" onclick="Delete('wid-id-2')">
<span class="glyphicon glyphicon-remove"></span>
</a>

点击X按钮就会删除此处元素

以上两张图是折叠的效果.bootstrap自带的效果.简单高效

<a class="btn btn-default pull-right" data-toggle="collapse" href="#realtime">
<span class="fa fa-expand"></span>
</a>

 href="#realtime" 就是要折叠的div

以上是最大化效果

// 图表表格地图重绘代码不同.单独写方法

function ChangeVehicleCharts() {
var mycars = ["wid-id-0", "wid-id-1", "wid-id-2"];
for (var i = 0; i < mycars.length; i  ) {
if ("wid-id-1" == mycars[i]) {

mycars.remove(mycars[i]);
}
}
for (var i = 0; i < mycars.length; i  ) {
var item = document.getElementById(mycars[i]);
if (item != null) {
item.parentNode.removeChild(item);
}
}
document.getElementById("VehicleCharts").style.height = $(window).height() * 0.8   "px";
document.getElementById("VehicleCharts").style.width = $(window).width() * 0.8   "px";
myChart = echarts.init(document.getElementById('VehicleCharts'));
myChart.setOption(option);
myChart.resize();
}

代码很简单.删除元素了.自身最大化.一开始想隐藏的.但是高德地图的版本号一直碍事就干掉了。

页面上所有的模板都可以拖拽.所以在这个系统里也能自定义布局

引入 smart-charts.js

<div class="jarviswidget" id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">

注意标签和此div的class 和属性就能支持拖拽布局了.比网上找的很多拖拽布局插件好很多.

http://wrapbootstrap.com/preview/WB0573SK0

免费打个广告.有兴趣了解一下（以上是我使用的框架地址）

页面引入 <script src="~/js/bootstrap/bootstrap-treeview.js"></script>

html

  <div id="tree"></div>

      $('#tree').treeview({ data: data, showCheckbox: true });

data 来自ajax,showCheckbox 表示每行展示复选框

数据格式