wyr123789
- 浏览: 37949 次
- 性别:
-
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端，js，jquery (8)
- html (2)
- jquery，html5，html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端，js，jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒，ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
<body>
<section class="seletSide js_seletSide VBox" style="display: none;">
<section class="goodsSmallImg HBox BoxCenter">
<figure class="goodsImg ">
<img src="static_v3/image/goods1.jpg" alt="" />
</figure>
<div class="Bflex1">
<p class="priceAreaBox">
<i>￥</i><span class="goodsPrice js_goodsPrice" pprice="29.00">29.00</span>
</p>
<p class="">库存：<span>2510</span>份</p>
<p class="user_seleted js_user_seleted" >已选择：<span>8只全母2.1 - 2.4两 , M</span></p>
</div>
</section>
<section class="goodsSizeList goodsList js_goodsList VBox Bflex1 "style="display: none1;">
<section class="goodsSize js_goodsSize VBox Bflex1 js_many" >
<div class="js_goodsSizemob" id="0">
<p class="sideTitle">颜色:</p>
<ul class="Bflex1 clearfix">
<li class="active">8只全母 2.1 - 2.4两</li>
<li>10只全 母 2.2 - 2.6两</li>
<li>4对 公3.0 - 3.4两 母2.0 - 2.4两</li>
<li>4对 公3.0 - 3.4两 母2.0 - 2.4两</li>
<li>8只全母 2.1 - 2.4两</li>
</ul>
</div>
<div class="js_goodsSizemob"id="1">
<p class="sideTitle">尺码:</p>
<ul class="Bflex1 clearfix">
<li class="">X</li>
<li>M</li>
<li>X</li>
<li>XL</li>
<li>XXL</li>
</ul>
</div>
</section>
<section class="buyGoodsNum HBox BoxCenter ">
<p class="sideTitle Bflex1">购买数量</p>
<div class="amountBox HBox js_amountBox BoxCenter ">
<button class="numBtn js_handBtn active" type="button">-</button>
<input class="sumNum js_sumNum" type="number" name="" id="" value="1" />
<button class="numBtn js_handBtn" type="button">+</button>
</div>
</section>
</section>
<section class="goBuy">
<button type="button" class="btnStyle btn_Bghui js_addCarONBtn" style="display: none;">还可以选择 <i>6</i> 件</button>
<button type="button" class="btnStyle btn_Bgred js_addCarOKBtn" style="display:none1">确定</button>
</section>
<div class="icon-cross js_closeSideBtn"></div>
</section>
</body>
var list = new Array();
ogoodsSizeListTow.hammer().on('tap',function(e) {
//console.log(e);
var i;
myPub.OffMuiEvent(false);
var _tarTag = e.gesture.target;
var target;
if(_tarTag.nodeName.toLowerCase() == 'li') {
target = $(_tarTag);
var flowers = ogoodsSizeListTow.hasClass("Flowers");
if(flowers === true){
if(target.hasClass('active')){
target.removeClass('active');
i = list.length-1
oAddCarONBtn.text('还可以选择'+i+'件');
oAddCarONBtn.css('display','block')
oAddCarOKBtn.css('display','none');
$.each(list,function(i){
if(!list[i].hasClass('active')){
list.arrayRemove(i);
}
});
}
list.push(target);
target.addClass('active');
if(list.length > 3){
list.shift().removeClass('active');
}
i = 3 - list.length;
console.log(i)
oAddCarONBtn.text('还可以选择'+i+'件');
if(i == 0){
oAddCarONBtn.css('display','none')
oAddCarOKBtn.css('display','block');
}
return;
}
}
});
Array.prototype.arrayRemove = function(dx){
if(isNaN(dx)||dx>this.length){return false;}
this.splice(dx,1);
}
//多维度选择
oGoodsList.hammer().on('tap',function(e) {
//console.log(e)
myPub.OffMuiEvent(false);
var _tarTag = e.gesture.target;//获取点击的li
var target;
if(_tarTag.nodeName.toLowerCase() == 'li') {
target = $(_tarTag);
if(target.attr('mobilepar')==0){
console.log(target.attr('mobilepar'));
return false;
}
target.parents('.goodsSizeList').find('li').removeClass('active');//获取当前点击li的父级下面的所有li并删除class上的active
target.addClass('active');//添加active
oUser_seleted.find('span').text(target.text())
var map = {};//new map
var spanId = target.parents('.js_goodsSizemob').attr('id');//获取当前点击的li的父级ID
map[spanId] = target.text();//用父级id为KEY（键）获取选中的内容；
var s = $.map(map, function(n){//便利map
return n;
}).join(",");//拼接字符串
oUser_seleted.find('span').text(s);
}
myPub.HamstopPropaga()
});
<section class="seletSide js_seletSide VBox" style="display: none;">
<section class="goodsSmallImg HBox BoxCenter">
<figure class="goodsImg ">
<img src="static_v3/image/goods1.jpg" alt="" />
</figure>
<div class="Bflex1">
<p class="priceAreaBox">
<i>￥</i><span class="goodsPrice js_goodsPrice" pprice="29.00">29.00</span>
</p>
<p class="">库存：<span>2510</span>份</p>
<p class="user_seleted js_user_seleted" >已选择：<span>8只全母2.1 - 2.4两 , M</span></p>
</div>
</section>
<section class="goodsSizeList goodsList js_goodsList VBox Bflex1 "style="display: none1;">
<section class="goodsSize js_goodsSize VBox Bflex1 js_many" >
<div class="js_goodsSizemob" id="0">
<p class="sideTitle">颜色:</p>
<ul class="Bflex1 clearfix">
<li class="active">8只全母 2.1 - 2.4两</li>
<li>10只全 母 2.2 - 2.6两</li>
<li>4对 公3.0 - 3.4两 母2.0 - 2.4两</li>
<li>4对 公3.0 - 3.4两 母2.0 - 2.4两</li>
<li>8只全母 2.1 - 2.4两</li>
</ul>
</div>
<div class="js_goodsSizemob"id="1">
<p class="sideTitle">尺码:</p>
<ul class="Bflex1 clearfix">
<li class="">X</li>
<li>M</li>
<li>X</li>
<li>XL</li>
<li>XXL</li>
</ul>
</div>
</section>
<section class="buyGoodsNum HBox BoxCenter ">
<p class="sideTitle Bflex1">购买数量</p>
<div class="amountBox HBox js_amountBox BoxCenter ">
<button class="numBtn js_handBtn active" type="button">-</button>
<input class="sumNum js_sumNum" type="number" name="" id="" value="1" />
<button class="numBtn js_handBtn" type="button">+</button>
</div>
</section>
</section>
<section class="goBuy">
<button type="button" class="btnStyle btn_Bghui js_addCarONBtn" style="display: none;">还可以选择 <i>6</i> 件</button>
<button type="button" class="btnStyle btn_Bgred js_addCarOKBtn" style="display:none1">确定</button>
</section>
<div class="icon-cross js_closeSideBtn"></div>
</section>
</body>
var list = new Array();
ogoodsSizeListTow.hammer().on('tap',function(e) {
//console.log(e);
var i;
myPub.OffMuiEvent(false);
var _tarTag = e.gesture.target;
var target;
if(_tarTag.nodeName.toLowerCase() == 'li') {
target = $(_tarTag);
var flowers = ogoodsSizeListTow.hasClass("Flowers");
if(flowers === true){
if(target.hasClass('active')){
target.removeClass('active');
i = list.length-1
oAddCarONBtn.text('还可以选择'+i+'件');
oAddCarONBtn.css('display','block')
oAddCarOKBtn.css('display','none');
$.each(list,function(i){
if(!list[i].hasClass('active')){
list.arrayRemove(i);
}
});
}
list.push(target);
target.addClass('active');
if(list.length > 3){
list.shift().removeClass('active');
}
i = 3 - list.length;
console.log(i)
oAddCarONBtn.text('还可以选择'+i+'件');
if(i == 0){
oAddCarONBtn.css('display','none')
oAddCarOKBtn.css('display','block');
}
return;
}
}
});
Array.prototype.arrayRemove = function(dx){
if(isNaN(dx)||dx>this.length){return false;}
this.splice(dx,1);
}
//多维度选择
oGoodsList.hammer().on('tap',function(e) {
//console.log(e)
myPub.OffMuiEvent(false);
var _tarTag = e.gesture.target;//获取点击的li
var target;
if(_tarTag.nodeName.toLowerCase() == 'li') {
target = $(_tarTag);
if(target.attr('mobilepar')==0){
console.log(target.attr('mobilepar'));
return false;
}
target.parents('.goodsSizeList').find('li').removeClass('active');//获取当前点击li的父级下面的所有li并删除class上的active
target.addClass('active');//添加active
oUser_seleted.find('span').text(target.text())
var map = {};//new map
var spanId = target.parents('.js_goodsSizemob').attr('id');//获取当前点击的li的父级ID
map[spanId] = target.text();//用父级id为KEY（键）获取选中的内容；
var s = $.map(map, function(n){//便利map
return n;
}).join(",");//拼接字符串
oUser_seleted.find('span').text(s);
}
myPub.HamstopPropaga()
});
分享到：
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 689不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11641.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 474<div class="js_mobile&q ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 351/*遮罩层*/ .shadow{ position: fixe ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 777<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
esayui
2016-10-28 17:12 571$(function(){ $('#peopleGrid') ... -
字符串分割显示
2016-09-20 14:09 515/* 运单号分割显示 */ var oT=document. ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 592<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 534<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 587<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4535加广告与加封页脚的代码是差不多的！ 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 578<!DOCTYPE html> <html& ... -
小用例
2016-07-20 17:24 366<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 721<!DOCTYPE html> <html& ... -
hcharts视图报表
2016-05-03 14:48 564function queryloginUser() { ...
相关推荐
例如，`tooltip`可以配置成跟随鼠标显示当前选中的数据点的详细信息，`brush`则可以用于选择和过滤数据区域。 为了实现上述功能，你需要在HTML中引入Echarts库，并在JavaScript中编写配置代码。配置代码通常包括...
1. **多选模式**：layui-select-ext的多选模式允许用户同时选择多个选项，通过复选框或拖拽操作实现，这对于需要处理多维度数据的场景尤其有用，如设置角色权限、选择分类等。 2. **搜索功能**：内置的搜索功能让...
在信息技术领域中，数据管理是至关重要的组成部分，而多维度数据库（Multidimensional Databases）与数据仓库（Data Warehousing）则是两种非常重要的数据管理和分析技术。《多维度数据库与数据仓库》一书由...
"jQuery商品尺寸规格选择代码"就是这样一个解决方案，它模仿了天猫和淘宝的商品选择流程，支持面料和配件等多维度的规格选择，让商品选择更加直观和便捷。 首先，jQuery作为一款轻量级的JavaScript库，因其简洁的...
例如，当用户选择一个颜色后，系统可以更新尺寸的选择项，只显示当前颜色可用的尺寸，提高用户体验。 3. **状态管理**：在Vue中，Vuex可以用来管理全局状态，包括当前选择的属性组合。每当用户选择一个属性，Vuex中...
1. **多选模式**：mobileSelect.js 支持用户同时选择多个选项，适合于需要用户进行多维度筛选的场景。 2. **级联选择**：可以创建级联下拉框，即一个下拉框的选择会影响到另一个下拉框的显示内容，这在处理关联数据...
标题“动态多维度查询”揭示了我们即将探讨的是一个与数据查询相关的技术主题，它涉及到在数据库或数据仓库中进行复杂、灵活的分析查询。这种查询能力通常在商业智能（BI）系统、数据分析或者报告生成中非常关键。...
用户可以通过一个多选框选择要显示的维度。为了实现这一功能，我们需要在报表的每个列的“可见性”设置中使用IIF表达式。 例如，对于年龄列的可见性，我们使用如下的IIF表达式： ```vb =iif(join(Parameters!参数...
MMCS多维度-多归因量表.pdf
### 多维度立体化监控详解 #### 一、引言：多维度立体化监控的意义 在当前复杂的IT环境中，为了确保系统的稳定性和可用性，仅仅依赖单一维度的监控已远远不够。多维度立体化监控是一种更为全面且有效的监控方式，...
情感维度在《剑网3》中占据一定地位，玩家可以体验到师徒情谊、朋友之间的互动以及与敌人的冲突，这些情感元素增加了游戏的趣味性和代入感。然而，情感并非游戏主线，更多的是辅助游戏进程和角色发展。 道德维度...
在信息系统中，数据的多维度分析可以帮助企业发现隐藏的模式和趋势，例如，通过数据分析，企业可以发现哪些营销渠道是最有效的，哪些产品是最畅销的，等等。这些信息可以帮助企业作出更加明智的决策，提高企业的竞争...
5. **交互行为**：确保用户可以正常选择和操作多列ComboBox，例如，点击项应该能够正确选中，回车键应该触发选中项的事件。 6. **性能优化**：当数据集较大时，要考虑虚拟化技术以提高性能，避免一次性加载所有数据...
这使得它在处理多维度的数据选择时显得尤为便捷。基于jQuery库的实现，`layPicker`与现有的jQuery项目无缝集成，减少了开发者的学习成本。 1. **日期选择器**：`layPicker`默认提供了日期选择功能，用户可以通过...
云计算已成为承载关键信息的基础设施，因此需要更加严格的等级保护和多维度的测评。他认为，除了建设等保制度外，还应建立相关的法规和标准，如《国家安全法》、《网络安全法》、《网络服务安全审查办法》等，确保...
但多选功能则允许用户勾选多个选项，这对于如设置偏好、筛选条件等需要多维度选择的情况非常有用。 “嵌套”（Nested）在这里指的是在下拉框内部包含其他组件，例如复选框（Checkbox）。复选框允许用户在多个独立的...
Excel图表类型选择-9-雷达图（多维度比较）.xlsx
此外，可能还涉及到了维度建模，这是构建数据仓库的关键部分，其中的事实表存储度量值，而维度表则存储描述性数据，以支持多角度的查询和分析。 标签中的“源码”暗示了可能在文章中会有示例代码或开源工具的介绍，...