avalonjs完结仿天涯论坛的图样拖动特效,实例代码

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

那篇文章给咱们分享三个小的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="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.2.4/avalon.min.js"></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()});

效果图:

亚洲必赢官网 1

avalon是国内最精锐的MVVM框架,没有之一,即使天猫商城KISSY共青团和少先队也搞了多个MVVM框架,但都自然病逝。其他的MVVM框架都十分的少个。也唯有比利时人与像本身如此闲的架构师才有的时候光研商那东西。笔者很早以前就断言,MVVM是后边三个的终极化解方案。作者以前在庄严有线做庄敬通行证就深有体会,三个工作逻辑对应十来个区别的分界面,分层架构是必需的。因而双向绑定作为解药,结合很已经流行的MVC框架,衍生出MVVM那神器。

亚洲必赢官网 ,以上所述是小编给大家介绍的Avalonjs双向数据绑定与监听的实例代码,希望对大家有着帮衬,假若我们有其它疑问请给作者留言,小编会及时回复大家的。在此也特别多谢我们对台本之家网址的帮衬!

亚洲必赢官网 2

HTML:

avalonjs完结仿天涯论坛的图样拖动特效,实例代码。 
因为如今有在做购物车,然后大家是用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>

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,定义模型

    引进js是必须的,那么引进avalon.js后能够定义了

var vm
 = avalon.define({
  $id:
"test"
});

  
那样就定义了多个简练的模型,$id传入的是调整器的值,本文例子的调节器是写在body,借使不明了能够去拜候官方网址。

    3、定义购物车的里面面的商品

   
实际项目中,那么些一定是经过后台获取到的,这里为了演示就一向定义了,从第一点的html结构得以看出来,这里购物车的物品用的是arr,所以随后定义的正是arr,能够如此定义

arr
 : [
 {
 id:1,
 num:1,
 price:45.5,
 text:'商品1'
 },
 {
 id:2,
 num:1,
 price:8.8,
 text:'商品2'
 }]

   
这里就定义多个用来测验,那么还索要二个值来保存选中的物品id,这里给模型扩展二个selected属性,类型为数组

selected:[]

    4、定义全选的模型和章程

   
购物车上面一般都有全选的效果的,只是表现的款型不一致样,那么能够那样定义

checkAllbool
 : false,
checkAll
 : function()
 {
 if (this.checked)
 {
  var _arr
 = [];
  avalon.each(vm.arr,function(index,item){
   _arr[index]
 = item.id+'';
  });
  vm.selected
 = _arr;
 }
else {
  vm.selected=[];
 }
}

   
通过checkAllbool属性来促成和决断是不是选中“全选”,通过checkAll来兑现选中全体可能吊销选中全部,其实就是修改模型里面包车型大巴selected属性,即便selected为空数组则未有三个是选中的,假诺不行须要选中只供给把相应的值放到selected数组中就能够,因为在html中checkbox使用
ms-duplex 举行绑定的,而绑定的是 selected属性。

     4、定义加、减、删除的法子

     
加塑体假若数额上的生成,而除去则是急需把该商品直接从arr(前边定义的品质)中删去

plus:
function(el){
 el.num++;
 vm.cal();
 },
minus:
function(el){
 if(el.num>1){
 el.num--;
 vm.cal();
 }
},
del:
function(el){
 vm.arr.remove(el);
},
changeNum:
function(el){
 var _value
 = this.value,
 _reg
 = /^[1-9]\d?$/
 ;
 if(!_reg.test(_value)){
 this.value
 = 1;
 el.num
 = 1;
 }else{
 el.num
 = _value;
 }
 vm.cal();
}

   
这里还大概有三个是当输入框改换时实行的法子,这里透过出入对象来实行操作,能够看看第一步中的html代码,就清楚了,无论是改造照旧加减都最后要推行vm.cal,vm.cal是测算总金额的,就要底下讲授。

   
加减的艺术都很简短首假使修改num属性就能够,changeNum则扩充了正则判别,剖断输入的是或不是为数字。

    5、定义总结总金额

   
总计总金额的章程很简单,便是把具有入选的商品的多少乘以单价再加起来,然则这其间涉及到另多少个措施,那正是由此货品的id来找寻相应的物品,那样本事计算该商品的金额。

total:0,
cal:
function(){
 var _arr
 = this.arr,
 _selected
 = this.selected,
 i
 = 0,
 _obj
 = '',
 _prcie
 = 0
 ;
 if(_selected.length){
 for(;i<_selected.length;i++){
  _obj
 = this.findById(_selected[i])
 ||{};
  if(_obj.price
 && _obj.num){
   _prcie
 = _prcie + _obj.price * _obj.num;
  }
 }
 }
 this.total
 = _prcie;
 },
findById:
function(id){
 if(!id)
return '';
 var i=0,
  _arr
 = this.arr,
  _obj
 = '',
  _id
 = parseInt(id,10)
 ;
  for(;i<_arr.length;i++){
  if(_arr[i].id
 === _id){
   _obj
 = _arr[i];
  }
 }
  return _obj;
}

   
那其间根本用的是循环,找到货品的对象然后总括商品的金额再相加,代码略长。

    6、监听属性

    需求监听七个天性,那正是 selected 和 arr,监听
selected是为了每天领会货物有未有全选中,主要通过监听Length。监听arr是推断商品有未有被删去,假如arr的length更换,则表示商品有被删除,供给再次总计总金额。

vm.selected.$watch("length",
function(n)
 {
 vm.checkAllbool
 = n === vm.arr.size()
 vm.cal();
});
vm.arr.$watch("length",
function(n)
 {
 vm.cal();
});

    通过地方的步调解析,能够掌握了大约的贯彻流程,上边是完全的代码。

<!DOCTYPE html> <html>
 <head>
 <title>购物车</title>
 <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8">
 <meta http-equiv="X-UA-Compatible"
 content="IE=edge" /> 
 <script src="../avalon.js"
 ></script>
 <script>
  var
 vm = avalon.define({
  $id:
 "test",
  arr
 : [
   {
   id:1,
   num:1,
   price:45.5,
   text:'商品1'
   },
   {
   id:2,
   num:1,
   price:8.8,
   text:'商品2'
   }
  ],
  selected
 : ["1"],
  checkAllbool
 : false,
  checkAll
 : function() {
   if
 (this.checked) {
   var
 _arr = [];
   avalon.each(vm.arr,function(index,item){
    _arr[index]
 = item.id+'';
   });
   vm.selected
 = _arr;
   }
 else {
   vm.selected=[];
   }
  },
  plus:
 function(el){
   el.num++;
   vm.cal();
  },
  minus:
 function(el){
   if(el.num>1){
   el.num--;
   vm.cal();
   }
  },
  del:
 function(el){
   vm.arr.remove(el);
  },
  changeNum:
 function(el){
   var
 _value = this.value,
   _reg
 = /^[1-9]\d?$/
   ;
   if(!_reg.test(_value)){
   this.value
 = 1;
   el.num
 = 1;
   }else{
   el.num
 = _value;
   }
   vm.cal();
  },
  total:0,
  cal:
 function(){
   var
 _arr = this.arr,
   _selected
 = this.selected,
   i
 = 0,
   _obj
 = '',
   _prcie
 = 0
   ;
   if(_selected.length){
   for(;i<_selected.length;i++){
    _obj
 = this.findById(_selected[i]) ||{};
    if(_obj.price
 && _obj.num){
    _prcie
 = _prcie + _obj.price * _obj.num;
    }
   }
   }
   this.total
 = _prcie;
   },
  findById:
 function(id){
   if(!id)
 return '';
   var
 i=0,
   _arr
 = this.arr,
   _obj
 = '',
   _id
 = parseInt(id,10)
   ;
   for(;i<_arr.length;i++){
   if(_arr[i].id
 === _id){
    _obj
 = _arr[i];
   }
   }
   return
 _obj;
  }
  });
  vm.selected.$watch("length",
 function(n) {
  vm.checkAllbool
 = n === vm.arr.size()
  vm.cal();
  });
  vm.arr.$watch("length",
 function(n) {
  vm.cal();
  });
  vm.cal();
 </script>
 </head>
 <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>
</html>

   
用avalon时间还赶忙,一步步来,希望能更加深切领会mvvm框架,在后头的光阴里采纳越多的气象。

以上所述是小编给大家介绍的Avalonjs
达成轻巧购物车成效(实例代码),希望对大家享有协助,假若大家有任何疑问请给本人留言,小编会及时复苏大家的。在此也特别感激我们对台本之家网站的支撑!

你只怕感兴趣的稿子:

  • avalonjs完结仿微博的图纸拖动特效
  • avalonjs制作响应式瀑布流特效
  • Avalonjs双向数据绑定与监听的实例代码
网站地图xml地图