您的位置:68399皇家赌场 > 服务器租用 > JavaScript仿搜狐输入框效果(案例剖判)

JavaScript仿搜狐输入框效果(案例剖判)

发布时间:2019-06-14 20:56编辑:服务器租用浏览(138)

    废话相当的少说了,直接给大家贴代码了,具体代码如下所示:

    那篇小说给我们享受一个小的JavaScript的案例,正是模仿博客园输入框的机能。

    效果:

     先给我们简要介绍下avalon概念

    <div class="content_table" ms-controller="checkname">
      <table>
        <thead>
          <tr>
            <th width="15%">提交核名</th>
            <th width="85%">请提供您打算使用的3个公司名称,我们将帮您注册并向登记机关提交您的核名信息。</th>
          </tr>
        </thead>
        <tbody >
          <tr>
            <td colspan="2">
              <p class="or">看我的公司名是否已被占用</p>
              <a class="refer">立即查询</a>
            </td>
          </tr>
          <tr>
          <td colspan="2">
            <p class="matter">
              <label>
                行政区域:
                <select name="" id="selArea" class="select_t" :duplex="@AdministrativeRegions">
                  <option value="天津市">天津市</option>
                </select>
              </label>
            </p>
            <form action="" id="c_name">
            <p class="matter">
              <label>
                字号:
                <input class="thing thing_nn" type="text" placeholder="云信" name='c_name' ms-duplex="@FiledOne"><br>
                <input class="thing thing_nn thing_add" type="text" name='s_name' placeholder="请输入第二个公司名称" ms-duplex="@FiledTwo"><br>
                <input class="thing thing_nn thing_add" type="text" name='t_name' placeholder="请输入第三个公司名称" ms-duplex="@FiledThree">
                <p class="err_tips"></p>
                <h4 style="font-weight: 300;width: 80%;margin: 0 0 20px 65px;"><em>提示:</em>1.企业名称=行政区域 字号 行业特点 公司类型,如北京云信科技有限公司,字号则为云信;2.字号由两个以上的汉字组成,不可输入外国文字、汉语拼音、阿拉伯数字;</h4>
              </label>
            </p>
            </form>
            <p class="matter">
              <label>
                行业特点:
                <select ms-duplex="@firstSelected" class="select_t thing" id="trade_a">
                  <option ms-for="el in @first" ms-attr="{value:el}" >{{el}}</option>
                </select>
                <select class="select_t thing" id="trade_b" :duplex="@secondSelected">
                  <option ms-for="el in @second" ms-attr="{value:el}" >{{el}}</option>
                </select>
              </label>
            </p>
            <p class="matter">
              <label>
                公司类型:
                <a style="display: inline-block;">{{@TypeOfCompany}}</a>
              </label>
            </p>
            <div class="text_t">根据您输入的信息生成的名称如下(请选择您中意的3个名称):</div>
            <div class="three_select">
              <label><input type="checkbox" name="apk[]" value="1">{{@AdministrativeRegions   @FiledOne   @secondSelected   @TypeOfCompany}}</label>
              <label><input type="checkbox" name="apk[]" value="2">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected   @TypeOfCompany}}</label>
              <label><input type="checkbox" name="apk[]" value="3">{{@FiledOne   @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
              <!--<label><input type="checkbox" name="apk[]" value="10">{{@AdministrativeRegions   @FiledOne   @secondSelected   @TypeOfCompany}}</label>
              <label><input type="checkbox" name="apk[]" value="11">{{@FiledOne }} ({{@AdministrativeRegions}}) {{@secondSelected   @TypeOfCompany}}</label>
              <label><input type="checkbox" name="apk[]" value="12">{{@FiledOne   @secondSelected }} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>-->
              <div class="my_comp_f">
                <label><input type="checkbox" name="apk[]" value="4">{{@AdministrativeRegions   @FiledTwo   @secondSelected   @TypeOfCompany}}</label>
                <label><input type="checkbox" name="apk[]" value="5">{{@FiledTwo}} ({{@AdministrativeRegions}}) {{@secondSelected   @TypeOfCompany}}</label>
                <label><input type="checkbox" name="apk[]" value="6">{{@FiledTwo   @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
              </div>
              <div class="my_comp_t">
                <label><input type="checkbox" name="apk[]" value="7">{{@AdministrativeRegions   @FiledThree   @secondSelected   @TypeOfCompany}}</label>
                <label><input type="checkbox" name="apk[]" value="8">{{@FiledThree}} ({{@AdministrativeRegions}}) {{@secondSelected   @TypeOfCompany}}</label>
                <label><input type="checkbox" name="apk[]" value="9">{{@FiledThree   @secondSelected}} ({{@AdministrativeRegions}}) {{@TypeOfCompany}}</label>
              </div>
            </div>
            <div class="table_button">
              <!--<a class="next_step" href="submit_name_perfect.html" rel="external nofollow" >下一步,完善核名信息</a>-->
              <a class="next_step" href="javascript:void(0);" rel="external nofollow" >下一步,完善核名信息</a>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <script src="http://www.nuyizu.com/uploads/allimg/190614/205613C45-0.jpg"></script>
    $(document).ready(function(){
      var citys=$('#selArea').val();
    if(citys == "天津市"){
      $('.refer').attr("href","http://zzsb.tjmqa.gov.cn/selfreport/nameregister/goMain");
      $('#selArea').append('<option>天津</option><option>天津滨海新区</option><option>天津市滨海新区</option>');
    }else if(citys == "绵阳市"){
      $('#selArea').append('<option>绵阳</option><option>绵阳高新区</option>');
    }
    });
    var map = {
      "科技类": ['请选择','科技','教育科技','科技发展','生物科技','电子科技','环保科技','网络科技','生化科技','激光科技','节能科技','能源科技','农业科技','医药科技等'],
      "技术类": ['请选择','技术','环境技术','农业高新技术','检测技术','信息技术','经济技术','消防技术','工程技术','机电技术','生物技术','新能源技术'],
      "文化类": ['请选择','文化','文化发展','文化传播','文化传媒','文化交流'],
      "咨询类": ['请选择','咨询','信息咨询','教育咨询','投资咨询','管理咨询','建筑设计咨询','文化信息咨询'],
      "培训类": ['请选择','培训','技术培训','企业管理培训','计算机技术培训'],
      "设计类": ['请选择','设计','建筑设计','家居装饰设计','旅游规划设计'],
      "服务类": ['请选择','服务','劳务服务','会议服务','家政服务','商务服务','婚庆服务'],
      "广告类": ['请选择','广告','广告传媒'],
      "商贸类": ['请选择','商贸','贸易','服装装饰','针纺织品','装饰品'],
      "贸易类": ['请选择','进出口贸易'],
      "租赁类": ['请选择','建筑机械设备租赁','骑车租赁'],
      "工程类": ['请选择','工程','建筑工程','装饰工程','园林绿化工程','照明工程','通讯工程'],
      "物流类": ['请选择','物流','物流运输'],
      "管理类": ['请选择','管理','投资管理','企业管理','餐饮管理','管理顾问','金融管理'],
      "维修类": ['请选择','维修','电器维修','机械维修'],
      "机械设备类": ['请选择','机械设备','办公设备','消防设备','自控设备','机电设备','冷暖设备','环保设备','测试设备','电力设备','实验室设备'],
      "印刷类": ['请选择','印刷','印刷设计','印刷技术','印刷器材'],
      "医疗器械": ['请选择','医疗器械'],
      "养殖": ['请选择','养殖'],
      "房地产经纪": ['请选择','房地产经纪']
    };
    var vm = avalon.define({
      $id: 'checkname',
      AdministrativeRegions: '天津',
      FiledOne: '云信',
      FiledTwo: '',
      FiledThree:'',
      Features:'科技',
      TypeOfCompany:'有限公司',
      first: ["科技类", "技术类", "文化类","咨询类","培训类","设计类","服务类","广告类","商贸类","贸易类","租赁类","工程类","物流类","管理类","维修类","机械设备类","印刷类","医疗器械","养殖","房地产经纪"],
      second: map['科技类'].concat(),
      firstSelected: "科技类",
      secondSelected: "请选择",
    });
    vm.$watch("firstSelected", function (a) {
      vm.second = map[a].concat()
      vm.secondSelected = vm.second[0] 
    });
    vm.$watch("FiledTwo", function (a) {$('.my_comp_f').show()});
    vm.$watch("FiledThree", function (a) {$('.my_comp_t').show()});
    

    效果图:

    www.68399.com 1

    avalon是国内最强劲的MVVM框架,没有之一,纵然TmallKISSY团队也搞了两个MVVM框架,但都自行消灭。别的的MVVM框架都相当的少个。也只有奥地利人与像自个儿这么闲的架构师才有的时候间切磋那东西。笔者很早从前就断言,MVVM是前者的终端化解方案。笔者事先在庄敬有线做严穆通行证就深有体会,多少个作业逻辑对应十来个差异的分界面,分层架构是少不了的。由此双向绑定作为解药,结合很已经流行的MVC框架,衍生出MVVM那神器。

    如上所述是作者给大家介绍的Avalonjs双向数据绑定与监听的实例代码,希望对大家全体帮忙,假若大家有任何疑问请给小编留言,小编会及时恢复生机大家的。在此也特别多谢我们对台本之家网址的支撑!

    www.68399.com 2

    HTML:

      因为目前有在做购物车,然后大家是用avalon来贯彻部分模块的,所以任其自流的用avalon来落到实处购物车,最近察觉avalon依旧比较强硬的,大大的节约了代码量。

    你大概感兴趣的稿子:

    • Avalonjs 达成轻便购物车功效(实例代码)
    • avalonjs达成仿微博的图样拖动特效
    • avalonjs制作响应式瀑布流特效

    代码:

    <div id='post_img' ms-controller='post_img'>
       <ul id='post_img_inner' ms-mousemove='onmousemove'>
        <li ms-repeat-el="post_img_list" class='inline-block' ms-mousedown='onmousedown($event,$index,el)' ms-attr-id='post_img_item{{$index}}'>
          <img ms-src='el' class='uploaded_img'></li>
      </ul>
    </div>
    

        购物车一般装有的功效是加减数量、选用商品、删除商品和测算金额,因为avalon具备双向绑定作用,所以杜绝了dom的操作,只要求产生功效的逻辑即可,能够分上边多少个步骤达成。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>仿微博输入框效果</title>
    <script src="jquery.js"></script>
    </head>
    <body>
    <textarea name="" id="" cols="30" rows="10"></textarea> 
    <sapn>您还可以输入<strong style="color:red">140</strong>个字</sapn>
    </body>
    <script>
    //给文本域响应键盘按下事件
    $('textarea').keyup(function(){
    var maxLength = 140;
    var len = $(this).val().length;
    $('strong').text(maxLength-len);
    //判断输入是否超过140个数
    if(parseInt($('strong').text()) < 0){
    $('strong').text(0);
    //截取前140个字符并重新塞到文本域中
    var content = $(this).val().substring(0,140);
    $(this).val(content);
    }
    });
    </script>
    </html>
    

    www.68399.com,JS:

      runjs:

    如上所述是小编给大家介绍的JavaScript仿今日头条输入框效果(案例分析),希望对大家全数匡助,假设大家有别的疑问请给自个儿留言,我会及时过来大家的。在此也非常谢谢我们对剧本之家网址的补助!

    var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//拖动的代理,原图片,原图片的src
    var post_img = avalon.define('post_img', function(vm) {
      vm.post_img_list=[];//保存所有图片的src
      vm.onmousedown=function(e,i,el){
        $('drag_proxy').style.display='block';
        var target=e.target.parentNode;
        var xx = e.clientX; 
        var yy = e.clientY;
        $('drag_proxy').style.top=yy 'px';
        $('drag_proxy').style.left=xx 'px';
        if(target&&target.nodeName=='LI'){
          ori_src=el;
          index=target.getAttribute('id').substring(13);
          $('drag_proxy').innerHTML=target.innerHTML;
          post_img.post_img_list.splice(i, 1, 'about:blank');
        }
        drag_flag=true;
      }; 
      vm.onmousemove=function(e){
        if(drag_flag){//如果点下了图片
          var xx = e.clientX; 
          var yy = e.clientY; 
          $('drag_proxy').style.top=yy 'px';
          $('drag_proxy').style.left=xx 'px';
          var x=xx-avalon($('post_img')).offset().left;
          var y=yy-avalon($('post_img')).offset().top;
          //例子没有考虑滚动条的情况
          var x_index=Math.floor(x/100);//图片尺寸100*100
          var y_index=Math.floor(y/100);
          post_img.post_img_list.splice(index, 1);//删除当前图片的li
          var target_index=3*y_index x_index;//目标图片的位置(3*3)
          if(post_img.post_img_list.indexOf('about:blank')!=target_index)
          //如果图片数组中没有src=about:blank这个占位置的li
            post_img.post_img_list.splice(target_index, 0, 'about:blank');
            //添加src=about:blank
          index=target_index;
          //会触发很多次move,所以触发一次就改动一次
        }
      };
    });
    document.onmouseup=function(e){
      drag_holder=null;
      if(ori_src){
        post_img.post_img_list.splice(index, 1);
        //删除src=about:blank
        post_img.post_img_list.splice(index, 0,ori_src);
        //添加原图片
      }
      $('drag_proxy').style.display='none';
      $('drag_proxy').innerHTML='';
      drag_flag=false;
    };
    

        1、页面的Html结构

    您大概感兴趣的小说:

    • JavaScript仿和讯揭橥新闻案例
    • 七个仿天涯论坛登入邮箱提醒框js开荒案例
    • js仿新浪达成总计字符和本地存款和储蓄功能
    • js达成仿天涯论坛滚动展现信息的意义
    • JS达成仿新浪可关闭弹出层效果
    • avalon js达成仿微博拖动图片排序
    • avalonjs完成仿博客园的图纸拖动特效
    • JS实现模仿新浪宣布作用实例代码
    • js仿博客园动态栏功能

    如上所述便是本文的全部内容了,希望大家能够欣赏。

        这里不思索好的机能,所以一贯用最轻巧易行的html来落到实处了,主要含有调控器,列表循环,金额显示,轻便代码结构如下

    您恐怕感兴趣的稿子:

    • Avalonjs 完毕简单购物车功能(实例代码)
    • avalonjs制作响应式瀑布流特效
    • Avalonjs双向数据绑定与监听的实例代码
    <body ms-controller="test">
     <ul ms-visible="arr.length">
      <li><input type="checkbox"
     ms-click="checkAll" ms-duplex-checked="checkAllbool"/>全选</li>
      <li ms-repeat="arr"
     >
      <input type="checkbox"
     ms-attr-value="el.id" ms-duplex="selected" />
      {{el.text}}
      <input type="text"
     name="" ms-attr-value="el.num" ms-on-input="changeNum(el)">
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
     ms-click="plus(el)">加</a>
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
     ms-click="minus(el)">减</a>
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
     ms-click="del(el)">删除</a>
      <p>单价:{{el.price
     | currency}}</p>
      <p>金额:{{el.num*el.price
     | currency}}</p>
      </li>
     </ul>
     <p>总金额:{{total
     | currency}}</p>
     </body>
    

         这里有全选、加减、删除多少个职能事件,金额用了过滤器currency。

        2、引进avalon.js,定义模型

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:JavaScript仿搜狐输入框效果(案例剖判)

    关键词: 68399皇家赌场

上一篇:详解Vue组件之间的多少通讯实例

下一篇:没有了