文章: 阅读:

Ajax 基础知识

Ajax（Asynchronous JavaScript and XML）异步的 JavaScript 和 XML。Ajax 不是新的编程语言，而是一种使用现有标准的新方法。Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。Ajax 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
ScriptAjax

阅读全文 >>

TypeScript 基础知识

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
ScriptTypeScript

阅读全文 >>

Chart.js

Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。Chart.js 是可以画各种图表的一款前端工具。交叉点，默认就是这样，需要把鼠标放在交叉点上才会显示提示信息。非交叉点，intersect 修改成 false, 就表示鼠标移动到图表就会出现提示信息了。nearest 表示显示最近的一根线的信息。
ScriptJavaScript

阅读全文 >>

JSON

JSON JavaScript 对象表示法（JavaScript Object Notation）是一种存储数据的方式。JSON 是存储和交换文本信息的语法，类似 XML。JSON 比 XML 更小、更快，更易解析。JSON 对象由 "名称/值对" 组成，名称和值之间用冒号 ":" 隔开。访问 JSON 对象：通过点 "." 访问 JSON 对象的属性。
ScriptJavaScript

阅读全文 >>

JavaScript 基础知识

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。完整的 JavaScript 由语言基础、BOM 和 DOM 组成。
ScriptJavaScript

阅读全文 >>

Foundation Equalizer 均衡器

Foundation Equalizer 均衡器。可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。均衡器需要使用 JavaScript。所以需要初始化 Foundation JS。在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。这会一起连接到均衡器容器。重复多次嵌套均衡器，确保他们是匹配的。
CSSFoundation

阅读全文 >>

Foundation 模态框

模态框是一个显示在页面头部的弹窗。可以在容器元素上 (如 div id="myModal") 使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。id 必须与容器 id 一致。如果希望在点击模态框之外的区域来关闭模态框。可以在模态框的关闭按钮 a 标签上添加 .close-reveal-modal 类来实现。模态框需要使用 JavaScript。所以需要初始化 Foundation JS。
CSSFoundation

阅读全文 >>

Foundation 提示框

提示框在鼠标移动到元素上后显示。可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。提示框需要使用 JavaScript。所以需要初始化 Foundation JS。.has-tip 类可以加粗鼠标移动的文本。默认情况下，提示框会出现在元素的底部。可以使用 .tip-top, .tip-left, .tip-right or .tip-bottom (默认) 来设置提示框的位置。在小尺寸的屏幕上，提示框的宽带是 100%。.radius 和 .round 类用于设置圆角提示框。
CSSFoundation

阅读全文 >>

Foundation 滑块

Foundation 滑块允许用户通过拖动来选取区间值。滑块可以通过使用 div class="range-slider" data-slider 创建。在 div 内, 添加两个 span 元素 span class="range-slider-handle" 创建矩形滑块（蓝色背景），span class="range-slider-active-segment" 是在滑块后的灰色横条，是滑块拖动区域。滑块需要使用 JavaScript。所以你需要初始化 Foundation JS。使用 .radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块。
CSSFoundation

阅读全文 >>

Foundation 开关

开关是在鼠标点击 (手指敲击) 下在 "On" 和 "Off" 状态下切换。切换开关使用 div class="switch" 创建。div 内添加带有唯一 id 的 input type="checkbox"，label 元素的 for 属性需要与 input type="checkbox" 的 id 相匹配。使用 .large, .small 或 .tiny 类来设置开关大小。使用 .radius 和 .round 类来设置圆角切换开关。可以通过设置单选按钮 (radio) 来设置单个选项。注意各个选项的 name 属性必须一致。
CSSFoundation

阅读全文 >>

Foundation 表单

Foundation 会自动渲染表单为全局样式。所有 textarea, select 及 input 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。在表单中使用 label 元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点。如果需要设置标签右对齐，可以使用 .right 类。Foundation 渲染 fieldset 元素的样式如下。使用 .error 类来设置错误的标签、输入框、文本框样式。
CSSFoundation

阅读全文 >>

Foundation 麦哲伦导航

麦哲伦导航（Magellan）就是一个导航索引。在 div 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。然后在 dd 或 li 上添加 data-magellan-arrival="value" 属性，后面添加一个与该属性值一样的链接 (page1)。使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的 a 元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。最后，初始化 Foundation JS，用户在滚动页面时导航就会根据当前显示的内容自动切换。
CSSFoundation

阅读全文 >>

Foundation 侧边栏导航

Foundation 使用 ul class="side-nav" 创建侧边栏。已点击的链接可以在 li 上使用 .active 类来标识，使用 .divider 类添加水平分割线。可以使用网格设计模式来设置侧边导航栏。Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出)。
CSSFoundation

阅读全文 >>