Welcome 微信登录

首页 / 脚本样式 / JavaScript

Angularjs结合Bootstrap制作的一个TODO List

Angularjs结合Bootstrap制作的一个TODO List

看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应用)。为了增强理解,下面写了一篇文章,用以复习巩固。准备Angularjs下载说是下载,其实只要能在我们的页面中引用到Angularjs即可。可以有如下方式。CDN加速使用国内的CDN加速服务也是可以的。复制代码 代码如下:<script src="http://code.angularjs.org...
AngularJS 工作原理详解

AngularJS 工作原理详解

个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去。在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析。 首先上一小段代码(index.html),结合代码我们来看看,angular一步一步都做了些什么。<!doctype html><html ng-app> <head> <script src="angular.j...
jQuery fadeOut 异步实例代码详解

jQuery fadeOut 异步实例代码详解

定义和用法fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。注释:隐藏的元素不会被完全显示(不再影响页面的布局)。提示:该方法通常与 fadeIn() 方法一起使用。语法$(selector).fadeOut(speed,easing,callback)1. 概述jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里。2. example<html><body&g...
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法

Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法

遇到的问题: laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题);解决办法: 给laydate绑定id; 解决前代码:<input id="startTime" placeholder="请输入开始时间" class="laydate-icon"onClick="laydate({istime: true, format: "YYYY-MM-DD hh:mm:ss"})"><...
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样?很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数:$(selector).hide(speed,callback);$(selector).fadeOut(speed,callback);首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已。但是当我们把参数 sp...
Javascript中浏览器窗口的基本操作总结

Javascript中浏览器窗口的基本操作总结

窗口位置【1】获取 浏览器(firefox不支持)提供了screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置 在窗口最大化的情况下,运行下列代码时,各个浏览器返回的值并不相同。chrome返回left:0;top:0。而IE则返回left:0;top:56(若有菜单栏,则返回left:0;top:78),这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。safari则由于自身的bug...
js获取form表单所有数据的简单方法

js获取form表单所有数据的简单方法

在HTML中用js获取通过GET、POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值。针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用。可以提高大家的开发效率。Js代码 <script type="text/javascript">//获取指定form中的所有的<input>对象function getElements(formId) {var form...
AngularJS 整理一些优化的小技巧

AngularJS 整理一些优化的小技巧

关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的.ng简介angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析.ng的...
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)

BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)

今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的,排错思路:1,在当前页面主层放置一个时间控件,测试通过2,在ajax加载页放置一个时间控件,测试通过3,在模态框最外层放置一个时间控件,不通过主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap...
Bootstrap模态框(modal)垂直居中的实例代码

Bootstrap模态框(modal)垂直居中的实例代码

Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal)。 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着。最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去。 因为...
AngularJS入门教程引导程序

AngularJS入门教程引导程序

我们现在开始准备编写AngularJS应用——phonecat。这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用。进入angular-phonecat目录,运行如下命令:git checkout -f step-0该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改。运行以下命令:nod...
AngularJS入门教程之静态模板详解

AngularJS入门教程之静态模板详解

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1。git checkout -f step-1请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果。app/index.html<ul><...
AngularJS入门教程之AngularJS 模板

AngularJS入门教程之AngularJS 模板

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试。一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。请重置工作目录:git checkout -f step-2我们的应用现在有了一个包含三部手机的列表。步骤1和步骤2之间最重要的不同在下面列出。,你可以到Gi...
AngularJS入门教程之迭代器过滤详解

AngularJS入门教程之迭代器过滤详解

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能(没错,这个真的非常简单!)。同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙。它监视着你的应用,并且在发生回归的时候迅速报告。请重置工作目录:git checkout -f step-3我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。步骤2和步骤3之间最重要的不同在下面列出。你可以在GitHub里看到完整的...
<< 131 132 133 134 135 136 137 138 139 140 >>