利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title"> <div class="M_Button" id="Plan">menu1</div> <div class="M_Button" id="Expert">menu2<…
1.jQuery Mobile 自定义导航条图标…
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1…
原文:http://www.sharejs.com/js/menu/1601 CSS样式表: <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> body{ background: #333 ; width: 610px; margin: 0 auto;…
//①不定义接受参数的方式来接受参数(arguments) function getparams(){ //利用arguments来接受参数,arguments表示参数集合, //里面存放的调用这个方法所传递过来的所有参数的集合  var _q=arguments[0];//0位置表示q参数  var _a=arguments[1];//1位置表示a参数  var _b=arguments[2];//2位置表示b参数  var _c=arguments[3];//3位置表示c参数  var _d…
最近开始忙着开自己的个人博客了,自己的前端确实是渣渣.没办法,一步步来,从慕课网上慢慢学着先. 首先带来的是一个导航栏的设计: 垂直导航栏的设计: 直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:…
实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTop大于浮动层离窗口顶部的距离时,就让浮动层的position属性设为fixed定位,脱离文档流2,浏览器向上滚动时,当document的scrollTop小于浮动层离窗口顶部的距离时,就让浮动层的position属性设为static定位,回归文档流 代码实现 先看看html和css代码,很简单 <!…
其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们需要自己来设计统计系统.由于前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比较简单.   几个基本统计需求: 1.统计web每个页面用户访问量 2.统计用户访问者的和IP地址信息 3.页面之间的跳转情况 4.访问高峰时间段   服务器结构: 数据库表设计:    …
事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我们须要自己来设计统计系统.因为前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比較简单.   几个基本统计需求: 1.统计web每一个页面用户訪问量 2.统计用户訪问者的和IP地址信息 3.页面之间的跳转情况 4.訪问高峰时间段   server结构: 数据库表设计:…
案例一:导航菜单的制作 垂直菜单…
1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉菜单</title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <…
今天来做一个导航条! 首先写一个坯子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF…
上篇中,我已经写出一个导航条的,虽然太丑了,不过功能是有了,这次我将要给我的导航条加一个动画,先看下演示效果 这次我是用的是一个状态动画,大致原理就是写出一个空间的几个状态,完了再加一个过度动画,这里只有简单的属性动画,和持续周期 是我的错误用法 开的是时候,我把状态卸载了DLNavigation的模块里面,虽然可以实现,但是里面DLButton控件是没有动的,所以我把这个状态动画移动了上一层中,等于是操作我的整个导航条的空间,这里还是有问题的,不过后期再将卸载这里的问题. 先吧代码截图位置写上…
很多时候我们都利用js和jquery中操作input,比如追加属性,改变属性值等等,我在这里简单的整理了一下,并在以后逐步补充. 1:删除input的某一属性. <input name="code" id="code" readonly="true"/>该input包含一个readonly属性,该属性表示该input是只读的,我们可以使用jquery的方法:$('#code').removeAttr("readonly&qu…
原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.disp…
bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar 告诉BS这是一个导航条 navbar-default 标识引入默认的导航条样式 navbar-fixed-top 标识导航条在像下拉取页面的时候始终固定在顶端 Div.container标识导航栏要存放的内容 Div.navbar-header标识导航条的头部 Div.navbar-header>…
大家可能很熟悉在collections模块中有一个很好用的扩展数据类型-namedtuple. 如果你还不知道这个类型,那么请翻看标准手册. 我利用元类轻松定义一个namedtuple. 先把代码贴上,满足心急的朋友. def myNamedTuple(tuple_name, attrs_str): attrs_set = set(attrs_str.split(' ')) def __init__(self, attrs): #我们将来实例初始化的时候需要调用的方法. for key, val…
今晚写点什么呢?对于以前的练习,看来看去,好象还差一个菜单导航条.在练习的站点中,有创建了三个控制器,我们就用它们来创建一个导航条吧.想实现这导航条,刚开始还是有点难,还是想起以前ASP.NET的Menu控件,现在MVC已经没有那控件了.因此还是使用div+ ul + li来实现,不过还得写css style才能看到其效果. 在应用程序下的Content目录下创建一个样式MenuNavigationBar.css: 然后,打开Views/Shared/_Layout.cshtml添加菜单导航条:…
会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. 假如要布局出这样简单导航条效果 比如以下代码: 1.可以使用Ul li布局导航条 <ul> <li><a href="http://www.divcss5.com/">网站首页</a> <li><a href="…
插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服务. 插件不是随手就写成的,而是根据自己业务逻辑进行抽象.没有放之四海而皆准的插件,只有对插件,之所以叫做插件,那么就是开箱即用,或者我们只要添加一些配置参数就可以达到我们需要的结果.如果都符合了这些情况,我们才去考虑做一个插件. 插件封装的条件 一个可复用的插件需要满足以下条件: 插件自身的作用域…
本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function(attr,value){ if(arguments.length==2){//当参数个数为2时,使用设置css的方法 var i=0; for(i=0;i<this.elements.length;i++){ this.elements[i].style[attr]=value; } }else{/…
来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的jQuery Autocomplete插件有确切的功能,我觉得非常有吸引力.你在打字的时候,结果将出现在下拉菜单底部,自动突出显示的词语.本教程简单介绍了通过加载JavaScript数组的内容运行这个插件.从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的,在本教程中,更容易使用本地数据.…
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括面向对象,jquery,绑定,脚本化css等. 一. jquery的美元符意味什么? 先思考alert(typeof $)的结果中的$,它是一个对象,也是一个函数.所以美元符字面上是jQuery,其实就是一个jq对象,里面可以接受函数,字符串(#xxx,.xxx,xxx...),还有一种是对象(比如this)…
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括面向对象,jquery,绑定,脚本化css等. 一. jquery的美元符意味什么? 先思考alert(typeof $)的结果中的$,它是一个对象,也是一个函数. 所以美元符字面上是jQuery,其实就是一个jq对象,里面可以接受函数,字符串(#xxx,.xxx,xxx...),还有一种是对象(比如thi…
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 1 2 3 4 5 6 7 8 9…
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid…
分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="stepBar" class="ui-stepBar-wrap"> <div class="ui-stepBar"> <div class="ui-stepProcess"></div>…
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这…
扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1: function…
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图 一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考   -   TOP 在实际DIV+CSS布局项目中,一般不会只使用一次…