用jQuery,简单实现Tab菜单切换

    时间:2013-5-4 作者:天空下的雨 分类: 网页技术 浏览:56793

    HTML代码结构

    <div id="sidebar-tab">
    	<div id="tab-title">
    		<h3><span class="selected">选项一</span><span>选项二</span><span>选项三</span></h3>
    	</div>
    	<div id="tab-content">
    		<ul>内容一</ul>
    		<ul class="hide">内容二</ul>
    		<ul class="hide">内容三</ul>
    	</div>
    </div>

    #tab-title是标题,#tab-content是对应的内容(其中三个ul内的代码是WP Kit CN插件调用相应标题内容的)。如果你要显示4个内容,则在标题和内容分别添加一个span和ul即可!

    22

    jQuery控制代码:鼠标滑过切换

    $('#tab-title span').mouseover(function(){
    	$(this).addClass("selected").siblings().removeClass();
    	$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
    });

    稍微陈述下控制代码的运作过程:鼠标移到一个标题(#tab-title span)时,该标题添加被选中(.selected)的效果,其他标题移除被选中的效果;同时,获取标题被选择的序号(.eq()),让内容中对应的子项(#tab-content ul)显示,其余子项隐藏。

     

    jQuery控制代码:鼠标点击切换

    $('#tab-title span').click(function(){
    	$(this).addClass("selected").siblings().removeClass();
    	$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');
    });

    更改为点击标题切换,而且内容显示方式改用slideUp/slideDown,此次是改进jQuery代码,使HTML结构的适用性更强。

    Continue

    Jquery 简单代码实现菜单联动

    时间:2013-3-2 作者:天空下的雨 分类: 网页技术 浏览:24529

    网页代码:

    <div class="nav-list">
      <div class="item">菜单名字1</div>
      <div class="more">下级分类1</div>
      <div class="item">菜单名字2</div>
      <div class="more">下级分类2</div>
      <div class="item">菜单名字3</div>
      <div class="more">下级分类3</div>
    </div>
    JS代码

    $(document).ready(function(){	
    $('.nav-list .more').parent().mouseenter(function(){
    	$(this).removeClass('list_current');
    	$(this).addClass("list_current");
    	$(this).find('.more').show();
    }).mouseleave(function(){
    	$(this).removeClass('list_current');
    	$(this).find('.more').hide();
    });	
    });

     

    还需要加载Jquery,1.3以上版本。CSS代码,自己看代码写写吧,不知道意思,不知道写?自己搜搜百度或谷歌吧

     

    Continue

    解决一个技术问题,关于jquety的文本框实时计算

    时间:2013-1-27 作者:天空下的雨 分类: 网页技术 浏览:20046

    计算多个文本框的数值,比如两个文本框,一个是1,第二个是2,相加后实时显示3。change()事件,发现必须焦点离开才能触发,不满足我的要求,改用keyup()解决问题。下面是精确计算例子:

    	$(function(){
    		var first = $("#first");// 获得ID为first标签的jQuery对象
    		var second = $("#second");// 获得ID为first标签的jQuery对象
    		var sumSP = $("#sumSP");// 获得ID为first标签的jQuery对象
    		first.keyup(function(){
    			var num1 = first.val();// 取得first对象的值
    			var num2 = second.val();// 取得second对象的值
    			var sum = add(num1,num2);
    			sumSP.text(sum);
    		});
    		second.keyup(function(){
    			var num1 = first.val();
    			var num2 = second.val();
    			var sum = add(num1,num2);
    			sumSP.text(sum);
    		});
    	});
    	
    	function add(arg1,arg2){
    		var a1,a2,m;
    		try{
    			a1 = arg1.toString().split(".")[1].length
    		}catch(e){
    			a1 = 0;
    		}
    		try{
    			a2 = arg2.toString().split(".")[1].length
    		}catch(e){
    			a2 = 0;
    		}
    		m = Math.pow(10, Math.max(a1,a2));
    		return (arg1*m+arg2*m)/m;
    	}
    <body>
     <center>
     <form action="">
      第一个数:<input type="text" size="25" id="first" /><br /><br />
      第二个数:<input type="text" size="25" id="second" /><br /><br />
      它们的和:<span id="sumSP" style="color:red" ></span>
     </form>
     </center>
    </body>
    保留小数点两位:Math.round(parseFloat(value) * 100) / 100

    Continue

    使用JS的简单方法实现Rewrite的301域名转向

    时间:2011-12-16 作者:天空下的雨 分类: 网页技术 浏览:12766

    在做网站项目的时候,由于新老域名的问题,需要做301跳转,但发现虚拟主机不支持伪静态(Rewrite)功能,而项目全是php生成html的,动态方法也无法实现。

    于是想到了JS,不管是动态和静态页面都可以完美支持。分享出来,下面是JS代码实现方法:

    <script type="text/javascript">
    /* 跳转JS代码 */
    try 
    { 
    var s_domain = location.host; 
    var js_path = "www.68080.com"; 
    if (s_domain != js_path) 
    { 
    var str=window.location.href;
    var es=/sh96.cn/;
    es.exec(str);
    var right=RegExp.rightContext;
    top.location.href = "http://"+js_path+right; 
    } 
    } 
    catch(e) { } 
    </script>

    代码解释:

    代码中的第6行 www.68080.com 是新的域名地址,第10行 sh96.cn 则是老的域名。

    代码例子:

    当用户访问 http://sh96.cn/a/yinyue.html 的时候,

    自动跳转到 http://www.68080.com/a/yinyue.html 

    Continue

    关于textarea换行显示的简单解决办法

    时间:2011-3-19 作者:天空下的雨 分类: 网页技术 浏览:12123

    网页编程中,有时候我们在textarea中输入:

    abc
    efg
     
    在网页中显示却没有自动对输入值换行,而是这样显示:abc efg。
     
    其实有两种方法可以简单解决:
     
    一种是用网页自有标准标签:<pre></pre>
    <pre> 标签的一个常见应用就是用来表示计算机的源代码,定义预格式化的文本。
    (在网页代码中插入如<pre>数据内容</pre>可直接显示换行)
     
    另外一种就是替换字符串了,替换字符串又可以有2个选择:
     
    1.保存到数据库前就替换,页面上用javascript替换或后台程序替换。
     
    2.要显示的时候才替换, 同样,可以用PHP、ASP或者js替换等函数替换。
     
    天空下的雨:近日,在保存歌词数据的时候用编辑器觉得大材小用,所以查阅了两个方法用以解决,特分享给大家。

    Continue

    15个国外最流行的CSS框架,帮助页面设计更完美

    时间:2010-12-18 作者:天空下的雨 分类: 网页技术 浏览:4021

    CSS框架通常指的是一些CSS文件的集合,这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。虽然对于小的WEB开发项目来说,CSS框架并不一定适用,但是对于规模较大的团队开发项目而言,CSS框架不仅能加快设计开发速度,而且还能有效解决网站改版中带来的诸多麻烦和问题。这里推荐的15款CSS框架是现在国外最流行的CSS框架,希望能对你的开发有所帮助!

    例如:
    typography.css 基本排版规则
    grid.css 基于网格的布局
    layout.css 通常的布局
    form.css for 表单样式
    general.css 更多通用规则

    1 . Elements CSS Frameworks
    Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架,它有自己的项目工作流。它拥有你完成项目所需的所有东西,这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。

    2 . YUI Grids CSS
    YUI Grids基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。 更多信息

    3 . YAML CSS Framework
    Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

    4 . Blueprint CSS
    Blueprint 是一个CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。

    5 . Schema Web Design Framework
    Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同,Schema提供必要的基础来开始并立马让你的设计跑起来。

    6 . CleverCSS
    CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。

    7 . Tripoli CSS Framework
    Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准,Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

    8 . ESWAT Web Project Framework
    ESWAT正在重新整理。如果你是冲着我的网站框架来的,那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

    9 . Boilerplate CSS Framework
    作为BluePrint CSS的原作者之一,我决定把我的思想重新整理到一个赤裸裸的框架,它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

    10 . WYMstyle CSS Framework
    WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

    11 . Content with Style Framework
    Content with Style下一个逻辑步骤就是将这个扩展为CSS框架,允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板。

    12 . Logicss Framework
    Logicss 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”),排版支持文本字体大小调整(使用EMs) 和垂直居中,符合可定义的灵活的布局网格利用css代码生成工具。

    13 . That Standards Guy CSS Framework
    That Standards Guy只能调用单个样式文件,主样式需要取得 CSS认证(WCAG 1.0); 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac; IE Hacks使用独立文件; 快速创建模板;框架中提供 少量注释/实例演示,可以节省时间来理解。

    14 . 960 Grid System
    960 Grid System是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。

    15 . Emastic CSS Framework
    Emastic 是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化,在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

    Continue

    DIV在100%下iframe宽度高度的自适应的问题

    时间:2010-11-1 作者:天空下的雨 分类: 网页技术 浏览:9951

    很多时候在做B/S后台系统的时候,一般管理页左边为管理菜单,右边为操作页面,为了维护方便通常会使用iframe来展示操作管理页面,显然用固定的宽度和高度并不能满足要求,经常我们需要让页面自动适应用户分辨率,提高用户体验。下面是可以自适应代码,网页表头声明为xhtml1-transitional.dtd才能支持。

    <iframe scrolling="auto" name="main" src="aaa.html"  frameborder="0" height="100%" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>556?fdh:556)" width="100%"></iframe>

    随后发现这段代码在DIV的宽度为100%时(<div id="MarRight" class="MarR">iframe 框架</div>),IE6、火狐等浏览器iframe并没有自适应DIV的宽度和高度,而是显示不全或出现滚动条的情况。

    解决办法如下:

    <script type="text/javascript">
    window.onload=function(){
      var a=document.body.clientWidth-182;  //取得iframe框架的实际宽度
      // alert(a);  //弹出数值测试
      document.getElementById("MarRight").style.width=a+"px";
    }
    </script>


    天空下的雨:绿色标示部分根据需要修改,通过上面的代码,就可以在其他浏览器中iframe的自适应宽度和高度了。

    Continue

    使用if IE控制语句解决浏览器兼容问题

    时间:2009-11-20 作者:天空下的雨 分类: 网页技术 浏览:2371

    在网页的布局中,通常会遇到各浏览器解析网页的核心不同,而导致页面错乱的问题。

    下面就列举了一些用if控制语句解决的方法。

    <!--[if !IE]>除IE外都可识别<![endif]-->
    <!--[if IE]> 所有的IE可识别 <![endif]-->

    <!--[if IE 6]> 仅IE6可识别 <![endif]-->
    <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
    <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

    <!--[if IE 7]> 仅IE7可识别 <![endif]-->
    <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
    <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

    Continue

    网站点击链接提示&quot;正在处理请稍后...&quot;提高用户体验

    时间:2009-10-13 作者:天空下的雨 分类: 网页技术 浏览:4608

    天空下的雨:有时候网页上内容较多打开会慢,这时候我们可以使用简单的方法,让用户点击按钮时,弹出一个“正在处理请稍等...”的信息,加强用户的页面体验。下面点击效果图和实例代码给大家参考:

    updata

    下面是CSS样式,先把DIV层隐藏起来:

    <style type="text/css">
    .updateing{background:#dd1058;border:1px solid #dd1058;position:absolute;top:92px;z-index:1;color:#fff;font-size:12px;padding:3px 5px;width:112px;display:none;}
    </style>


    当鼠标点击链接目标,执行下面的JS代码,意思是把先前隐藏起来的DIV显示出来

    <script type="text/javascript">
    function updateing()
    {
     document.getElementById('updateing').style.display='block';
    }
    </script>


    下面就是在Body内容中的div布局

    <div id="updateing" class="updateing" style="position:absolute;top:180px;">正在更新请稍后...</div>

    <a  onclick="updateing();" href="/abc.htm" >最新上传</a>  /*需要点击的链接*/

    这样就基本上完成效果了,通过这样的方法,我们还可以用在其他的地方,如表单的提交等等,大家可以去试试。

    刚看到有些朋友把我的文章转到自己的博客或空间,作者却改成自己的,这样很不好。
    本博客大部分内容都属于[天空下的雨]原创,请需要转载的朋友注明出处,并加上链接。谢谢!

    Continue
第 1 页   共 3 页 1 2 3