标签: HTML

  • font-spider利器对webfont网页字体压缩使用  图文教程

    font-spider利器对webfont网页字体压缩使用 图文教程

    为什么要使用字蛛?

    由于中文的字体体积太大,一般都是几M以上。英文字体文字部分由26个字母组成,所以字体文件通常不会太大;而中文汉字数量总共约有九万左右, 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据,常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小,参照现在中国的网络环境,显然不适合在项目中使用。

    原理:

    1.爬行本地 html 文档,分析所有 css 语句
    2.记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器
    3.通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本
    4.找到字体文件并删除没被使用的字符
    5.编码成跨平台使用的字体格式

    简而言之:就是爬出你项目中所使用的文字保留起来,删除没被使用到的文字,并重新打包。

    安装

    npm install font-spider -g

    使用

    hyheilizhitij(汉仪黑荔枝体简)

    1.通过font-face引入我们下载好的文件

    @font-face{
    			font-family: 'myfont';
    			src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
    			font-weight: normal;
    			font-style: normal;
    		}
    

    2.使用自定义字体

    .test{font-family: 'myfont';}

    3.执行font-spider命令压缩字体
    运行font-spider命令 ,页面依赖的字体将会自动压缩好,原 .ttf 字体会备份

    font-spider ./index.html

    压缩之前是1753.24 KB大小,压缩之后大小4.796 KB
    Original size: 1753.24 KB
    File fonts/HYHeiLiZhiTiJ.ttf created: 4.796 KB

    完整代码

    <div class="test">
    		账号未登录
    	</div>
    	<style>
    		@font-face{
    			font-family: 'myfont';
    			src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
    			font-weight: normal;
    			font-style: normal;
    		}
    		.test{
    			font-family: 'myfont';
    		}
    	</style>

  • swiper修改轮播图箭头的大小和颜色

    swiper修改轮播图箭头的大小和颜色

    遇到的问题

    写响应式页面时需要将swiper的箭头按需要缩小到一定的比例。

    解决

    修改箭头的大小

    划重点:一定要在原css中就写上去,不然单独写到媒体查询里没有用。

    .swiper-button-prev:after, .swiper-button-next:after{
            font-size: 25px!important;
    }

    写到原css样式中,再写到媒体查询对应的地方,即可。

    修改箭头的颜色

    这个不用写到原生css样式中,直接在style中写就可以。

    .swiper-button-next, .swiper-button-prev{
            color: #FFFF00!important;
    }
  • HTML 禁止在手机浏览器中缩放

    HTML 禁止在手机浏览器中缩放

    在HTML的页面head中加入禁止缩放,代码如下:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

  • jQuery插件 — Cookie插件jquery.cookie.js 使用实例

    jQuery插件 — Cookie插件jquery.cookie.js 使用实例

    Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息

    使用方法:

    引入jquery.cookie.js

    <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>  
    <script src="scripts/jquery.cookie.js" type="text/javascript"></script>

    使用方法

    新添加一个会话 cookie

    $.cookie('the_cookie', 'the_value');

    注:当没有指明 cookie有效时间时,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为

    “会话cookie(session cookie)”。

    创建一个cookie并设置有效时间为 7天:

    $.cookie('the_cookie', 'the_value', { expires: 7 });

    注:当指明了cookie有效时间时,所创建的cookie被称为“持久 cookie (persistent  cookie)”。 

    创建一个cookie并设置 cookie的有效路径:

    $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

    注:在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突) 。 

    读取cookie:

    $.cookie('the_cookie'); // cookie存在 => 'the_value'
    $.cookie('not_existing'); // cookie不存在 => null

    删除cookie,通过传递null作为cookie的值即可:

    $.cookie('the_cookie', null);

    将cookie写入文件

    var COOKIE_NAME = 'username';  
        if( $.cookie(COOKIE_NAME) ){  
            $("#username").val(  $.cookie(COOKIE_NAME) );  
        }  
        $("#check").click(function(){  
            if(this.checked){  
                $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10, domain: 'jquery.com', secure: true });  
                //var date = new Date();  
                //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期  
                //$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });  
            }else{  
                $.cookie(COOKIE_NAME, null, { path: '/' });  //删除cookie  
            }  
        });

    参数设置

    expires: (Number | Date)      有效期,可以设置一个整数作为有效期(单位:天),也可以设置一个日期对象作为Cookie的过期日期。如果指定日期为负数,那么此cookie将被删除;如果不设置或者设置为null,那么此cookie将被当作Session Cookie处理,并且在浏览器关闭后删除

    path:  (String)          Cookie的路径属性,默认是创建该cookie的页面路径

    domain: (String)     Cookie的域名属性,默认是创建该cookie的页面域名

    secure: (Boolean)  如果设为true,那么此cookie的传输会要求一个安全协议,例如HTTPS

    jquery.cookie.js

    /**
     * Cookie plugin
     *
     * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     *
     */
    /**
     * Create a cookie with the given name and value and other optional parameters.
     *
     * @example $.cookie('the_cookie', 'the_value');
     * @desc Set the value of a cookie.
     * @example $.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});
     * @desc Create a cookie with all available options.
     * @example $.cookie('the_cookie', 'the_value');
     * @desc Create a session cookie.
     * @example $.cookie('the_cookie', null);
     * @desc Delete a cookie by passing null as value.
     *
     * @param String name The name of the cookie.
     * @param String value The value of the cookie.
     * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
     * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
     *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
     *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
     *                             when the the browser exits.
     * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
     * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
     * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
     *                        require a secure protocol (like HTTPS).
     * @type undefined
     *
     * @name $.cookie
     * @cat Plugins/Cookie
     * @author Klaus Hartl/klaus.hartl@stilbuero.de
     */
    /**
     * Get the value of a cookie with the given name.
     *
     * @example $.cookie('the_cookie');
     * @desc Get the value of a cookie.
     *
     * @param String name The name of the cookie.
     * @return The value of the cookie.
     * @type String
     *
     * @name $.cookie
     * @cat Plugins/Cookie
     * @author Klaus Hartl/klaus.hartl@stilbuero.de
     */
    jQuery.cookie = function(name, value, options) {
        if (typeof value != 'undefined') { // name and value given, set cookie
            options = options || {};
            if (value === null) {
                value = '';
                options.expires = -1;
            }
            var expires = '';
            if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == 'number') {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
                } else {
                    date = options.expires;
                }
                expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
            }
            var path = options.path ? '; path=' + options.path : '';
            var domain = options.domain ? '; domain=' + options.domain : '';
            var secure = options.secure ? '; secure' : '';
            document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
        } else { // only name given, get cookie
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    };
  • 在Python3 Django框架 模板中如何使用条件判断?

    在Python3 Django框架 模板中如何使用条件判断?

    老季在本篇记录一下在Django的开发中,如何在模板中使用if判断条件。

    views.py

    # view 文件
    def func(request):
        ...
        return render(request,"index.html",{
            'current_user':"alex",
            'user_list':['alex','eric',
            'user_dict':{'k1':'v1','k2':'v2'}]
        })

    .html 模板

    # html 文件
    <html>
        ....
    <body>
        <div>{{current_user}}</div>
        <a>{{ user_list.0}}</a>
        # 条件判断
        {% if age %}
            <a> 有年龄<a>
        {% else %}
            <a> 无年龄<a>
        {% endif %}
        # 嵌套条件判断
        {% if age %}
            <a> 有年龄<a>
        {% if age > 16 %}
            <a>老男人<a>
        {% else %}
            <a>小男孩<a>
        {% else %}
            <a> 无年龄<a>
        {% endif %}
        <body>
    </html>
  • django输出html内容

    django输出html内容

    最近在学习django,于是就用django做了一个简单的网站,用来练手,具体功能就是从网上抓取数据,然后放到我的网站上面,但是遇到一个问题就是django无法输出html格式的内容,只能以字符串的形式输出:

    data = '<h1>hello world</h1>'
    <p>{{ data }}</p>

    我们目的是输出的是:

    hello world

    但是结果输出的是:

    <h1>hello world</h1>

    在网上搜了好久,终于找到解决办法:

    对于单个变量使用django的过滤器,告诉Django这个字符串不用进行HTML转义,方法如下:

    data | safe

    对于一段模板内容可以使用autoescape标签,比如:

    {% autoescape off %}
         {{ data }}
     {% endautoescape %}

    off 的意思是关闭对html的转义,而将off替换成on就表示进行html转义,默认进行html转义

    注意:autoescape 具备继承性的,如果在父模版中定义了,则在子模版对应内容部分也存在此属性

    我们可能会疑问,django为什么要将这些字符转义,而不是按原本html的内容输出呢?
    我们举个例子:
    需要用户输入用户名来注册,这个用户输入了用户名为:

    <script type="text/javascript">alert('hello');</script>

    假设他输入的长度合法,而且django也确实没显式提供什么特殊字符转换方法,那么每次在网页上面显示的时候,岂不是每次都弹出一个窗口,那么不是就很不安全啦。
    为了解决这个问题,django默认将所有特殊的字符都转换成在html上面可以显示的内容,而不再包含转义功能!于是,也就出现了上面我想输出而输出而输出不了html的内容。

  • Vue.js 如何设置Select Option下拉值

    Vue.js 如何设置Select Option下拉值

    最近我们学习了解一下vue.js的基础内容,在Form表单中如何设定Select下拉框默认选中某个值。下面直接给出示范代码,这个示例还是比较容易理解的。

    HTML部分

    <script src="https://unpkg.com/vue@2.4.2"></script>
    <div class="form-group">
      <label class="control-label" for="docType">Type of document</label>
      <select class="form-control" id='docType' name="docType" v-model="docType" :disabled="noDocChoose == true">
                        <option value="paragon">Document1</option>
                        <option value="complaint">Document2</option>
                    </select>
    </div>

    JAVASCRIPT部分

    <script type="text/javascript">
    new Vue({
      el: ".form-group",
      data(){
        return {
          docType: "paragon"
        }
      }
    })
    </script>

    示例中,下拉 paragon 值就会被直接选中了。

  • Javascript开发jQuery Ajax 返回值如何阻止form表单提交?

    Javascript开发jQuery Ajax 返回值如何阻止form表单提交?

    在实际的开发业务中,我们一般会利用ajax检测一些东西,然后阻止表单提交。如果我们在 ajax 代码中直接使用 return false; 这里必须在 $.ajax 中设置 async:false 任然无法阻止表单提交,所以我们使用 the_submit 来控制表单是否提交。

    JAVASCRIPT代码部分

    <script type="text/javascript">
    $(function() {
        $("#addForm input.btn_submit").click(function(){
            var the_submit = true;
            if( $("input.name").val() == "" ){
                alert('请填写机房');
                $("input.name").focus();
                the_submit = false;
            }
            if( $("select.status").val() == "" ){
                alert('请选择状态');
                $("select.status").focus();
                the_submit = false;
            }
    	$.ajax({
                url:"/idc_xiaoshou/check_third_party_computer_room_name",
                dataType:"html",
                type:"post",
                data:{ name:$('input.name').val() },
                async:false,////////////
                success:function(data){
                  console.log(data);
                    if( data == 0 ){
                        alert("机房名重复");
                        $("input.name").focus();
                        the_submit = false;
                    }
                },
                error:function(data){
                    alert('UNKNOW ERROR');
                    the_submit = false;
                }
    	});
            if( !the_submit ){
                return false;
            }
        });
    
    });	
    </script>

    HTML代码部分

                <form enctype="multipart/form-data" action="/idc_xiaoshou/save_third_party_computer_room" method="post" id="addForm" name="form1" >     
                  <input type="hidden" name="id" value="<?php echo $obj['id']; ?>"/>
                  <table border="0" cellpadding="0" cellspacing="0" class="table2" style="margin:0 auto">          
                      <tr>
                          <td align="right">机房:</td>
                          <td><input class="textinput1 name" value="<?php echo $obj['name'];?>" type="text" name="name" style="width: 200px;"/></td>
                          <td><span class="color1">*</span></td>
                      </tr>
                      <tr>
                          <td align="right">状态:</td>
                          <td>
                              <select style="min-width: 100px" name="status" class="textinput1 status">
                                  <option value="" >所有</option>
                                  <?php foreach( $statusAry as $v):?>
                                  <option value="<?php echo $v;?>"><?php echo $v;?></option>
                                  <?php endforeach;?>
                              </select>        
                          </td>
                          <td><span class="color1">*</span></td>
                      </tr>
                      <tr>
                          <td align="right">备注:</td>
                          <td><textarea name="others" class="textinput1" cols="50" rows="10"><?php echo $obj['others']?></textarea></td>
                          <td></td>
                      </tr>        
                      <tr>
                          <td></td>
                          <td colspan="2"><input type="submit" value="提交" class="btn_submit"/></td>
                      </tr>
                </table>
                </form> 
  • jQuery获取append添加html内容后的动态元素:live()和on()

    jQuery获取append添加html内容后的动态元素:live()和on()

    jquery通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)

    $("ul").append("<li class='name'>名称</li>");

    错误方法:

    $(“.name”).click(function (){
    alert(“获取到append后的节点”);
    })

    正确方法:

    $(".name").live("click", function() {
        alert("获取到了");
    });

    jquery 1.7+之后用on代替live,on()方法在被选元素及子元素上添加一个或多个事件处理程序

    <div id=”one”></div>
    $(‘#one’).append(“<p id=’two’>test1</p>”);
    append后结果:
    $(‘#one’).append(“<p id=’two’>test1</p>”);

    错误示例:

    $("#two").on("click",function(data){
        alert(data);
    });

    正确方法:

    $("body").on("click","#two",function(data){
        alert(data);
    });
  • jQuery全文检索表格 特定文字变色高亮红色 图文教程

    jQuery全文检索表格 特定文字变色高亮红色 图文教程

    下面我们记录一下如何在table中检索每个文字,如果遇到我们设置的关键字设置为红色。不多说废话,直接上代码。

    jQuery Javascript代码:

    $(function () {        
            var redKey = '未审核';
            $('table.tbl_list tr').find("td").each(function(){
                if( $(this).html() == redKey ){
                  console.log( $(this).html());
                  $(this).css("color",'red');
                }
            });
    });

    HTML代码:

    <table class="tbl_list">
        <tr>
            <td>文字1</td>
            <td>未审核</td>
            <td>文字1</td>
            <td>文字1</td>
        </tr>
        <tr>
            <td>文字1</td>
            <td>未审核</td>
            <td>文字1</td>
            <td>文字1</td>
        </tr>
    </table>

    这里我们检索的时候是以td为单位进行检索的。如果是其他div等大家可以自由发挥。

  • ECharts图表中的XY轴长度过大如何截取?

    ECharts图表中的XY轴长度过大如何截取?

    前面我们记录了ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程,下面我们记录一下如果XY轴长度过大如何截取只显示一部分内容。

                axisLabel : { 
                    formatter: function (params){ //标签输出形式 ---请开始你的表演 
                        var my_length = 36;
                        if( params.length > my_length) return params.substring(0,my_length); 
                        else return params; 
                    }, 
                },

    在xAxis或者yAxis中设定一下长度,如下图:

    这里我们限定的字符长度是36,可以根据需求自行决定长度。

  • ECharts图表点击柱状打开a链接

    ECharts图表点击柱状打开a链接

    昨天我们记录了 ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程 ,今天我们记录一下在Echarts图标中我们点击柱状图的时候打开链接的需求,当然这里需要我们在传送过来的数组中要求链接才行。

    JAVASCRIPT代码

    var myChart = echarts.init(document.getElementById('yday_runtime_slow_10'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart.on('click',function(e){
    //    console.log(e);//调试的时候可以打开,根据实际情况来设定。
        window.open(e.name);
    });
WeChat