@GivenCui
2017-03-10T08:55:57.000000Z
字数 12861
阅读 1224
组件
<div class="select_box"><div class="s_box_tit"><span>下拉列表</span><i></i></div><ul class="s_box_opt"><li>11111</li><li>2222</li><li>33333</li></ul></div>
// 所有产品下拉框.select_box{position:relative;width: 100%;@include fixedBorderRadius(6px);background:#fff;}.s_box_tit{width: 100%;position:relative;text-indent: 0.4rem;border-bottom: 1px solid #ddd;i{position: absolute;top:0.9rem;right:0.2rem;// tododisplay: block;width: 0.6rem;height: 0.6rem;background:url(../image/select_down.png) no-repeat;background-size:100%;-webkit-transition:transform 0.5s;transition:transform 0.5s;}}.s_box_opt{display:none;position: absolute;z-index: 10;left:0;background:#fff;border-radius: 0 0 0.2rem 0.2rem;@extend %boxShadow;li{width: 100%;padding-left: 0.3rem;border-bottom:1px solid #E1E1E1;color: #999;&:last-child{border-bottom: none;}}}.js_arrow_turn{i{-webkit-transform:rotate(180deg);transform:rotate(180deg);}}
(function() {// 下拉菜单控制var selectBox = $(".s_box_tit");var selectDrop = $(".s_box_opt");selectBox.click(function(event) {// 下拉列表显示$(this).siblings('.s_box_opt').stop().slideToggle('fast');// 箭头变化$(this).toggleClass('js_arrow_turn');return false;});// 下拉点击传值selectDrop.click(function(event) {var dropValue = $(event.target).html();$(this).siblings('.s_box_tit').find("span").html(dropValue);// 关闭下拉菜单$(this).stop().slideUp('fast');$(this).siblings('.s_box_tit').toggleClass('js_arrow_turn');return false;});// 点击其他关闭下拉$('body').click(function(){selectDrop.slideUp('fast');selectBox.removeClass('js_arrow_turn');});})();
<div class="customRadio"><input type="radio" name="gender1" id="male1"><label for="male1" class="radio"></label><label for="male1">男</label></div><div class="customRadio"><input type="radio" name="gender1" id="female1"><label for="female1" class="radio"></label><label for="female1">女</label></div>
@charset "UTF-8";.customRadio {font-size: 0;display: inline-block;input[type='radio'],input[type='checkbox']{display: none;&:checked {&+label.radio {&:before {opacity:1;}}}}label{@include inline-block;font-size: .7rem;color: #444;&.radio {position: relative;@extend %fixedBoxSizing;margin-right: .5rem;width: .9rem;height: .9rem;border: 1px solid #ddd;border-radius: .5rem;background: #fff;text-align: center;line-height: 1rem;&:before {display: block;content:'';font-size: 0;width:.9rem;height:.9rem;// border-radius: .5rem;background: url(../image/radio_checked.png) no-repeat;background-size:100%;position: absolute;left:-0.05rem;top:-0.05rem;opacity:0;}}}}.customCheckbox {input[type='radio'],input[type='checkbox']{display: none;&:checked {&+label.checkbox {&:before {opacity:1;}}}}label{@include inline-block;font-size: .65rem;color: #444;&.checkbox {position: relative;margin-right: .5rem;width: .9rem;height: .9rem;border: 1px solid #ddd;border-radius: .15rem;background: #fff;text-align: center;line-height: 1;&:before {content:'\e635';width:.6rem;height: .6rem;color: yellow;position: absolute;left:.15rem;top:.15rem;opacity:0;}}}}// todo.customRadio:not(:last-child){margin-right: 0.8rem;}
<link rel="stylesheet" type="text/css" href="../../css/mobisscroll.css"><input class="chooseDate1" type="text" placeholder="选择开始日期" /><script type="text/javascript" src="../../js/jquery.min-1.9.1.js"></script><script type="text/javascript" src="../../js/mobiscroll.js"></script>
//时间控件(function () {var currYear = (new Date()).getFullYear();var opt={};opt.date = {preset : 'date'};//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5 };opt.datetime = {preset : 'datetime'};opt.time = {preset : 'time'};opt.default = {theme: 'android-ics light', //皮肤样式display: 'modal', //显示方式mode: 'scroller', //日期选择模式lang:'zh',startYear:currYear - 10, //开始年份endYear:currYear + 10 //结束年份};var optDateTime = $.extend(opt['datetime'], opt['default']);var optTime = $.extend(opt['time'], opt['default']);$(".chooseDate1").val('').scroller('destroy').scroller($.extend(opt['date'],opt['default']));})();
<link rel="stylesheet" type="text/css" href="../../css/jquery.ui.css"><input type="text" class="line_data" placeholder="请输入" /><script type="text/javascript" src="../../js/jquery.min-1.9.1.js"></script><script type="text/javascript" src="../../js/jquery.ui.min.js"></script>
(function() {// 联想数据var date1 = ["chooseDate1/1999","测试chooseDate1产品名称/5999"];$(".line_data").autocomplete({source: date1,minLength:1 // 执行搜索前用户必须输入的最小字符数});})();
// 联想输入的弹出框的样式--自定义.ui-menu-item{line-height: 1.5;color: #666;font-size: 0.6rem;}
// 随字而动.mark:before{content: '*';font-size: 0.8rem;color: #f25b42;position: relative;top: 0.1rem;left: -0.15rem;}// 定位不动.mark {position: relative;&:before {content: '*';display: block;font-size: 0.8rem;color: #f25b42;position: absolute;top: 0.1rem;left: -0.5rem;}}
<div class="wapper"><div class="js-droprefresh">// 此处为列表</div></div><script type="text/javascript" src="../../js/dropload.js"></script>
// 添加dropload效果.js-droprefresh{padding-top: 5.15rem;}.dropload-up,.dropload-down{position: relative;height: 0;overflow: hidden;font-size: 12px;/* 开启硬件加速 */-webkit-transform:translateZ(0);transform:translateZ(0);}.dropload-refresh,.dropload-update,.dropload-load,.dropload-downdate{height: 50px;line-height: 50px;text-align: center;}.dropload-load .loading{display: inline-block;height: 15px;width: 15px;border-radius: 100%;margin: 6px;border: 2px solid #666;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 0.75s linear infinite;animation: rotate 0.75s linear infinite;}@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}}
// dropload (下拉刷新, 上拉加载)$(function() {// dropload$('.js-droprefresh').dropload({scrollArea: window,domUp: {domClass: 'dropload-up',domRefresh: '<div class="dropload-refresh">↓ 下拉刷新</div>',domUpdate: '<div class="dropload-update">↑ 释放更新</div>',domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'},domDown: {domClass: 'dropload-down',domRefresh: '<div class="dropload-refresh">↑ 上拉加载更多</div>',domDowndate: '<div class="dropload-downdate">↓ 释放更新</div>',domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'},loadUpFn: function(me) {// 为了测试,延迟1秒加载setTimeout(function() {// 每次数据加载完,必须重置me.resetload();// 解锁me.unlock();}, 1000);},loadDownFn: function(me) {setTimeout(function() {// 每次数据加载完,必须重置me.resetload();me.unlock();}, 1000);},threshold: 0});});
<script type="text/javascript" src="../js/slideout.min.js"></script><div id="panel" class = "slideout-panel">// 主面板</div><div id="menu" class = "slideout-menu">// 侧滑菜单</div>
// sliderout.js对应cssbody {width: 100%;height: 100%;}.slideout-menu {position: fixed;top: 0;bottom: 0;width: 12.25rem;height: 100%;overflow-y: scroll;overflow-x:hidden;-webkit-overflow-scrolling: touch;z-index: 0;display: none;}.slideout-menu-left {left: 0;}.slideout-menu-right {right: 0;}.slideout-panel {position: relative;z-index: 1;will-change: transform;background-color: #fff;/* A background-color is required */height: 100%;}.slideout-open,.slideout-open body,.slideout-open .slideout-panel {overflow: hidden;}.slideout-open .slideout-menu {display: block;}/* 自定义 -- 遮罩层 */#shadow{display: none;position: fixed;top:0;bottom:0;left:0;width: 100%;background:rgba(0,0,0,0.7);z-index: 10;}
window.onload = function() {var slideout = new Slideout({'panel': $('#panel').get(0),'menu': $('#menu').get(0),'side': 'right','padding' : 12.25*parseFloat($('html').css('fontSize'))});$('.seeMore').click(function () {// 可以侧滑slideout.toggle();});// 遮罩层的变化slideout.on('open', function() {$('#shadow').fadeIn();});slideout.on('close', function() {$('#shadow').fadeOut();});$('.cancelBtn').click(function(){slideout.close();});};
1. @extend %fixedBox; // 父flex2. @include fixedBoxFlex(); // 子flex3. @extend %fixedBoxSizing; // box-sizing4. @include fixedBorderRadius(); // 圆角5. -webkit-justify-content:space-between; // 均分, space-between || around-between;justify-content:space-between;6.
优点:
- 支持跨浏览器,包括IE8-IE10.
- 无需其他特殊标记,CSS代码量少
- 支持百分比%属性值和min-/max-属性
- 只用这一个类可实现任何内容块居中
- 不论是否设置padding都可居中(在不使用box-sizing属性的前提下)
- 内容块可以被重绘。
- 完美支持图片居中。
缺点:
1.必须声明高度(查看可变高度Variable Height)。
2.建议设置overflow:auto来防止内容越界溢出。(查看溢出Overflow)。
3.在Windows Phone设备上不起作用。
1. 容器内(Within Container)// 父容器.Center-Container { position: relative; }// 子容器.Absolute-Center {width: 50%;height: 50%;overflow: auto;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;}2. 视区内(Within Viewport).Absolute-Center.is-Fixed {position: fixed;z-index: 999;}3. 边栏 (Offsets)// 左侧.Absolute-Center.is-Left {right: auto;left: 20px;}// 右侧.Absolute-Center.is-Right {left: auto;right: 20px;}4. 响应式/自适应(Responsive)// 支持%,min-width,max-width,padding.Absolute-Center.is-Responsive {width: 60%;height: 60%;min-width: 200px;max-width: 400px;padding: 40px;}5. 重绘居中(resizing)// 窗口可以拖拉调整.Absolute-Center.is-Resizable {min-width: 20%;max-width: 80%;min-height: 20%;max-height: 80%;resize: both; // 使块元素可拖动变化transtion:all 0.3s; // 使重绘平滑过渡,主要是长宽的变化overflow: auto;}6. 图片居中// 对img图片用.Absolute-Center.is-Image {height: auto;}
优点:
良好的跨浏览器特性,兼容IE6-IE7。
代码量少。
缺点:
不能自适应。不支持百分比尺寸和min-/max-属性设置。
内容可能溢出容器。
边距大小与padding,和是否定义box-sizing: border-box有关,计算需要根据不同情况。
.is-Negative {width: 300px;height: 200px;padding: 20px;position: absolute;top: 50%; left: 50%;margin-left: -170px; /* (width + padding)/2 */margin-top: -120px; /* (height + padding)/2 */}
优点:
内容可变高度
代码量少
缺点:
IE8不支持
属性需要写浏览器厂商前缀
可能干扰其他transform效果
某些情形下会出现文本或元素边界渲染模糊的现象
.is-Transformed {width: 50%;margin: auto;position: absolute;top: 50%; left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
优点:
- 高度可变
- 内容溢出会将父元素撑开。
- 跨浏览器兼容性好。
缺点:
- 需要额外html标记
<div class="Center-Container is-Table"><div class="Table-Cell"><div class="Center-Block"><!-- CONTENT --></div></div></div>
.Center-Container.is-Table { display: table; }.is-Table .Table-Cell {display: table-cell;vertical-align: middle;}.is-Table .Center-Block {width: 50%;margin: 0 auto;}
优点:
高度可变
内容溢出会将父元素撑开。
支持跨浏览器,也适应于IE7。
缺点:
1.需要一个容器
2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
3.内容块宽度不能超过容器的100% - 0.25em。
<div class="Center-Container is-Inline"><div class="Center-Block"><!-- CONTENT --></div></div>
.Center-Container.is-Inline {text-align: center;overflow: auto;}.Center-Container.is-Inline:after,.is-Inline .Center-Block {display: inline-block;vertical-align: middle;}.Center-Container.is-Inline:after {content: '';height: 100%;margin-left: -0.25em; /* To offset spacing. May vary by font */}.is-Inline .Center-Block {max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top *//* max-width: calc(100% - 0.25em) /* Only for IE9+ */}
.Center-Container.is-Flex{display:flex;}.flex-center{justify-content:center; /* 主轴居中 */align-items:center; /* 交叉轴居中 */}
1. baseUrl在相对路径写法时, 是相对引用的html2. baseUrl绝对路径是服务器根目录开始的3. 不写baseUrl时, paths中相对路径是相对于当前入口文件4. paths中要省略xxx.js后的js
<!-- html中 --><script src="../../js/require.js" data-main="../../js/app/app"></script>
data-main入口文件
// app.jsrequire.config({baseUrl : "",paths : {"jquery": "../lib/jquery.min-1.9.1","jq.ui" : "../lib/jquery.ui.min","autoWidth" : "../tool/autoWidth","jq.dropload" : "../tool/dropload"}});require(['jquery', 'autoWidth', 'jq.ui', 'jq.dropload'],function ($, _FixedWidth) {// 自动适配不同屏幕宽度_FixedWidth.autoWidth();}
其中一个自定义的模块
// autoWidth.jsdefine(['jquery'],function ($){// 适应不同手机屏幕function autoWidth() {init();window.onresize = function () {init();};function init() {var fixedWidth = Math.max(document.documentElement.clientWidth, document.body.clientWidth);var w = fixedWidth / 18.75;var html = document.querySelector("html");html.style.fontSize = w + "px";$('body,html').height(Math.max(document.documentElement.clientHeight, document.body.clientHeight));}}return {autoWidth : autoWidth};});
// 方法一:;(function (factory) {if (typeof define === "function" && define.amd) {// AMD模式define([ "jquery" ], factory);} else {// 全局模式factory(jQuery);}}(function ($) {$.fn.jqueryPlugin = function () {//插件代码};}));// 方法二define(["jquery"], // Require jqueryfunction($){//把你原来的插件代码放这里吧,这样就行了//注意文件命名哦});// 方法三require.config({baseUrl: "js",paths: {"jquery": "jquery-1.8.3.min","jquery.form": "jquery.form"},shim: {"jquery.form" : ["jquery"]}});/* 这样配置之后我们就可以使用加载插件后的jquery了 */require.config(["jquery", "jquery.form"], function($){$(function(){$("#form").ajaxSubmit({...});})})
/* Require.js中使用jQuery UI组件 */(function (widgetFactory) {if (typeof define === "function" && define.amd) {// AMD模式define("jquery.ui.widget", ["jquery"], function () {widgetFactory(window.jQuery);});} else {// 全局模式widgetFactory(window.jQuery);}}(function ($, undefined) {// jQuery Widget Factory 代码}));
;(function (fn){if ( typeof define === "function" && define.amd ) {// AMD. Register as an anonymous module.define(fn);} else {// Browser globals// 以我的库为例 返回mToolswindow.mTools = fn();}})(function(){我们的js库return {//模块返回值}});