[关闭]
@GivenCui 2017-03-10T16:55:57.000000Z 字数 12861 阅读 1069

html复用组件

组件



依赖链接

组件,依赖git仓库


select组件

  1. <div class="select_box">
  2. <div class="s_box_tit"><span>下拉列表</span><i></i></div>
  3. <ul class="s_box_opt">
  4. <li>11111</li>
  5. <li>2222</li>
  6. <li>33333</li>
  7. </ul>
  8. </div>
  1. // 所有产品下拉框
  2. .select_box{
  3. position:relative;
  4. width: 100%;
  5. @include fixedBorderRadius(6px);
  6. background:#fff;
  7. }
  8. .s_box_tit{
  9. width: 100%;
  10. position:relative;
  11. text-indent: 0.4rem;
  12. border-bottom: 1px solid #ddd;
  13. i{
  14. position: absolute;
  15. top:0.9rem;
  16. right:0.2rem;
  17. // todo
  18. display: block;
  19. width: 0.6rem;
  20. height: 0.6rem;
  21. background:url(../image/select_down.png) no-repeat;
  22. background-size:100%;
  23. -webkit-transition:transform 0.5s;
  24. transition:transform 0.5s;
  25. }
  26. }
  27. .s_box_opt{
  28. display:none;
  29. position: absolute;
  30. z-index: 10;
  31. left:0;
  32. background:#fff;
  33. border-radius: 0 0 0.2rem 0.2rem;
  34. @extend %boxShadow;
  35. li{
  36. width: 100%;
  37. padding-left: 0.3rem;
  38. border-bottom:1px solid #E1E1E1;
  39. color: #999;
  40. &:last-child{
  41. border-bottom: none;
  42. }
  43. }
  44. }
  45. .js_arrow_turn{
  46. i{
  47. -webkit-transform:rotate(180deg);
  48. transform:rotate(180deg);
  49. }
  50. }
  1. (function() {
  2. // 下拉菜单控制
  3. var selectBox = $(".s_box_tit");
  4. var selectDrop = $(".s_box_opt");
  5. selectBox.click(function(event) {
  6. // 下拉列表显示
  7. $(this).siblings('.s_box_opt').stop().slideToggle('fast');
  8. // 箭头变化
  9. $(this).toggleClass('js_arrow_turn');
  10. return false;
  11. });
  12. // 下拉点击传值
  13. selectDrop.click(function(event) {
  14. var dropValue = $(event.target).html();
  15. $(this).siblings('.s_box_tit').find("span").html(dropValue);
  16. // 关闭下拉菜单
  17. $(this).stop().slideUp('fast');
  18. $(this).siblings('.s_box_tit').toggleClass('js_arrow_turn');
  19. return false;
  20. });
  21. // 点击其他关闭下拉
  22. $('body').click(function(){
  23. selectDrop.slideUp('fast');
  24. selectBox.removeClass('js_arrow_turn');
  25. });
  26. })();

表单按钮美化

  1. <div class="customRadio">
  2. <input type="radio" name="gender1" id="male1">
  3. <label for="male1" class="radio"></label>
  4. <label for="male1"></label>
  5. </div>
  6. <div class="customRadio">
  7. <input type="radio" name="gender1" id="female1">
  8. <label for="female1" class="radio"></label>
  9. <label for="female1"></label>
  10. </div>
  1. @charset "UTF-8";
  2. .customRadio {
  3. font-size: 0;
  4. display: inline-block;
  5. input[type='radio'],
  6. input[type='checkbox']{
  7. display: none;
  8. &:checked {
  9. &+label.radio {
  10. &:before {
  11. opacity:1;
  12. }
  13. }
  14. }
  15. }
  16. label{
  17. @include inline-block;
  18. font-size: .7rem;
  19. color: #444;
  20. &.radio {
  21. position: relative;
  22. @extend %fixedBoxSizing;
  23. margin-right: .5rem;
  24. width: .9rem;
  25. height: .9rem;
  26. border: 1px solid #ddd;
  27. border-radius: .5rem;
  28. background: #fff;
  29. text-align: center;
  30. line-height: 1rem;
  31. &:before {
  32. display: block;
  33. content:'';
  34. font-size: 0;
  35. width:.9rem;
  36. height:.9rem;
  37. // border-radius: .5rem;
  38. background: url(../image/radio_checked.png) no-repeat;
  39. background-size:100%;
  40. position: absolute;
  41. left:-0.05rem;
  42. top:-0.05rem;
  43. opacity:0;
  44. }
  45. }
  46. }
  47. }
  48. .customCheckbox {
  49. input[type='radio'],
  50. input[type='checkbox']{
  51. display: none;
  52. &:checked {
  53. &+label.checkbox {
  54. &:before {
  55. opacity:1;
  56. }
  57. }
  58. }
  59. }
  60. label{
  61. @include inline-block;
  62. font-size: .65rem;
  63. color: #444;
  64. &.checkbox {
  65. position: relative;
  66. margin-right: .5rem;
  67. width: .9rem;
  68. height: .9rem;
  69. border: 1px solid #ddd;
  70. border-radius: .15rem;
  71. background: #fff;
  72. text-align: center;
  73. line-height: 1;
  74. &:before {
  75. content:'\e635';
  76. width:.6rem;
  77. height: .6rem;
  78. color: yellow;
  79. position: absolute;
  80. left:.15rem;
  81. top:.15rem;
  82. opacity:0;
  83. }
  84. }
  85. }
  86. }
  87. // todo
  88. .customRadio:not(:last-child){
  89. margin-right: 0.8rem;
  90. }

选择日期

mobiscroll(日期插件)
Easy UI
mobiscroll官网

  1. <link rel="stylesheet" type="text/css" href="../../css/mobisscroll.css">
  2. <input class="chooseDate1" type="text" placeholder="选择开始日期" />
  3. <script type="text/javascript" src="../../js/jquery.min-1.9.1.js"></script>
  4. <script type="text/javascript" src="../../js/mobiscroll.js"></script>
  1. //时间控件
  2. (function () {
  3. var currYear = (new Date()).getFullYear();
  4. var opt={};
  5. opt.date = {preset : 'date'};
  6. //opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5 };
  7. opt.datetime = {preset : 'datetime'};
  8. opt.time = {preset : 'time'};
  9. opt.default = {
  10. theme: 'android-ics light', //皮肤样式
  11. display: 'modal', //显示方式
  12. mode: 'scroller', //日期选择模式
  13. lang:'zh',
  14. startYear:currYear - 10, //开始年份
  15. endYear:currYear + 10 //结束年份
  16. };
  17. var optDateTime = $.extend(opt['datetime'], opt['default']);
  18. var optTime = $.extend(opt['time'], opt['default']);
  19. $(".chooseDate1").val('').scroller('destroy').scroller(
  20. $.extend(
  21. opt['date'],
  22. opt['default']
  23. )
  24. );
  25. })();

jq联想输入

  1. <link rel="stylesheet" type="text/css" href="../../css/jquery.ui.css">
  2. <input type="text" class="line_data" placeholder="请输入" />
  3. <script type="text/javascript" src="../../js/jquery.min-1.9.1.js"></script>
  4. <script type="text/javascript" src="../../js/jquery.ui.min.js"></script>
  1. (function() {
  2. // 联想数据
  3. var date1 = [
  4. "chooseDate1/1999",
  5. "测试chooseDate1产品名称/5999"
  6. ];
  7. $(".line_data").autocomplete({
  8. source: date1,
  9. minLength:1 // 执行搜索前用户必须输入的最小字符数
  10. });
  11. })();
  1. // 联想输入的弹出框的样式--自定义
  2. .ui-menu-item{
  3. line-height: 1.5;
  4. color: #666;
  5. font-size: 0.6rem;
  6. }

重点*的样式

  1. // 随字而动
  2. .mark:before{
  3. content: '*';
  4. font-size: 0.8rem;
  5. color: #f25b42;
  6. position: relative;
  7. top: 0.1rem;
  8. left: -0.15rem;
  9. }
  10. // 定位不动
  11. .mark {
  12. position: relative;
  13. &:before {
  14. content: '*';
  15. display: block;
  16. font-size: 0.8rem;
  17. color: #f25b42;
  18. position: absolute;
  19. top: 0.1rem;
  20. left: -0.5rem;
  21. }
  22. }

上拉加载,下拉刷新

dropload

  1. <div class="wapper">
  2. <div class="js-droprefresh">
  3. // 此处为列表
  4. </div>
  5. </div>
  6. <script type="text/javascript" src="../../js/dropload.js"></script>
  1. // 添加dropload效果
  2. .js-droprefresh{
  3. padding-top: 5.15rem;
  4. }
  5. .dropload-up,.dropload-down{
  6. position: relative;
  7. height: 0;
  8. overflow: hidden;
  9. font-size: 12px;
  10. /* 开启硬件加速 */
  11. -webkit-transform:translateZ(0);
  12. transform:translateZ(0);
  13. }
  14. .dropload-refresh,.dropload-update,.dropload-load,.dropload-downdate{
  15. height: 50px;
  16. line-height: 50px;
  17. text-align: center;
  18. }
  19. .dropload-load .loading{
  20. display: inline-block;
  21. height: 15px;
  22. width: 15px;
  23. border-radius: 100%;
  24. margin: 6px;
  25. border: 2px solid #666;
  26. border-bottom-color: transparent;
  27. vertical-align: middle;
  28. -webkit-animation: rotate 0.75s linear infinite;
  29. animation: rotate 0.75s linear infinite;
  30. }
  31. @-webkit-keyframes rotate {
  32. 0% {
  33. -webkit-transform: rotate(0deg);
  34. }
  35. 50% {
  36. -webkit-transform: rotate(180deg);
  37. }
  38. 100% {
  39. -webkit-transform: rotate(360deg);
  40. }
  41. }
  42. @keyframes rotate {
  43. 0% {
  44. transform: rotate(0deg);
  45. }
  46. 50% {
  47. transform: rotate(180deg);
  48. }
  49. 100% {
  50. transform: rotate(360deg);
  51. }
  52. }
  1. // dropload (下拉刷新, 上拉加载)
  2. $(function() {
  3. // dropload
  4. $('.js-droprefresh').dropload({
  5. scrollArea: window,
  6. domUp: {
  7. domClass: 'dropload-up',
  8. domRefresh: '<div class="dropload-refresh">↓ 下拉刷新</div>',
  9. domUpdate: '<div class="dropload-update">↑ 释放更新</div>',
  10. domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  11. },
  12. domDown: {
  13. domClass: 'dropload-down',
  14. domRefresh: '<div class="dropload-refresh">↑ 上拉加载更多</div>',
  15. domDowndate: '<div class="dropload-downdate">↓ 释放更新</div>',
  16. domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
  17. },
  18. loadUpFn: function(me) {
  19. // 为了测试,延迟1秒加载
  20. setTimeout(function() {
  21. // 每次数据加载完,必须重置
  22. me.resetload();
  23. // 解锁
  24. me.unlock();
  25. }, 1000);
  26. },
  27. loadDownFn: function(me) {
  28. setTimeout(function() {
  29. // 每次数据加载完,必须重置
  30. me.resetload();
  31. me.unlock();
  32. }, 1000);
  33. },
  34. threshold: 0
  35. });
  36. });

侧滑--slideout (主动, 侧不动)

slideout( github )

  1. <script type="text/javascript" src="../js/slideout.min.js"></script>
  2. <div id="panel" class = "slideout-panel">
  3. // 主面板
  4. </div>
  5. <div id="menu" class = "slideout-menu">
  6. // 侧滑菜单
  7. </div>
  1. // sliderout.js对应css
  2. body {
  3. width: 100%;
  4. height: 100%;
  5. }
  6. .slideout-menu {
  7. position: fixed;
  8. top: 0;
  9. bottom: 0;
  10. width: 12.25rem;
  11. height: 100%;
  12. overflow-y: scroll;
  13. overflow-x:hidden;
  14. -webkit-overflow-scrolling: touch;
  15. z-index: 0;
  16. display: none;
  17. }
  18. .slideout-menu-left {
  19. left: 0;
  20. }
  21. .slideout-menu-right {
  22. right: 0;
  23. }
  24. .slideout-panel {
  25. position: relative;
  26. z-index: 1;
  27. will-change: transform;
  28. background-color: #fff;
  29. /* A background-color is required */
  30. height: 100%;
  31. }
  32. .slideout-open,
  33. .slideout-open body,
  34. .slideout-open .slideout-panel {
  35. overflow: hidden;
  36. }
  37. .slideout-open .slideout-menu {
  38. display: block;
  39. }
  40. /* 自定义 -- 遮罩层 */
  41. #shadow{
  42. display: none;
  43. position: fixed;
  44. top:0;
  45. bottom:0;
  46. left:0;
  47. width: 100%;
  48. background:rgba(0,0,0,0.7);
  49. z-index: 10;
  50. }
  1. window.onload = function() {
  2. var slideout = new Slideout({
  3. 'panel': $('#panel').get(0),
  4. 'menu': $('#menu').get(0),
  5. 'side': 'right',
  6. 'padding' : 12.25*parseFloat($('html').css('fontSize'))
  7. });
  8. $('.seeMore').click(function () {
  9. // 可以侧滑
  10. slideout.toggle();
  11. });
  12. // 遮罩层的变化
  13. slideout.on('open', function() {
  14. $('#shadow').fadeIn();
  15. });
  16. slideout.on('close', function() {
  17. $('#shadow').fadeOut();
  18. });
  19. $('.cancelBtn').click(function(){
  20. slideout.close();
  21. });
  22. };

CLCL中的积累

  1. 1. @extend %fixedBox; // 父flex
  2. 2. @include fixedBoxFlex(); // 子flex
  3. 3. @extend %fixedBoxSizing; // box-sizing
  4. 4. @include fixedBorderRadius(); // 圆角
  5. 5. -webkit-justify-content:space-between; // 均分, space-between || around-between;
  6. justify-content:space-between;
  7. 6.

css的居中

http://www.tuicool.com/articles/vY3UVfE

1. 绝对居中

优点:

  1. 支持跨浏览器,包括IE8-IE10.
  2. 无需其他特殊标记,CSS代码量少
  3. 支持百分比%属性值和min-/max-属性
  4. 只用这一个类可实现任何内容块居中
  5. 不论是否设置padding都可居中(在不使用box-sizing属性的前提下)
  6. 内容块可以被重绘。
  7. 完美支持图片居中。

缺点:

1.必须声明高度(查看可变高度Variable Height)。
2.建议设置overflow:auto来防止内容越界溢出。(查看溢出Overflow)。
3.在Windows Phone设备上不起作用。

  1. 1. 容器内(Within Container
  2. // 父容器
  3. .Center-Container { position: relative; }
  4. // 子容器
  5. .Absolute-Center {
  6. width: 50%;
  7. height: 50%;
  8. overflow: auto;
  9. margin: auto;
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. bottom: 0;
  14. right: 0;
  15. }
  16. 2. 视区内(Within Viewport
  17. .Absolute-Center.is-Fixed {
  18. position: fixed;
  19. z-index: 999;
  20. }
  21. 3. 边栏 (Offsets)
  22. // 左侧
  23. .Absolute-Center.is-Left {
  24. right: auto;
  25. left: 20px;
  26. }
  27. // 右侧
  28. .Absolute-Center.is-Right {
  29. left: auto;
  30. right: 20px;
  31. }
  32. 4. 响应式/自适应(Responsive)
  33. // 支持%,min-width,max-width,padding
  34. .Absolute-Center.is-Responsive {
  35. width: 60%;
  36. height: 60%;
  37. min-width: 200px;
  38. max-width: 400px;
  39. padding: 40px;
  40. }
  41. 5. 重绘居中(resizing)
  42. // 窗口可以拖拉调整
  43. .Absolute-Center.is-Resizable {
  44. min-width: 20%;
  45. max-width: 80%;
  46. min-height: 20%;
  47. max-height: 80%;
  48. resize: both; // 使块元素可拖动变化
  49. transtion:all 0.3s; // 使重绘平滑过渡,主要是长宽的变化
  50. overflow: auto;
  51. }
  52. 6. 图片居中
  53. // 对img图片用
  54. .Absolute-Center.is-Image {
  55. height: auto;
  56. }

2. 负外边距(Negative Margins)

优点:

  1. 良好的跨浏览器特性,兼容IE6-IE7。

  2. 代码量少。

缺点:

  1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。

  2. 内容可能溢出容器。

  3. 边距大小与padding,和是否定义box-sizing: border-box有关,计算需要根据不同情况。

  1. .is-Negative {
  2. width: 300px;
  3. height: 200px;
  4. padding: 20px;
  5. position: absolute;
  6. top: 50%; left: 50%;
  7. margin-left: -170px; /* (width + padding)/2 */
  8. margin-top: -120px; /* (height + padding)/2 */
  9. }

3. 变形(Transforms)

优点:

  1. 内容可变高度

  2. 代码量少

缺点:

  1. IE8不支持

  2. 属性需要写浏览器厂商前缀

  3. 可能干扰其他transform效果

  4. 某些情形下会出现文本或元素边界渲染模糊的现象

  1. .is-Transformed {
  2. width: 50%;
  3. margin: auto;
  4. position: absolute;
  5. top: 50%; left: 50%;
  6. -webkit-transform: translate(-50%,-50%);
  7. -ms-transform: translate(-50%,-50%);
  8. transform: translate(-50%,-50%);
  9. }

4. 表格单元格(Table-Cell)

优点:

  1. 高度可变
  2. 内容溢出会将父元素撑开。
  3. 跨浏览器兼容性好。

缺点:

  1. 需要额外html标记
  1. <div class="Center-Container is-Table">
  2. <div class="Table-Cell">
  3. <div class="Center-Block">
  4. <!-- CONTENT -->
  5. </div>
  6. </div>
  7. </div>
  1. .Center-Container.is-Table { display: table; }
  2. .is-Table .Table-Cell {
  3. display: table-cell;
  4. vertical-align: middle;
  5. }
  6. .is-Table .Center-Block {
  7. width: 50%;
  8. margin: 0 auto;
  9. }

5. 行内块元素(Inline-Block)

优点:

  1. 高度可变

  2. 内容溢出会将父元素撑开。

  3. 支持跨浏览器,也适应于IE7。

缺点:

1.需要一个容器

2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

3.内容块宽度不能超过容器的100% - 0.25em。

  1. <div class="Center-Container is-Inline">
  2. <div class="Center-Block">
  3. <!-- CONTENT -->
  4. </div>
  5. </div>
  1. .Center-Container.is-Inline {
  2. text-align: center;
  3. overflow: auto;
  4. }
  5. .Center-Container.is-Inline:after,
  6. .is-Inline .Center-Block {
  7. display: inline-block;
  8. vertical-align: middle;
  9. }
  10. .Center-Container.is-Inline:after {
  11. content: '';
  12. height: 100%;
  13. margin-left: -0.25em; /* To offset spacing. May vary by font */
  14. }
  15. .is-Inline .Center-Block {
  16. max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  17. /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
  18. }

6. Flexbox(Flex布局)

  1. .Center-Container.is-Flex{
  2. display:flex;
  3. }
  4. .flex-center{
  5. justify-content:center; /* 主轴居中 */
  6. align-items:center; /* 交叉轴居中 */
  7. }

Require.js基本用法

require.config的路径问题

  1. 1. baseUrl在相对路径写法时, 是相对引用的html
  2. 2. baseUrl绝对路径是服务器根目录开始的
  3. 3. 不写baseUrl时, paths中相对路径是相对于当前入口文件
  4. 4. paths中要省略xxx.js后的js

基本框架

  1. <!-- html中 -->
  2. <script src="../../js/require.js" data-main="../../js/app/app"></script>

data-main入口文件

  1. // app.js
  2. require.config({
  3. baseUrl : "",
  4. paths : {
  5. "jquery": "../lib/jquery.min-1.9.1",
  6. "jq.ui" : "../lib/jquery.ui.min",
  7. "autoWidth" : "../tool/autoWidth",
  8. "jq.dropload" : "../tool/dropload"
  9. }
  10. });
  11. require(['jquery', 'autoWidth', 'jq.ui', 'jq.dropload'],function ($, _FixedWidth) {
  12. // 自动适配不同屏幕宽度
  13. _FixedWidth.autoWidth();
  14. }

其中一个自定义的模块

  1. // autoWidth.js
  2. define(['jquery'],function ($){
  3. // 适应不同手机屏幕
  4. function autoWidth() {
  5. init();
  6. window.onresize = function () {
  7. init();
  8. };
  9. function init() {
  10. var fixedWidth = Math.max(document.documentElement.clientWidth, document.body.clientWidth);
  11. var w = fixedWidth / 18.75;
  12. var html = document.querySelector("html");
  13. html.style.fontSize = w + "px";
  14. $('body,html').height(Math.max(document.documentElement.clientHeight, document.body.clientHeight));
  15. }
  16. }
  17. return {
  18. autoWidth : autoWidth
  19. };
  20. });

非AMD模块的改造(jq插件)

  1. // 方法一:
  2. ;(function (factory) {
  3. if (typeof define === "function" && define.amd) {
  4. // AMD模式
  5. define([ "jquery" ], factory);
  6. } else {
  7. // 全局模式
  8. factory(jQuery);
  9. }
  10. }(function ($) {
  11. $.fn.jqueryPlugin = function () {
  12. //插件代码
  13. };
  14. }));
  15. // 方法二
  16. define(["jquery"], // Require jquery
  17. function($){
  18. //把你原来的插件代码放这里吧,这样就行了
  19. //注意文件命名哦
  20. });
  21. // 方法三
  22. require.config({
  23. baseUrl: "js",
  24. paths: {
  25. "jquery": "jquery-1.8.3.min",
  26. "jquery.form": "jquery.form"    
  27. },
  28. shim: {
  29.    "jquery.form" : ["jquery"]
  30.   
  31. }
  32. });
  33. /* 这样配置之后我们就可以使用加载插件后的jquery了 */
  34. require.config(["jquery", "jquery.form"], function($){
  35. $(function(){
  36. $("#form").ajaxSubmit({...});
  37. })
  38. })

Require.js中使用jQuery UI组件

  1. /* Require.js中使用jQuery UI组件 */
  2. (function (widgetFactory) {
  3. if (typeof define === "function" && define.amd) {
  4. // AMD模式
  5. define("jquery.ui.widget", ["jquery"], function () {
  6. widgetFactory(window.jQuery);
  7. });
  8. } else {
  9. // 全局模式
  10. widgetFactory(window.jQuery);
  11. }
  12. }
  13. (function ($, undefined) {
  14. // jQuery Widget Factory 代码
  15. }));

自己编写支持AMD的库

  1. ;(function (fn){
  2. if ( typeof define === "function" && define.amd ) {
  3. // AMD. Register as an anonymous module.
  4. define(fn);
  5. } else {
  6. // Browser globals
  7. // 以我的库为例 返回mTools
  8. window.mTools = fn();
  9. }
  10. })(function(){
  11. 我们的js
  12. return {
  13. //模块返回值
  14. }
  15. });
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注