Vue:切换class模拟实现tab

实现个切换

其实就是翻译了jQuery的removeClass和addClass,只是在Vue里面使用了变量去切换.

vuejs logo

运行效果

vuejs tab 运行效果

源码

源码比较简单,引用了bootcss的cdn服务.

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <style>
       

        .Grid {
            display: flex;
        }

        .Grid-cell {
            flex: 1;
            text-align: center;
        }

   

        .bottomActive{
            background-color: #00ff00;
        }

        .Grid .Grid-cell {
            padding:5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id="app">
    
            <div class="Grid">
                <div :class="[[{'bottomActive':1==bottomactive},'Grid-cell']]" @click="bottomMenuClick(1)"> 
                    <div>第一个</div>
                </div>
                <div :class="[{'bottomActive':2==bottomactive},'Grid-cell']" @click="bottomMenuClick(2)">
                    <div>第二个</div>
                </div>
                <div :class="[{'bottomActive':3==bottomactive},'Grid-cell']" @click="bottomMenuClick(3)">
                    <div>第三个</div>
                </div>
            </div>


    </div>
    <script>
    var vue = new Vue({
        el:"#app",
        data:{
            bottomactive:1
        },
        methods:{
            bottomMenuClick:function(index){
                console.log("index:"+index);
                this.bottomactive=index;
            }
        }
    })

    </script>
</body>

</html>

Element-UI:缓存Tabs打开的页签

竟然不缓存?

在使用Element ui 的时候,发现Tabs挺好用,于是做了这样一个页面:左侧是菜单,右侧顶部是Tabs,右侧下方是iframe.一切就绪,问题出现,就是每次点菜单的时候,Tabs就会新增一个页签,这导致iframe增加不少.于是想了个办法,来解决这个问题.

  1. 在menu菜单中,index直接为页面的名称;
  2. 在Select事件中,拿到index就可以请求页面了;
  3. 请求页面的时候,先判断页面是否已经存在于缓存中.如果存在则直接激活该页签,不存在就先添加到Tabs,然后激活,并放入缓存中.
  4. over……

但这样,存在另外一个问题:如果有几十个菜单,会堆叠几十个iframe.侧面一想,如果共用一个iframe,那么会出现另外一个问题,就是可能在上一个页面只输入了一部分文本,还没处理就切换页签,会丢失上个页面的数据.

于是,在菜单量不多的情况下,还是每个页签一个单独的iframe.便于处理.

html

源码

只有main.html是有实质内容的,其余html都是为了演示数据.

代码可以直接在本地运行,可以保存成文件,进行运行.

main.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>系统管理</title>
    <link href="https://cdn.bootcss.com/element-ui/1.4.0/theme-default/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/1.4.0/index.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .left-menu {
            width: 200px;
        }
    </style>
</head>

<body>
    <h1 class="title">系统管理</h1>
    <div id="app">
        <template>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple">
<el-menu default-active="userList" class="left-menu" @select="menuSelect" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <span slot="title">用户</span>
    </template>
        <el-menu-item-group>
            <el-menu-item index="userList">用户列表</el-menu-item>
            <el-menu-item index="userAdd">用户添加</el-menu-item>
        </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title">
      <span slot="title">权限</span>
    </template>
            <el-menu-item-group>
                <el-menu-item index="roleList">权限列表</el-menu-item>
                <el-menu-item index="roleAdd">权限添加</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        </el-menu>
    </div>
    </el-col>
    <el-col :span="20">
        <div class="grid-content bg-purple-light">
            <el-tabs v-model="editableTabsValue" closable @tab-remove="removeTab" type="card">
                <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs"  :label="item.title" :name="item.name">
                    <iframe class="iframepage" :src="item.content" width="100%" onload="changeFrameHeight()" style="border: none;" height="100%"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-col>
    </el-row>

    </template>
    </div>
    <script>
        Vue.config.devtools = true;
        var Main = {
            data() {
                return {
                    isCollapse: false,
                    editableTabsValue: '1',
                    editableTabs: [{
                        title: '用户列表',
                        name: '1',
                        content: 'userList.html',
                        closable: false
                    }],
                    tabInfoObj: {}, // 缓存tabs打开的页签.
                    tabIndex: 1
                }
            },
            methods: { //给自定义的组件绑定事件
                selectMenu(key) {
                    var title = '';
                    switch (key) {
                        case 'userList':
                            title = '用户列表';
                            break;
                        case 'userAdd':
                            title = '用户添加';
                            break;
                        case 'roleList':
                            title = '权限列表';
                            break;
                        case 'roleAdd':
                            title = '权限添加';
                            break;
                    }
                    return title;
                },
                menuSelect(key, keyPath) {
                    if (this.tabInfoObj[key]) { // 判断,如果页签已经打开,则直接切换.
                        this.editableTabsValue = this.tabInfoObj[key] + '';
                    } else { // 如果页面未打开,则直接打开并添加到缓存对象中.
                        this.tabIndex += 1;
                        this.tabInfoObj[key] = this.tabIndex;
                        let newTabName = this.tabIndex + '';
                        this.editableTabs.push({
                            title: this.selectMenu(key),
                            name: newTabName,
                            content: key + '.html'
                        });
                        this.editableTabsValue = newTabName;
                    }
                },removeTab(targetName) {
                                // 关闭页签的时候,同时将其从缓存中删除(否则将导致后面不能再次添加).
                                for (var a in this.tabInfoObj) {
                		    if(this.tabInfoObj[a]==targetName){
                			delete this.tabInfoObj[a];
                			break;
                		   }
                	        };
			        let tabs = this.editableTabs;
			        let activeName = this.editableTabsValue;
			        if (activeName === targetName) {
			          tabs.forEach((tab, index) => {
			            if (tab.name === targetName) {
			              let nextTab = tabs[index + 1] || tabs[index - 1];
			              if (nextTab) {
			                activeName = nextTab.name;
			              }
			            }
			          });
			        }
			        this.editableTabsValue = activeName;
			        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
			      }  
            },
            created: function() {
            	// 把第一个页面添加到缓存中.
                this.tabInfoObj.userList = '1';
            }
        };
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')


        // 设置iframe高度自适应.
        function changeFrameHeight() {
            var ifm = document.getElementsByClassName("iframepage");
            for (var i = ifm.length - 1; i >= 0; i--) {
                ifm[i].height = document.documentElement.clientHeight;
            };
        }
        window.onresize = function() {
            changeFrameHeight();
        }
        // 设置iframe高度自适应 end.
    </script>
</body>

</html>

roleList.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>权限列表</title>
</head>
<body>
    权限列表
</body>
</html>

userAdd.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>用户添加</title>
</head>
<body>
    用户添加
</body>
</html>

userList.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>用户列表</title>
</head>
<body>
    用户列表
</body>
</html>

roleAdd.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>权限添加</title>
</head>
<body>
    权限添加
</body>
</html>

IWarn:第一个Chrome扩展应用

第一个Chrome应用

她有以下特点:

  1. 大部分代码,使用最新ES6标准编写(因此仅保证支持最新版Chrome浏览器)
  2. 结构化代码,清晰可描述
  3. 使用HTML5中的LocalStorage存储您的数据
  4. 代码简单、开源,可按照需要修改成您自己的扩展
  5. 大概就上面这几个…

上个图…

IWarn效果.
image-2451

嗯~实现了大概就是上面这个样子…

我为什么要了解Chrome扩展?

Chrome扩展可以直接调用Chrome浏览器提供的API(官网),可无障碍操作网页内容以及提示用户等等。

如果安装过百度翻译扩展(官网),就会明白其对网页内容进行划词翻译是如何实现的了.

当你想做一些事情来方便自己,就可以了解一下Chrome扩展开发了.

上面其实是废话…

IWarn简单说下

每一个Chrome扩展,都一定会有一个文件(manifest.json),这个文件相当于一个清单文件.它会告诉Chrome你使用了什么权限,引用了那些资源,叫什么名字等等.


//manifest.json
{
"name": "IWarn", # 名字
"version": "0.9.0", # 版本
"permissions":["contentSettings","tabs","notifications"], # 需要的权限:["内容设置","标签控制","系统通知(浏览器层级)"]
"content_scripts":[{ # 扩展访问用户正在浏览网页
"matches":[""], # 针对所有网页,此处可以配置单独的url
"js":["js/jquery.min.js","js/json2.js","js/content.js"], # 将这三个JS注入用户正在浏览的网页中..
"all_frames": true, # 顶层使用
"run_at":"document_end" # 浏览器DOM加载完成后启动..
}],
"manifest_version":2,
"description": "当访问指定网页,通知一个消息给自己", # 扩展应用描述.
"browser_action": { # Chrome浏览器右侧的图标控制
"default_icon": "image/icon.png" , # 扩展应用的图标
"default_title": "点击新增一个网址,通知给自己.", # 默认标题
"default_popup": "popup.html" # 点击图标之后,访问的HTML.
},
"background":{ # 常驻后台的JavaScript文件,用于给content_scripts中的content.js提供数据
"scripts":["js/background.js"] # 监听来自content.js的请求
},
"optional_permissions": ["notifications"], # 右键图标之后,选项页面需要的权限..
"options_page": "options.html" # 选项页面地址.
}

好了,大概就是上面酱紫.

更多可以看下官网的定义(Google官方,360中文翻译).

因国内很多浏览器已经改用Google内核进行开发,所以开发的Chrome扩展可以直接应用于国内部分浏览器(360极速是其中之一).

对于新动向,建议关注官方文档.


// background.js
/*

-- 我是 常驻在后台的JavaScript文件.
-- 也就是你看不见、看不见我操作界面..
-- 其实是这样的:
-- 随时在后台准备着,如果有请求过来,来自[content.js]我就会去查询LocalStorage.然后返回结果.

-- 更多 - 请看到底部.

*/
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // 监听事件.

if (request.method == "getLocalStorage"){ // 如果是指定的请求.. 不明白去看看[content.js]哈.
sendResponse({data: localStorage[request.key]}); // 发送指定的查询数据呢.即使没有...也要发送
} else{
sendResponse({}); // 如果不是...就随便返回个空......
}

});
// -- by PRD 2016-06-18.
// -- CODE IS POETRY.
// -- WWW.07Q.NET

上面是驻留后台的JavaScript文件,其中的chrome.runtime.onMessage.addListener是用于监听来自content.js的请求.然后去LocalStorage中查询相关数据并返回(关于LocalStorage).

简单介绍如上..更多可以看源码.

关于ES6

开发这个扩展的时候,Chrome已经支持大部分ES6标准的新特性.

因此……..我果断选择了ES6进行开发,简单介绍如下:

ES6:定义变量

ES6之前:


var a = "a";
var b = "b";
var c = "c";

ES6:


let {a,b,c} = JSON.parse({"a":"a","b":"b","c":"c"});

函数定义

ES6之前:

function add(data,value,isclose){}

ES6:


(data,value,isclose)=>{}

更多的ES6新标准,可以参考:ES6中文翻译

源码

已将所有文件都开源了.可以访问Github进行下载.(地址)

如需帮助可通过上述网页中的邮件地址联系我..

这段时间…

看各种乱七八糟的,随便看.偶然看到Chrome扩展,就想起要不写一个吧.花了几天时间写出来了,并且进行了十分详细的注释.然后扔到Github.继续去学各种乱七八糟的了..

加油.

不忘初心,方得始终.

JavaScript:计算数字获得其个位数

问题在此

输入一个数字,计算其中的数的和,直至为个位数.

例如:

计算数字:输入[25251],得到->15,继续获取得到->6.

html

源代码





计算数字





计算数字:输入[25251],得到->15,继续获取得到->6.



Java实现


import java.io.*;
import java.util.Scanner;

/**
* 计算数字.
*

*

* Created by prd on 2016/03/24.
*/
public class Main {

public static void main(String[] args) throws IOException {
Scanner sc = new Scanner(System.in);
System.out.println("---->随便输入个数字:");
try {
int number = sc.nextInt();
String numstr = String.valueOf(number);
System.out.println("您输入的是:" + numstr + ",计算结果是:" + jisuan(numstr));
} catch (Exception e) {
e.printStackTrace();
System.out.println("------>逗逼,不要乱输入!");
}
}

/**
* 计算数字,
* 例如:
* 1.输入[25251],
* 2.先计算出[15],
* 3.计算结果[15]大于等于10,
* 4.继续进行计算,得出最终结果[6]返回给调用者.
*
* @param numstr
* @return
*/
private static int jisuan(String numstr) {
int result = 0;
String[] array = numstr.split("");
for (int i = 0; i < array.length; i++) result += Integer.valueOf(array[i]); return (result >= 10) ? jisuan(String.valueOf(result)) : result;
}
}

亲测可用.推荐使用Chrome运行.

这是一个疲乏的时代

写在最前面

这一个月变化很大,发生了太多事情,比如最近,人人影视、射手关了。

虽然之前很少接触这两个网站,但是一想到字幕,就一定会想到这两个网站。心痛,震惊,还是有点惋惜。不过好在人人影视勉强还可以访问(xu!)。最近因为各种原因很少上网,倒是通过离线的资料了解(仅限于了解)了一些语言,比如大家都知道的PHP,还有Python(之前通过廖雪峰的教程学习过),以及Node.js,看的挺杂的,但是部分还是记住了。

写了这半天,该说说标题了。为啥会这么说呢?你想想,字幕,每天生活在一张大网里面,当有那么一刻忽然远离,才发现已经不习惯了,甚至都不敢想象。

前几天在网上看到一些话,有个人正在学IOS开发,但还是HTML掌握的不好。看了这段话之后,立刻就去找了些html5+css3的资料关注一下[可以去w3cschool.cc参考,并且有离线版]。

html

我的HTML5和CSS3″学习”

基本上不会刻意去记录每个元素[也可以叫标签],当然除了css3的圆角其他的也很少刻意去记录。下面是我练习的css3界面,可以直接删除部分注释测试效果[浏览器当然要先进的了,比如chrome,firefox,opera的高版本].






CSS3测试页面



CSS3中包含几个新的背景属性,提供更大背景元素控制。

在本章您将了解以下背景属性:

background-size
background-origin
您还将学习如何使用多重背景图像。

--------------------------------------------------------------------------------

浏览器支持
属性 浏览器支持
background-size
background-origin

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持最新的背景属性。

--------------------------------------------------------------------------------

CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。