月份: 2016-08

一个jquery写的 导航条,横线跟随

一个jquery写的 导航条,横线跟随

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一个jquery写的 导航条,横线跟随</title>
<script src="http://cdn.bootcss.com/jquery/1.8.2/jquery.js"></script>
<script>
$(function() {
	/* ------------- mainNavA ------------- */
	$('.mainNavA').each(function() {
	var $box = $(this);
	var $li = $box.find('li');
	$hover_line = $('<div class="hover_line"></div>').appendTo($box);
	$li.on('mouseenter',function() {
	$(this).addClass('hover').siblings().removeClass('hover');
	var w = $(this).outerWidth();
	var left = $(this).position().left;
	$hover_line.stop().animate( {
	width:w,left:left
}
,200 );}).on('click',function() {
	$(this).addClass('active').siblings().removeClass('active');
}
);
	$box.mouseleave(function() {
	var $nav_active = $box.find('li.active');
	if($nav_active.length) {
	$nav_active.addClass('hover').siblings().removeClass('hover');
	var w = $nav_active.outerWidth();
	var left = $nav_active.position().left;
	$hover_line.stop().animate( {
	width:w,left:left
}
,200 );}console.log('mouseleave');}).mouseleave();});
	/* ------------- mainNavA end ------------- */})
</script>
<style>
a {
	text-decoration:none;
}
ul,li {
	margin:0px;
	padding:0px;
	list-style:none;
}
/*---------------------  .mainNavA --------------------------------*/
.mainNavA {
	position:relative;
	padding:0px 20px;
	height:70px;
	line-height:70px;
	border-bottom:1px solid #e1e4e8;
	background:#ffffff;
}
.mainNavA li {
	float:left;
	padding:0px 10px;
	font-size:14px;
	color:#444444;
	margin-right:20px;
}
.mainNavA a {
	color:#444444;
}
.mainNavA .hover a,.mainNavA a:hover {
	color:#309ff4;
	text-shadow:1px 1px 1px #acd9fb;
	text-decoration:none;
}
.mainNavA .active.hover a {
	font-weight:bold;
}
.mainNavA .hover_line {
	height:2px;
	overflow:hidden;
	background:#309ff4;
	position:absolute;
	bottom:-1px;
}
/*---------------------  .mainNavA end --------------------------------*/
</style>
</head>

<body>
<!--html-->
	<div class="mainNavA">
           <ul>
            	<li><a href="#">栏目</a></li>
                <li><a href="#">栏目标</a></li>
                <li><a href="#">栏目标题</a></li>
                <li  class="active"><a href="#">栏目标题栏</a></li>
                <li><a href="#">栏目标题栏目标题栏目标题</a></li>
            </ul>
            <!--<div class="hover_line">jquery 会帮我生存的</div>-->
        </div>
<!--\html-->

</body>
</html>

完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

HTML5的新标签元素有:

<header>定义页面或区段的头部;
<footer>定义页面或区段的尾部;
<nav>定义页面或区段的导航区域;
<section>页面的逻辑区域或内容组合;
<article>定义正文或一篇完整的内容;
<aside>定义补充或相关内容;


使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。

方式一:Coding JavaScript

<!--[if lt IE9]>
<script>
   (function() {
     if (!
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     }
})()
</script>
<![endif]-->

如果是IE9以下的IE浏览器将创建HTML5标签, 这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。

 

第二种方法:使用Google的html5shiv包(推荐)

<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

对于国内无法使用 googlecode.com 可以使用其他的cdn

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>

但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的”白板”网页,我们该怎么解决呢?

我们可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

<!--[if lte IE 8]>
<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
     </div>
</noscript>
<![endif]-->

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

IE的@cc_on条件编译

IE的@cc_on条件编译
用来判断浏览器的版本很好用 var b = /*@cc_on!@*/false;
其中/*@cc_on ….. @*/之间的部分可以被ie识别并作为程序执行,同时启用ie的条件编译。 最常用的变量是@_jscript_version:js版本,最后一位是ie主版本号
例如:

<script>
   var sSuffix = ( /*@cc_on!@*/false ) ? 'ie' : '非iE浏览器' ;
    /*@cc_on alert("显示浏览器版本号:"+@_jscript_version) @*/
    alert("浏览器版本为"+sSuffix)
</script>

用于

PHP Ctype函数

Ctype函数是PHP内置的字符串体测函数。主要有以下几种

ctype_alnum — Check for alphanumeric character(s)
检测是否是只包含[A-Za-z0-9]

ctype_alpha — Check for alphabetic character(s)
检测是否是只包含[A-Za-z]

ctype_cntrl — Check for control character(s)
检查是否是只包含类是“\n\r\t”之类的字 符控制字符

ctype_digit — Check for numeric character(s)
检查时候是只包含数字字符的字符串(0-9)

ctype_graph — Check for any printable character(s) except space
检查是否是只包含有可以打印出来的字符(除了空格)的字符串

ctype_lower — Check for lowercase character(s)
检查是否所有的字符都是英文字母,并且都是小写的

ctype_print — Check for printable character(s)
检查是否是只包含有可以打印出来的字符的字符串

ctype_punct– Check for any printable character which is not whitespace or an alphanumeric character
检查是否是只包含非数字/字符/空格的可打印出来的字符

ctype_space– Check for whitespace character(s)
检查是否是只包含类是“ ”之类的字符和空格

ctype_upper– Check for uppercase character(s)
检查是否所有的字符都是英文字母,并且都是大写的

ctype_xdigit — Check for character(s) representing a hexadecimal digit
检查是否是16进制的字符串,只能包括 “0123456789abcdef”

KindEditor:Ajax提交表单时获取不到HTML内容

当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了

原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢?

—————————————————

KindEditor 4.x documentation:获取HTML数据

// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById(‘editor_id’).value; // 原生API
html = K(‘#editor_id’).val(); // KindEditor Node API
html = $(‘#editor_id’).val(); // jQuery

// 设置HTML内容
editor.html(‘HTML内容’);

—————————————————-

从这可看出,当Ajax提交表单时,textarea的value还是空的,需要使用sync()去同步HTML数据

那么在什么时候去同步,怎么同步?KindEditor同时提供了方法:

afterBlur

编辑器失去焦点(blur)时执行的回调函数。

数据类型: Function
默认值: 无

最后答案和解决办法:

    <script type="text/javascript">
        KindEditor.ready(function (K) {
            window.editor = K.create('#AContent', {
                afterBlur: function () { this.sync(); }
            });
        });
    </script>