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

以上是整体布局

添加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>

js

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

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

数据格式

原文地址:https://www.cnblogs.com/Gao1234/p/8629684.html

时间: 2024-10-30 01:00:00

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

前端设计与实现,使用拖拽来调整交友对象的评分功能

我的一个交友网站,其独特的流程包括,用户通过搜索发现潜在对象,给潜在对象加关注和打分,使用获得2012诺贝尔经济奖的特殊匹配算法计算出相互匹配的对象并推荐給相关用户.在这里,对交友对象的评分功能是此网站的基础功能,其方便和平滑与否关系重大.本视频演示我的设计与实现. 页内拖拽 跨页拖拽 一次点击把目标用户放入一个缓存区,然后利用分页控制走到目的页面,再进行拖拽.好处是能够实现精确控制. 想想看,你会如何设计这一功能? 其他特点 精确和强大的筛选器,让用户随心所欲的控制筛选条件. 常用的筛选组合放

滑动删除Item,拖拽切换Item,你想了解的都在这儿

1. 概述 如果上两篇对RecyclerView介绍后,依然没有引起你的兴趣,那么下面关于RecyclerView的使用我相信一定会让你如获珍宝.直接看运行效果. 图-1 RecyclerView滑动删除 图-2 RecyclerView拖拽切换 用ListView或者GridView实现上图中的功能非常麻烦,而如果用RecyclerView来实现,则非常简单. 如果对RecyclerView还没有认识的同学,可以查看这两篇文章. RecyclerView使用一 RecyclerView使用二

利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局

1 实现效果 对于使用过CMS系统制作网站的人应该都清楚,制作网站过程有一个重要的步骤就是制作页面布局.目前,实现页面布局有两种方式:table与div.这两种方式各有其优劣之处. Table: 优势:使用简单,使用表格进行布局顺理成章,概念和效果图理解起来很简单,制作也方便. 劣势:表格布局比较固定,布局效果控制的比较死,一些较为特殊的效果.层叠效果等比较难以实现. Div: 优势:布局效果灵活,div能轻易的控制布局位置,浮动效果等. 劣势:操作较为复杂,需要前端布局设计人员对div的特性.

[iOS开发]屏幕适配二:Xcode7使用Autolayout拖拽布局基础(1)

参照自动布局教程一我们在Xcode7中来实现一下这个界面(由于教程是较早的Xcode版本所以来重做一遍)Xcode7中已经没有了pin这个选项了. 设计图如下: 实现步骤一:在Stroyboard上拖拽三个view并用不同的颜色表示,将他们修改到与设计图相似的大小效果图如下 实现步骤二:通过观察设计图可以发现三个view等高,上半部分两个view等宽,按住command单击选中三个view,使用autolayout约束为等高,同样选中上部两个view约束为等宽,实现过程如下: 同样的方式来处理上

Jquery实现可拖拽的树菜单

效果图如下所示:下载地址http://download.csdn.net/detail/javaquentin/8290417 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs

1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title> #parse("ui:include") <style> body{padding:0;margin:0} </style> <script> $(document).ready(function(){ var tabs_content = $

前端树状菜单

因为突然间用到这个东西,但是也不清楚别人是怎么做的,就自己根据自己的想法来了,效果还不错. 先思路,后代码: 思路:两个ul嵌套,把外层的ul显示出来,里层的ul先用样式表隐藏,当点击的时候,当前li下的ul状态更改为显示,就可以了 当点击其他的时候,先把外层li下所有的ul样式全为隐藏,然后再显示当前下的ul,大体思路就是这样 代码: <html><head>    <meta charset="UTF-8">    <title>Do

Android基础控件——RecyclerView实现拖拽排序侧滑删除效果

RecyclerView实现拖拽排序侧滑删除效果 事先说明: RecyclerView是ListView的升级版,使用起来比ListView更规范,而且功能和动画可以自己添加,极容易扩展,同样也继承了ListView复用convertView和ViewHolder的优点.   思路分析: 1.导包.在布局中使用RecyclerView 2.需要一个JavaBean用来存储展示信息 3.需要一个填充RecyclerView的布局文件 4.在代码中找到RecyclerView,并为其绑定Adapte

最近写的一个控件——Well Swipe 拖拽排序实现

如图: >删除过渡动画 >拖拽排序