当我们在微信小程序 json 中设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。
这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。
如果要设置页面背景颜色，得在 wxss 中自定义样式，如下：
page {
background-color: #eee;
}
常用的inline就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。
因此，针对inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定的值。
一个很基础的问题：如何把inline元素转换成“块”元素？相信绝大部分人的回答是display:block，但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧？
还有两种情况你应该去了解（如果你不知道的话）：
第一，对inline元素设置float
还是刚才那个例子，我们对span元素添加一个float:left，运行看看效果，你就会大吃一惊。从显示的效果和监控的结果上看来，span元素已经“块”化。注意，上一节刚刚讲完float，不要忘记float的“破坏性”、“包裹性”，在这里同样适用。
第二，对inline元素设置position:absolute/fixed
还是有同一个例子做演示，这次在span元素上加上absolute/fixed，效果大家应该能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，会在下一节介绍position时提到。
本系列有一节重点讲解了《盒子模型》，不知道大家看没看过，或者说你已经很了解盒子模型了。
其实对于block，我觉得就是“盒子模型”。一个元素设置了block，它就必须遵循盒子模型的规则。因此，这里也不再去详细写它了，大家可以去盒子模型那一节好好看看，就那么点内容。
这个话题还得从《浏览器默认样式》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block，回顾一下。
初学者对于inline-block可能比较陌生，没关系，一步一步来。首先，你应该知道inline是什么样子的，就是一般的文字、图片；其次，你应该知道block是什么样子的，一般的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么样子的。
那button举例子。我们在页面中输入若干个<button>，发现它们是“流”式排列的（可以对比一下若干个<div>的排列方式）。但是针对一个button，我们还可以自定义修改它的形状，这样就有“块”的特征。
因此，inline-block的特点可以总结为：外部看来是“流”，但是自身确实一个“块”。不知道大家理解也无？
1.解释一下display的几个常用的属性值，inline ， block， inline-block
图一:
图二：
两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。
2.inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
b.相同之处：能在某程度上达到一样的效果
我们先来看看这两种布局：
图一：display：inline-block
图二：对两个孩子使用float：left，我在上一篇浮动布局讲过，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：
>>乍一看两个都能做到几乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下面再讲）
c.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
图三： 
图四： 
>>从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。
3.inline-block存在的小问题：
a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
b.去除空隙的方法：
1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的
图一：
c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
在ie6/7下：
对于行内元素直接使用{dislplay:inline-block;}
对于块级元素：需添加{display:inline;zoom:1;}
4.总结:
display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。
现实观：经济行为是社会行为的核心部分
理论观：社会学、经济学都不是孤岛，学科发展有交叉也需要交流
（一）什么事经济社会学？最早的名称：1898年涂尔干《社会学年鉴》中对社会学的分类
刚整理的几个接口文档记录
支付接口搜集 08年1月
第三方支付接口
1. 快钱支付
2. 支付宝
3. YeePay易宝
4. 邮局支付（网汇通）
5. 安付通
6. 网银(chinabank)
7. PayPal贝宝
8. ips环迅支付
9. 腾讯财付通
10. NPS网上支付系统
1.快钱支付(银行/邮政汇) (https://www.99bill.com/website/)
联系方式: http://www.99bill.com/seashell/html/corp/contactus.html
网关地址: https://www.99bill.com/webapp/receiveMerchantInfoAction.do/
程序参考文档: 见附件快钱接口.rar
特点:
1.支持19种国内银行在线支付,
2.支持2种线下支付方式: (在线生交易号码,客户至银行柜台或者邮局依此号码汇款,参考下图)
a.通过邮局汇款
b.通过银行柜台汇款
提供邮件号码或者手机号码后会将信息发至相应联系工具中
银行前台结算方式图
2.支付宝支付(https://www.alipay.com/)
联系方式: https://www.alipay.com/static/aboutalipay/contact.htm
网关地址: https://www.alipay.com/cooperate/gateway.do
签约入口: https://www.alipay.com/cooperate/btools_shop.htm
程序参考文档: 见附件支付宝.rar
特点:
1.支持国内14种银行在线支付
2.支持支付宝帐户余额直接付款
3.支持”支付宝卡通”付款(映射至用户银行卡)
4.支持邮政”网汇e”
5.支付宝在国内拥有很大数量的用户,为”淘宝网”的支付工具;
6.提供” 合并支付”功能,即” 是在对交易进行付款的时候，可以选择“等待买家付款”类型的交易，只用一次支付过程就实现了多笔交易的支付，提高了支付操作的效率和易用性。”(http://help.alipay.com/support/help_detail.htm?help_id=18756)
3.YeePay易宝支付 (http://www.yeepay.com/)
联系方式: http://www.yeepay.com/zizhu/help.html
网关地址: 官方提供编程接口,DLL等相关工具
程序参考文档:见附件易宝支付
特点:
1.支持多家银行;
2.支持易宝会员支付
3.支持电话支付 易宝支持工商银行95588，招商银行95555，建设银行95533，民生银行95568
4.积分支付(通卡)
5.支持手机银行支付 参考: http://www.yeepay.com/help/html/help26.html
6.为会员提供收款链接服务
这是专为会员账户提供的免费收款服务。收款链接是直通会员账户的在线支付链接网址，如果您把自己的账户收款链接告知付款人（可以通过邮件、QQ、论坛）, 当付款人在浏览器里打开这个链接时，就能通过在线支付方式从银行卡划款到您的会员账户里。目前，收款链接支持国内19家银行的数十种银行卡的人民币账户支付。
参考: http://www.yeepay.com/help/html/help019.html
7.提供 商户与企业（B2B）支付方式
独家支持工商银行（全国），深圳发展银行（全国），B2B在线支付
8.提供快捷查单服务
9.自助接入服务,自助商户 参考: http://www.yeepay.com/zizhu/index.html
4.邮局支付（网汇通） http://www.udpay.com.cn/
联系方式: https://www.udpay.com.cn/jsp/businesslogin/merchantjoin.jsp
网关地址:无需额外开发 注册后在官方后台获取支付代码即可嵌入网站中
程序参考文档:
特点:
1. 采用充值卡方式
2. 网汇通卡是中国邮政储蓄银行发行的一种不定额现金支付卡，可直接进行各种消费，如：充值财付通、充值手机、新浪邮箱续费、充值skype、购买Q币等。
用户可以直接到当地邮局购买网汇通卡，新版网汇通卡可以是1元到2000元之间的任意金额，精确到分，例如：你可以购买201.08元的网汇通卡
3. 必须要提供注册用户或者网汇通卡号;不支持直接网银支付;
4. 全国邮局均可购买网汇通充值卡
5. 无需额外开发支付接口等;
网汇通代码生成
5. 安付通(http://help.eachnet.com/help/escrow/ )
联系方式:
网关地址:
程序参考文档:
特点:
1. eBay易趣的支付工具;
2. 不提供对外接口,无法在网站中嵌入使用
6.网银(chinabank) http://www.chinabank.com.cn/
联系方式: http://www.chinabank.com.cn/gateway/about_us/contact/index.shtml
网关地址:
程序参考文档: 接口已经完成 附件网银.rar
特点:
1. 支持主流信用卡、借记卡 手续费为1% 其他全免
2.线下支付 报信用卡信息，随时随地支付货款支付过程
7. PayPal贝宝 http://www.paypal.com/
联系方式: https://www.paypal.com/us/cgi-bin/helpscr?cmd=_help&t=escalateTab
网关地址:
程序参考文档: 接口已经完成
8.ips环迅支付 http://www.ips.com.cn/
联系方式: http://www.ips.com.cn/contactus/xsrx.shtml
网关地址:
程序参考文档: 接口已经完成
9.财付通(https://www.tenpay.com/ )
联系方式: https://www.tenpay.com/zft/qa/qa_15.shtml
网关地址: https://www.tenpay.com/cgi-bin/med/show_opentrans.cgi
程序参考文档: 见附件财付通接口文档.doc
特点:
1. 支持国内18家银行
2. 提供手机话费直冲;即时到帐
3. 机票订购
4. 腾讯拍拍的购物支付方式;拥有大量使用人群;
5. 财付通账户余额支付
6. 自动扣款业务 参考: https://www.tenpay.com/zft/qa/qa_28.shtml
7. 免手续费自助集成 http://union.tenpay.com/mch/?posid=125&actid=84&opid=32&whoid=31
10. NPS网上支付系统 http://www.nps.cn/
联系方式: http://www.nps.cn/contact/contact.jsp
网关地址: https://payment.nps.cn/ReceiveMerchantAction.do
程序参考文档: 见附件NPS支付系统接口
特点:
1. 支持国内银行支付
2. 支持国外银行支付
3. 支持神州行充值卡支付 http://www.nps.cn/product/payment_easyown.jsp
4. 支持电话支付 http://www.nps.cn/product/payment_phone.jsp
5. 商户可通过以下3种方式接入NPS支付平台：在线加盟、业务联系、代理商加盟。
6. 接口类型: 1、购物车系统2、传款通系统3、直链行系统 4、神州行系统 5、外卡系统
附上下载地址
http://files.cnblogs.com/wsky/%e6%94%af%e4%bb%98%e6%8e%a5%e5%8f%a3%e6%90%9c%e9%9b%86%e6%96%87%e6%a1%a3%e4%bb%a5%e5%8f%8a%e9%99%84%e4%bb%b6.rar
转载请注明出处 ：）
转载于:https://www.cnblogs.com/wsky/archive/2008/01/24/1052108.html
当前第三方支付接口接入主要包含的支付模式有电脑网站支付、手机网站支付、APP支付等，各第三方支付公司的支付接口费率也趋于相同，一般行业费率在0.6%左右，游戏、娱乐等虚拟业务的费率为1%，下面就整理出常用支付接口费率（包括支付宝、微信、银联、京东支付、百度钱包、易宝支付等）供大家参考！
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| 支付宝 APP 支付 | 移动应用 | 0元 | 一般行业：0.6%，数娱／游戏／3C 数码：1.2% | 0元 |
| 支付宝手机网站支付 | 移动网页 | 0元 | 一般行业：0.6%，数娱／游戏／3C 数码：1.2% | 0元 |
| 支付宝电脑网站支付 | PC 网页 | 0元 | 一般行业：0.6%，数娱／游戏／3C 数码：1.2% | 0元 |
| 支付宝当面付 | 扫码 | 0元 | 一般行业：0.6%，数娱／游戏／3C 数码：1.2% | 0元 |
| 转账到支付宝账户 | 企业付款（B2C／B2B） | 0元 | 免费 | 0元 |
| 支付宝批量付款 | 企业付款（B2C／B2B） | 0元 | 单笔费率：0.5%，最低1元，最高25元 | 0元 |
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| 微信 App 支付 | 移动应用 | 300元／年 | 实物类：0.6%；虚拟类：1% | 0元 |
| 微信公众号支付 | 微信公众号／扫码／企业付款／红包 | 300元／年 | 实物类：0.6%；虚拟类：1% | 0元 |
| 微信 Wap 支付 | 移动网页 | 300元／年 | 实物类：0.6%；虚拟类：1% | 0元 |
| 微信小程序支付 | 微信小程序 | 300元／年 | 实物类：0.6%；虚拟类：1% | 0元 |
| 微信企业付款 | 企业付款（B2C） | 0元 | 免费 | 0元 |
微信支付商户类目所对应的费率，详情可在「腾讯客服-微信支付商户专区」查看
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| QQ 钱包 App 支付 | 移动应用 | 0元 | 实物类：0.6%；虚拟类：1% | 0元 |
| QQ 钱包公众号支付 | QQ 公众号 | 0元 | 实物类：0.6%；虚拟类：1% | 0元 |
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| 银联手机支付 | 移动应用／移动网页／微信公众号 | 2000元（自行申请的以入网收单行为准） | 0.8%（自行申请的以入网收单行为准） | 0元 |
| 银联网关支付 | PC 网页 | 2000元（以入网收单行为准） | 0.8%（以入网收单行为准） | 0元 |
| 企业网银 | PC 网页（B2B 收款） | 20000元（以入网收单行为准） | 15元／笔（以入网收单行为准） | 0元 |
| 银联电子代付 | 企业付款（B2C／B2B） | 2000元（以入网收单行为准） | 1.5元／笔（以入网收单行为准） | 0元 |
| Apple Pay | iOS app | 2000元 | 0.8%（以入网收单行为准） | 0元 |
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| 京东支付 | 移动应用／移动网页／微信公众号／PC 网页 | 0元 | 0.7%（以协议为准） | 0元 |
| 京东白条 | 移动应用／移动网页／微信公众号／PC 网页 | 0元 | 1%（以协议为准） | 0元 |
| 京东代付 | 企业付款（B2C／B2B） | 0元 | 2元／笔（以协议为准） | 0元 |
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| 通联代付 | 企业付款（B2C／B2B） | 0元 | 2元／笔（以协议为准） | 0元 |
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| 百度钱包 | 移动应用／移动网页／微信公众号 | 0元 | 0.6% | 0元 |
| 产品名称 | 应用场景 | 接入费 | 费率 | 保证金 |
| 易宝支付 | 移动应用／移动网页／微信公众号 | 0元 | 0.6% | 按单日单卡交易限额收取（不足1W按1W收取） |
附：微信支付接口费用与申请条件介绍
转自：https://blog.csdn.net/u014756827/article/details/102973298
一、 生理老化
学习活动1——生理老化小测验
二、生理老化的实践意义
《非暴力冲突》
儿童时期是人生发展的关键时期。为儿童提供必要的生存、发展、受保护和参与的机会和条件，最大限度地满足儿童的发展需要，发挥儿童潜能，姜维儿童医生的发展奠定重要基础。
临床观察、专家观点、个案研究。这些有可能是推测和研究假设的来源，会为未来的研究奠定基础。
－ 提出具体的问题
－ 寻找当前的最佳证据
如：思考课间孩子活动，什么样的活动利于他们，如球类运动，多长时间、多大强度、什么效果，等
－ 客观评价证据
－ 基于证据采取行动
案例1：社会工作防跌倒项目 • “爱自己 保命防跌“ ——长者防跌倒讲座
精神疾病的心理教育研究表明，这些教育能成功增加服务对象的有关心里疾病的专门知识，但却与解决疾病复发和再入院没有关系。其有助于服务对象的知情同意。
平衡功能包含坐位、立位和移动平衡三方面。视觉、前庭、本体等平衡感觉功能是20～50岁间最稳定，随后逐渐减退，至70岁以后降低明显。
Lord的老年人重心平衡研究发现：随着年龄增大，平衡能力下降，摔倒
欧美等国居住在社区饿的65岁以上的老人每年有30%～40%发生跌倒，长期生活在保健机构的老人有近半数的老人出现过跌倒；而日本和中国调查结果则低于20%。
（Tips：老博会）
评估方法：动态、静态、综合功能类平衡测试
进行了四组随机对照试验和一组多中心控制实验，是一个为个人定制的肌肉强化与平衡感在训练，再与不行相结合的锻炼计划。这个经过了广泛测试的跌倒预防方案现在已经在全世界实用。
结果显示：与没有参加这个计划的人比较，参与者跌倒的几率减少了35%。这个计划对男女同样有效。
案例2：失独家庭社会工作服务项目 • 关爱失独家庭项目 • 先后开展了志愿者结对、集体过生日、健康保健讲座等，为“失独”父母送上温暖。这一做法还得到推广，对更多失独老人开展“四个一“
主要利用了label标签和input type=’checkbox’标签
预览：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>开关切换</h2>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider"></div>
</label><br><br>
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html>预览：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3 {
margin: 10px 0 10px 0;
font-size: 20px;
}
body {
padding: 10px;
font-size: 12px;
}
.example-con {
margin-top: 30px;
}
.mui-switch-con {
margin-top: 10px;
font-size: 16px;
}
.mui-switch-con label {
display: block
}
.mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
}
.mui-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left: 0;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.mui-switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
}
.mui-switch:checked:before {
left: 21px;
}
.mui-switch.mui-switch-animbg {
transition: background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:before {
transition: left 0.3s;
}
.mui-switch.mui-switch-animbg:checked {
box-shadow: #dfdfdf 0 0 0 0 inset;
background-color: #64bd63;
transition: border-color 0.4s, background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:checked:before {
transition: left 0.3s;
}
.mui-switch.mui-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.mui-switch.mui-switch-anim:before {
transition: left 0.3s;
}
.mui-switch.mui-switch-anim:checked {
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.mui-switch.mui-switch-anim:checked:before {
transition: left 0.3s;
}
</style>
</head>
<body>
<div class="example-con">
<h3>默认</h3>
<div class="mui-tab-con clearfix">
<form class="mui-form" name="" method="post" action="#" id="">
<fieldset>
<legend>表单标题</legend>
<div class="mui-switch-con">
<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
</div>
<div class="mui-switch-con">
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
</div>
</fieldset>
</form>
</div>
<pre class="prettyprint lang-html linenums:1">
<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
</pre>
</div>
<div class="example-con">
<h3>简单的背景过渡效果 switch</h3>
<p>加 mui-switch-animbg 类即可</p>
<div class="mui-tab-con clearfix">
<form class="mui-form" name="" method="post" action="#" id="">
<fieldset>
<legend>表单标题</legend>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中</label>
</div>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
</div>
</fieldset>
</form>
</div>
<pre class="prettyprint lang-html linenums:1">
<label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
</pre>
</div>
<div class="example-con">
<h3>过渡效果的switch</h3>
<p>加 mui-switch-anim 类即可</p>
<div class="mui-tab-con clearfix">
<form class="mui-form" name="" method="post" action="#" id="">
<fieldset>
<legend>表单标题</legend>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中</label>
</div>
<div class="mui-switch-con">
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
</div>
</fieldset>
</form>
</div>
<pre class="prettyprint lang-html linenums:1">
<label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
</pre>
</div>
</body>
</html>使用：
<input class="switch switch-animbg" value="2" style="outline: medium;margin-bottom: -10px;" name="switch-alarm" onclick="switchAlarm()" type="checkbox" >JS控制代码： // 这里只能用prop去控制和判断 不能用attr
function switchAlarm() {
console.log($('.switch').attr('value')) // 2 1 2 1 .....
if($('.switch').attr('value') === '2'){
$('.switch').prop('checked',false)
//操作 .......
//成功以后
$('.switch').prop('checked',true)
$('.switch').attr('value',1)
}else {
$('.switch').prop('checked',true)
//操作 .......
//成功以后
$('.switch').prop('checked',false)
$('.switch').attr('value',2)
}
}之前在实现表单中file类型input选择多图片的时候找到一种方式 也许不是最好的但亲测可行且支持ie7以上以及chrome浏览器
在表单中使用正常多文件选择multiple属性
<input type="file" id="image" class="file image hidden" name="image[]" multiple="true">然后使用AjaxFileUpload或其他方式提交
将对应命名的file文件 $file[‘image'] 转化为 json打印
{"name":"7332.png","type":"image\/png","tmp_name":"\/tmp\/phplqppvR","error":0,"size":659}但是此时结果为
{"name":["7656.png","7718.png"],"type":["image/png","image/png"],"tmp_name":["/tmp/phpDzSovj","/tmp/phpP8kWmT"],"error":[0,0],"size":[357,662]}所有的属性都变为数组 按序排列
这时候可以使用以下代码实现图片保存
if (!isset($_FILES[$field])) {
return new JsonResponse(array('errorCode'=>1, 'message'=>'请上传文件'));
}
//重新命名$_FILE 存储多个文件上传
$arrayFile = array();
foreach($_FILES[$field] as $key => $value){
$i = 0;
if(is_array($value)) {
foreach ($value as $v) {
$i++;
//重命名后重新放入超全局变量_FILE 保证键名唯一 也可直接上传
$name = $field . '_split_' . $i;
$_FILES[$name][$key] = $v;
}
}
}
//是否上传多文件
if($i > 0){
for($j = 1; $j <= $i; $j++){ array_push($arrayFile, $field . '_split_' . $j); } }else{ array_push($arrayFile, $field); } //遍历file多个文件 上传 foreach($arrayFile as $file){ if (isset($_FILES[$file]) && $_FILES[$file]['name']) { //自定义上传方法 具体内容略 $data = $this->uploadFile($file, $path, uniqid());
if ( isset($data) && !empty($data) ) {
if(!isset($data['errors'])){
//将上传结果存储于$result中 多图片地址使用逗号拼接
if(isset($result)){
$result = array('errorCode'=>0, 'message'=>$result['message'] . ',' . reset($data));
}else{
$result = array('errorCode'=>0, 'message'=>reset($data));
}
}else{
//以下为返回错误信息
if(is_array(reset($data))){
$message = reset($data)[0];
}else{
$message = reset($data);
}
$result = array('errorCode' => 1, 'message' => $message);
}
} else {
$result = array('errorCode'=>1, 'message'=>'上传失败');
break;
}
} else {
$result = array('errorCode'=>1, 'message'=>'请上传文件');
break;
}
}
//返回上传结果
return $result;