HTML5

jquery mobile + iscroll + iscrollview 开发滚动翻页功能

刚开始项目只是选择了iscroll框架实现滚动翻页，后来和jquery mobile（jqm）框架整合后，界面没法使用在网上搜索了很多资料，各种尝试后还是问题很多。最后在老外的网站上发现了jquery-mobile-iscrollview框架，用于整合jquery mobile和iscroll的一个开源框架，处理了很多jquery mobile和iscroll整合中出现的问题。 1、jquery-mobile-iscrollview下载地址：https://github.com/watusi/jquery-mobile-iscrollview 解压后的\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\source路径下是需要引用的js和css文件 \jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\build路径下是各个jquery mobile版本下的列表和滚动翻页的例子在该路径下，我选择了pull_14.html文件，用chrome打开后，发现下面的导航栏变形，将去掉后，下面的导航栏正常了页面中引用的pull-example.js文件是上拉、下拉事件的处理，只需要将gotPullDownData和gotPullUpData函数修改一下即可实现自己需要加载的数据 2、直接测试该功能没有什么问题，当把该翻页的页面链接到其他页面上时，通过链接打开该页面，下面的导航栏又出现了问题后来发现，这是问题可能是由于jqm的外部页面链接引起的错。jqm在使用外部链接打开另一个页面时，会使用ajax读取需要打开的文件，然后将该文件动态加载到已经打开的页面的后面，jqm只加载文档中取出的第一个页面（第一个带有role=”page”的div），其他内容都将被忽略。后来，将列表页面(b.html)所有加载的css和js的标签放到链接该页面的页面(a.html)的标签中。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" href="../jquery.mobile-1.4.2.min.css" type="text/css"> <link href="../jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" /> <link href="../jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" /> <script src="../jquery.js" type="text/javascript"></script> <script> <span class="katex math inline">(document).bind("mobileinit", function(){ //容许ajax跨域访问</span>.mobile.allowCrossDomainPages = true; }); </script> <script src="../jquery.mobile-1.4.2.min.js" type="text/javascript"></script> <script src="../javascripts/iscroll.js" type="text/javascript"></script> <script src="../javascripts/jquery.mobile.iscrollview.js" type="text/javascript"></script> <script src="../javascripts/pull-example.js" type="text/javascript"></script> ...

js实现倒计时

«/span>html> «/span>head> «/span>title>倒计时</title> <!–以下为css样式–> «/span>style type= “text/css”> .daojishi h2 { font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; ...

折腾：2颗星星+纯CSS实现星星评分交互效果

转自：http://www.zhangxinxu.com/wordpress/?p=3568 一、星星点灯，照亮我的家门大家都喜欢听故事。每篇文章也都是有故事的。今天的故事是与星星相关的。没错，讲的是星星点灯的故事—— 才怪！标题只是我脑子突然蹦出来的，唉，这首老到掉渣子的歌我居然条件反射般想起，可见——我老了！故事其实是这样的~~ 在天气还未如此炎热的某天，@waylybaye微博上展示了其使用canvas绘制星星图片，然后再保存为png格式使用的折腾：很赞，对不对！然，故事刚刚开始，而后我随便吐槽了句： ** 这种效果两个星星就可以完全CSS实现了，包括IE6浏览器，多少多余劳动力浪费了啊~~ 一石激起三层浪：有人对两颗星星实现星星评分效果感兴趣；有人觉得纯CSS搞不定记住之前用户所选星星。实际上，两颗星星（见下图）完全可以实现兼容IE6在内的效果；而且，纯CSS可是可以记住当前星星点击个数哦！哈哈，我们的故事就此展开…… 二、小星星，亮晶晶，点点像你的眼睛正片之前先来个精彩预告，您可以狠狠地点击这里：两颗星星实现的星星点击评分效果demo 哈哈，这回不上截图了，上截视频，更直观，截自Chrome浏览器，纯CSS实现。对了，貌似忘记把《爱情公寓》电视关掉，有杂音，嘻嘻…… iPad党若看不到上视频，可以点击下面区域查看截图： <a style="color: #34538b;">出现吧，图片君！</a> 您可能会惊讶地发现，诶，怎么点击的星星可以记住啊，纯CSS？鑫哥你确定不是在忽悠？我不姓赵哦~ 慢慢来，先看看两个星星如何实现兼容IE6浏览器的hover交互效果。三、一闪一闪亮晶晶满天都是小星星两个星星实现原理见下图: 图1 图2 背景色就是灰色平铺； 5个小标签，分别对应每个星星，宽度1/5，其垂直层次关系见图1示意; 当鼠标经过某星星，例如上图所示第3个，宽度延伸，背景显示，hover效果即呈现；最后，仔细观察其他小星星的层次以及位置，不存在覆盖的情况，于是，hover其他小星星，效果同样存在； over! 以上就是使用两个星星+纯CSS实现hover效果的原理。 5个小星星使用a标签，则可兼容IE6浏览器。 HTML结构如下： ``` <div class="star_bg"> <a class="star star_1"></a> <a class="star star_2"></a> <a class="star star_3"></a> <a class="star star_4"></a> <a class="star star_5"></a> </div> </div> CSS示意如下： <div class="zxx_code"> /* 灰色背景星星5个平铺 / .star_bg { width: 120px; height: 20px; background: url(star.png) repeat-x; position: relative; overflow: hidden; } / 这是5个小星星们的默认状态的定位 */ .star { height: 100%; width: 24px; line-height: 6em; position: absolute; z-index: 3; } .star_1 { left: 0; } .star_2 { left: 24px; } .star_3 { left: 48px; } .star_4 { left: 72px; } .star_5 { left: 96px; } ...

Jquery mobile 新手问题总汇

Jquery Mobile中的自定义对话框 http://dev.jtsage.com/jQM-SimpleDialog/demos2/button.html 设置按钮的点击和划过的效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)"> <html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手写html</title> <script type="text/javascript" src="jquery-1.7.js"></script>  <script type="text/javascript"> <span class="katex math inline">(function(){</span>("#1").mouseenter(function(){<span class="katex math inline">(this).css("background","red");});//鼠标在按钮上,设置red</span>("#1").mousedown(function(){<span class="katex math inline">(this).css("background","yellow");}).mouseup(function(){</span>(this).css("background","black");});//mousedown数遍按下时设置为yellow，mouseup点击后变black }); </script> </head> <body> <input type="button" value="点击" id="1"/> </body> </html> html中运行在移动客户端的浏览器中没有放大和缩小按钮。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> jQuery Mobile Data 属性 http://www.w3cschool.cc/jquerymobile/jquerymobile-ref-data.html 此文章将会持续更新，主要收录一些新手比较常见的问题。欢迎向我推荐比较典型的常见问题，我会记录并整理进文章，方便自己更方便大家。 #### 文章导读： - [1、页面缩放显示问题](http://www.wglong.com/main/artical!details?id=4#q1) - [2、页面跳转后样式丢失js失效](http://www.wglong.com/main/artical!details?id=4#q2) - [3、跳转时重复调用pageinit方法的解决办法](http://www.wglong.com/main/artical!details?id=4#q3) - [4、如何调用loading效果](http://www.wglong.com/main/artical!details?id=4#q4) - [5、动态改变了list的内容，但是内容并没有变化](http://www.wglong.com/main/artical!details?id=4#q5) - [6、把所有内容放到一个页面好,还是分开多页面好](http://www.wglong.com/main/artical!details?id=4#q6) - [7、如何禁掉ajax跳转](http://www.wglong.com/main/artical!details?id=4#q7) - [8、为什么android2.3系统转屏无效果？](http://www.wglong.com/main/artical!details?id=4#q8) - [9、如何去掉jqm自带的组件样式？](http://www.wglong.com/main/artical!details?id=4#q9) - [10、jquery mobile “闪屏” 问题](http://www.wglong.com/main/artical!details?id=4#q10) 2013/4/30 更新内容： - [11、按钮按下/划过的状态感觉反应有些迟缓？](http://www.wglong.com/main/artical!details?id=4#q11) 2013/5/1 更新内容： - [12、jquery mobile各类组件刷新方法](http://www.wglong.com/main/artical!details?id=4#q12) 2013/5/7 更新内容： - [13、在页面动态添加组件，发现css消失了](http://www.wglong.com/main/artical!details?id=4#q13) 2013/5/22 更新内容： - [14、关于checkbox取值问题](http://www.wglong.com/main/artical!details?id=4#q14) 2013/5/28 更新内容： - [15、点击屏幕，header和footer会略微抖动？](http://www.wglong.com/main/artical!details?id=4#q15) 2013/6/20 更新内容： - [16、jqm图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角](http://www.wglong.com/main/artical!details?id=4#q16) - [17、jqm组件显示正常，但是小图标是“空的”，没有正常显示](http://www.wglong.com/main/artical!details?id=4#q17) - [18、$.mobile.changePage方法不能正常跳转](http://www.wglong.com/main/artical!details?id=4#q18) ##### 1页面缩放显示问题 <span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span> 页面似乎被缩小了，屏幕太宽了。 <span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span> 在head标签内加入： <meta name="viewport" content="width=device-width, initial-scale=1">   2 页面跳转后样式丢失js失效 <span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span> 用ajax跳转的时候，从a.html跳转到b.html后，b.html的css以及js都失效了。 <span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span> 将当前页面需要用到的css以及js放在 div内。 ...