标签归档:html5

jQuery综合小事例之简单事件处理

1、先看效果图:

2、演示地址:http://www.yusian.com/jquery/jquery_demo1.html

3、部分代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
        #list{
            margin: 100px auto;
        }
        #list,
        #confirm table{
            border-collapse: collapse;
        }
        #list td,
        #list th{
            border:1px solid red;
            text-align: center;
            padding: 10px 20px;
        }
        #confirm {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
        }
        #confirm .content{
            position: relative;
            display: inline-block;
            border: 1px solid #999;
            padding: 10px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 10px;
            background: #eee;
            box-shadow: 0 0 25px #fff;
        }
        .close{
            position:absolute;
            padding: 5px 10px;
            text-decoration: none;
            color: red;
            right: 10px;
            top: 0;
        }
        #confirm td,
        #confirm th{
            border-bottom: 1px solid red;
            text-align: left;
            padding: 10px 20px;
        }
        #confirm td{
            width: 200px;
        }
    </style>
    <script>
        $(()=>{
            // 表格基础样式处理
            $('#list tr').hover(function(){
                $(this).css('background', 'rgba(0,0,0,0.1)')
            },function(){
                $(this).css('background', 'white');
            });
            // 查看事件
            $('.show').click(function(){
                let array = [];
                $(this).parent().siblings().each(function(index){
                    let text = $(this).text();
                    array.push(text);
                });
                $('#confirm').show().find('td').each(function(index){
                    $(this).text(array[index]);
                })
            });
            // 删除事件
            $('.delete').click(function(){
                $(this).parents('tr').remove();
            });
            // 修改事件
            $('.modify').click(function(){
                alert('暂未实现');
            });
            // 关闭事件
            $('.close, #confirm').click(function(){
                $('#confirm').hide();
            });
            $('#confirm .content').click(function(event){
                event.stopPropagation();
            });
        })
    </script>
</head>
<body>
    <table id="list">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>Jack</td>
            <td>man</td>
            <td>23</td>
            <td>[email protected]</td>
            <td><a href="javascript:" class="show">查看</a> <a href="javascript:" class="modify">修改</a> <a href="javascript:" class="delete">删除</a></td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>female</td>
            <td>18</td>
            <td>[email protected]</td>
            <td><a href="javascript:" class="show">查看</a> <a href="javascript:" class="modify">修改</a> <a href="javascript:" class="delete">删除</a></td>
        </tr>
        <tr>
            <td>Jim</td>
            <td>man</td>
            <td>25</td>
            <td>[email protected]</td>
            <td><a href="javascript:" class="show">查看</a> <a href="javascript:" class="modify">修改</a> <a href="javascript:" class="delete">删除</a></td>
        </tr>
        <tr>
            <td>Lucy</td>
            <td>female</td>
            <td>20</td>
            <td>[email protected]</td>
            <td><a href="javascript:" class="show">查看</a> <a href="javascript:" class="modify">修改</a> <a href="javascript:" class="delete">删除</a></td>
        </tr>
    </table>
 
    <div id="confirm">
        <div class="content">
        <a href="javascript:" class="close">&times;</a>
        <table>
            <tr>
                <th>姓名</th>
                <td></td>
            </tr>
            <tr>
                <th>性别</th>
                <td></td>
            </tr>
            <tr>
                <th>年龄</th>
                <td></td>
            </tr>
            <tr>
                <th>邮箱</th>
                <td></td>
            </tr>
        </table>
        </div>
    </div>
</body>
</html>

Vue+Webpack打包后background-image无法正常显示

1、背景:正常情况下打包后的页面都是基于在网站根目录下运行,原则上不会出现这种情况,但如果项目放在网站的二级目录或本地运行(官方不建议本地运行项目,可能涉及到网络请求的问题)
2、基于项目在二级目录下运行,即打开时需要输入http://xxx.xxx.xxx/xxx,而不是直接http://xxx.xxx.xxx这种
3、二级目录下打包后的项目要能正常运行,需要在config/index.js中

build:{
   ....
   assetsPublicPath: '/'
   ....
}

修改成:assetsPublicPath: ‘./’
4、问题来了,因为是相对路径,所以在css中写的url是相对当前这个css文件的,所以打包后的背景图片url如果为static/img/xxx.jpg,结果解析出来的路径是xxxxx/static/css/static/img/xxx.jpg,图片当然无法正常显示了;
5、也许有些人会发现,为什么有些图片是正常的?好像并不是都不行啊,注意了,那些没有问题的图片看下路径是不是加载的base64格式?!
6、在webpack.base.conf.js中会有这么一段

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

这里的意思是说,小于10K的图片资源会在打包时直接转成base64,你可以把这个值放大,大于你的背景图,这样也可以解决
7、还有另外一个办法,在build/utils.js文件中找到下面这一段

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

修改成:

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

只是加了一行publicPath: ‘../../’,这样一来样式文件会相对于根目录加载,这种方式也是有局限性的,为什么可以写两个../就行了呢?因为我们的img与css都是放在static目录下的二级目录,所以两个../刚好到static同级,如果不是则会出错的哦,注意就行!

参考链接:https://segmentfault.com/q/1010000009700735

Vue项目中当前比较好的移动端UI库–vux

官方网址:https://vux.li

1.安装vux

npm install vux --save

2.安装vux-loader(vux2必须结合vux-loader使用)

npm install vux-loader --save-dev

请在build/webpack.base.conf.js里参照如下代码进行配置:

1
2
3
4
5
6
7
const vuxLoader = require('vux-loader')
// 官方文档这句话有点坑,基础不好的请注意,这里的意思是说将原来文件module.exports = {....}
// 替换成const webpackConfig = {....},没有"originalConfig"这个变量
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

3.安装less-loader以正确编译less源码

npm install less less-loader --save-dev

安装完成记得在webpack.base.conf.js里做如下配置,在extensions里加入less

1
2
3
4
5
6
7
resolve: {
    extensions: ['.js', '.vue', '.json', 'less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

4、安装 yaml-loader 以正确进行语言文件读取

npm install yaml-loader --save-dev

5、引入 reset.less,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在App.vue进行手动引入

1
2
3
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>