html5

页面展示HTML的原代码不解析

星期六, 十一月 7th, 2020 | html5, JAVA-and-J2EE | 没有评论

1.页面需要展示原文本,不需要解析,但是碰到有 html标签的部分需要注意

2.使用如下几种方式

2.1 使用 xmp标签 现在在html5中已经废弃,不建议再使用但是也最简单,无需转化

	<xmp>
		这里的代码将原样输出:
		<script>这里是脚本</script>
	</xmp>

2.2 使用 code 标签或者 pre标签,需要替换尖括号对应的转义符

如下转义即可

	var info= "<script>这里是脚本</script>";
	//替换一个  
	info = info.replace('<', '&lt;').replace('>', '&gt;');
	//全局替换 //g是重点,如果替换的为‘/’,需要转义,吧/</g替换为'/\//g'
	info = info.replace(/</g, '&lt;').replace(/>/g, '&gt;');
	<code>
		这里的代码将原样输出:
		&lt;script&gt;这里是脚本&lt;/script&gt;
	</code>
	<--pre>
		这里的代码将原样输出:
		&lt;script&gt;这里是脚本&lt;/script&gt;
	<--/pre>

2.3 使用 textarea标签

	<textarea>
		这里的代码将原样输出:
		<script>这里是脚本</script>
	</textarea>

Tags:

jQuery/html5 的插件turn.js实现的书本和杂志翻页效果

星期日, 五月 6th, 2012 | html5, pagemaker | 没有评论

看到一个很不错的jquery的插件turn.js,在支持html5的设备上(PC,平板,手机等)实现的像很多电子杂志和电子书的翻页效果

turn.js 支持硬件加速来让翻页效果更加平滑。

可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时 等

更多TURN.JS信息可以去翻阅下列资料:
——————————————————
Github: https://github.com/blasten/turn.js
Reference: https://github.com/blasten/turn.js/wiki/Reference
Website: www.turnjs.com
——————————————————

上贴图:

Tags: , , , ,

jquery moblie 按钮图标那点事

星期四, 四月 12th, 2012 | html5, pagemaker | 一条评论

记忆力不好记不住jqm图标的样子,做此文图文对照,很方便自己知道是什么图如下(系统提供的18个图标):本文参照api摘录版:

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
 
data-icon属性可以被用来创建如下所示的图标
左箭头 	data-icon="arrow-l"
右箭头 	data-icon="arrow-r"
上箭头 	data-icon="arrow-u"
下箭头 	data-icon="arrow-d"
删除   	data-icon="delete"
添加 	data-icon="plus"
减少 	data-icon="minus"
检查 	data-icon="check"
齿轮 	data-icon="gear"
刷新    data-icon="refresh"
前进 	data-icon="forward"
后退 	data-icon="back"
网格 	data-icon="grid"
五角星 	data-icon="star"
警告 	data-icon="alert"
信息 	data-icon="info"
首页 	data-icon="home"
搜索 	data-icon="search"

› Continue reading

Tags: , , , ,

javascript判断变量是否定义(undefined)转换函数

星期四, 四月 12th, 2012 | ajax, html5 | 没有评论

在处理html5的页面取值的时候,发现当取不到的时候报错,js程序不再执行,直接写个修正函数处理
如下:

//修正未定义的变量
function checkUnfined(value){
	if(typeof(value)=='undefined'){
	return "";	
	}
	return value;	
}

话说判断是否未定义也是很常用的东东

Tags: , , ,

jquery mobile动态添加元素之后不能正确渲染解决方法(listview和div html 元素)

星期日, 四月 8th, 2012 | html5, pagemaker | 没有评论

问题就不描述了,ajax处理玩数据对于按钮等操作都没有被渲染,需要调用jqm的css去渲染,方法如下:
一:对于listview: $(‘ul’).listview(‘refresh’);
二:对于div或其他: $(‘allAddContent’).trigger( “create” );

1.
var list = $("<li><a href='//www.pomelolee.com'>Pomelo Lee-"+i+"</a></li>");
  $("#listShow").append(list).find("li:last").hide();
  $('ul').listview('refresh');
html 如下:
<div data-role="content">
        <ul data-role="listview" id="listShow" data-inset="true">
          <li><a href="#">html5</a> </li>
          <li><a href="#">css</a></li>
        </ul>
      </div>
2.
var allAddCon="<a href=\"javascript:goto('i5a6?id="+data.rows[i-1].id+"')\"; data-role='button' data-theme='b'>Pomelo Lee网络</a>";
$("#allAddContent").html(allAddCon).trigger( "create" );;

Tags: , , ,

Search

文章分类

Links

Meta