- 浏览: 123947 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
JavaEEdyc:
http://m.qianka.com/shoutu?u=21 ...
关于anroid设置webview背景方法探讨 -
JavaEEdyc:
http://m.qianka.com/shoutu?u=21 ...
android中的webview 加载html,并可以实现java调用js -
JavaEEdyc:
http://m.qianka.com/shoutu?u=21 ...
android ScrollView 与listView共存冲突问题解决方法(附图) -
zhangyang5023637:
讲的挺明白的。
android中的webview 加载html,并可以实现java调用js -
JavaEEdyc:
android中的webview 加载html,并可以实现ja ...
关于anroid设置webview背景方法探讨
最近的项目中出现类似IOS滚动条的效果。我们知道在html 中本来是有一个overflow的属性是可以设置出现滚动条的。但是在phonegap中就失去了效果!这个解决起来是要很多的东西,但是实现还是很简单的,只需要两个文件及少许的代码。
先是:html .................................................
[color=red]把下面的 包塞到你的js 文件中那个就行了,如果对于搭建环境不熟悉的,我有篇文章也介绍了,希望对你有帮助。
ok,然后直接在Activity中使用super.loadUrl("file:///android_asset/www/haoshiwu.html");就完成了!
详细内容可以查看官网:http://cubiq.org/iscroll-4/comment-page-5#comments。
先是:html .................................................
<!DOCTYPE HTML> <html class="ui_mobile"> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>好食物</title> <link rel="stylesheet" href="css/haoshiwu.css" type="text/css" media="screen" title="no title"> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" src="js/iscroll_jquery_wrapper.js"></script> <script type="text/javascript" src="js/haoshiwu.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventListener('DOMContentLoaded', loaded, false); /* var myScroll; function loaded() { setTimeout(function () { myScroll = new iScroll('wrapper'); }, 100); } window.addEventListener('load', loaded, false); */ </script> </head> <body> <div class="head_div"> <div class = "logo_div"> </div> <div class="sogo_div"> <form action="" name="soso" method="post" > <input class="sogo_div_input" type="text" style="color: rgb(204, 204, 204);" value="搜索你感兴趣的.." name="sosokey"></input> <input id="sbkey" class="sbkey" type="submit" style="cursor:pointer;" value=" " name="sbkey"> </form> </div> </div> <div id="wrapper"> <div class="list_div" id = "scroller"> <div class="sun_list_first" id="liangshiganhuo"> <div class = "link_photo"></div> <div class="link_to_second">粮油干货</div> <div class = "link_count">44件</div> <div class="link_go"></div> </div> <div class="sun_list_middle" id="rouqinzhipin"> <div class = "link_photo"></div> <div class="link_to_second">肉禽制品</div> <div class = "link_count">36件</div> <div class="link_go"></div> </div> <div class="sun_list_middle" id="ruzhipin"> <div class = "link_photo"></div> <div class="link_to_second">乳制品</div> <div class = "link_count">20件</div> <div class="link_go"></div> </div> <div class="sun_list_middle" id="xiuxianshipin"> <div class = "link_photo"></div> <div class="link_to_second">休闲食品</div> <div class = "link_count">31件</div> <div class="link_go"></div> </div> <div class="sun_list_middle" id="zibupin"> <div class = "link_photo"></div> <div class="link_to_second">滋补品</div> <div class = "link_count">19件</div> <div class="link_go"></div> </div> <div class="sun_list_middle" id ="yinliao"> <div class = "link_photo"></div> <div class="link_to_second">饮料</div> <div class = "link_count">39件</div> <div class="link_go"></div> </div> <div class="sun_list_middle" id="jiushuilei"> <div class = "link_photo"></div> <div class="link_to_second">酒水类</div> <div class = "link_count">26件</div> <div class="link_go"></div> </div> <div class="sun_list_middle" id="shengxianshipin"> <div class = "link_photo"></div> <div class="link_to_second">生鲜食品</div> <div class = "link_count">49件</div> <div class="link_go"></div> </div> <div class="sun_list_last" id="yingyouershiping"> <div class = "link_photo"></div> <div class="link_to_second">婴幼儿食品</div> <div class = "link_count">50件</div> <div class="link_go"></div> </div> </div> </div> <div class="menu_div"> <div class="menu1" id="menu1"> <div class="meun1_pic1"></div> <div class="meun1_text1">食品</div> </div> <div class="menu2" id = "menu2"> <div class="meun2_pic1"></div> <div class="meun1_text1">话题</div> </div> <div class="menu2" id = "meun3"> <div class="meun3_pic1"></div> <div class="meun1_text1">厂家</div> </div> <div class="menu2" id = "menu4"> <div class="meun4_pic1"></div> <div class="meun1_text1">咨询</div> </div> </div> </body> </html> [color=red]2.css文件。。。。。。。。。。。。。。。。。。。。。。。。。。。[/color][size=large][/size] /* .ui-mobile, .ui-mobile .ui-page { min-height: 300px; } */ body { background:#ECEEF2 none repeat scroll 0 0; color:#666; font-family:Helvetica; font-size:72%; margin:0; line-height:1.5em; } .head_div{ width:100%; height:60px; line-height: 60px; background:#90A2B8; border-bottom: 2px solid #7E858A; } .logo_div{ background: url("../img/haoshiwu_head-111.png") no-repeat scroll 0 0; float:left; margin-right: 10px; width:120px; margin-top: 0px; } .sogo_div{ float:left; right:20px; height: 52px; line-height: 52px; margin-top: 10px; } .sogo_div_input{ background: url("../img/ry_sosos.png") no-repeat scroll 0 0 transparent; border: medium none; float: left; height: 38px; line-height: 38px; width: 100px; margin-right: 0px; margin: 5px 0 0 15px; padding-left: 5px; } .sbkey{ margin-left:0px; background: url("../img/ry_soso-111.png") no-repeat scroll 0 0 transparent; float: left; padding: 0; width: 50px; border: medium none; height: 38px; line-height: 38px; margin-top: 5px; } #wrapper { height: 333px; /* Of course you need to specify the object height */ position: relative; /* On older OS versions "position" and "z-index" must be defined (absolute | relative), */ z-index: 1; /* it seems that recent webkit is less picky and works anyway. */ width: 100%; background: #ECEEF2; overflow: hidden; margin-bottom: 0px; } #scroller { -webkit-touch-callout:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; /* -webkit-box-shadow:0 0 8px #555; /** Don't use box shadows, they slow down drastically CSS animations */ } .list_div{ background: none no-repeat scroll 0 0 #ffffff; border: 1px solid #000000; border-radius: 10px 10px 10px 10px; float: left; margin: 20px; width: 88%; } .list_div .sun_list_first{ height:65px; border-bottom: 1px solid #C5CCD4; width:100%; } .list_div .sun_list_middle{ height:65px; border-bottom: 1px solid #C5CCD4; border-top:1px solid #C5CCD4; } .list_div .sun_list_last{ height:65px; border-top:1px solid #C5CCD4; } .link_to_second{ height:60px; width:80px; float:left; line-height: 60px; font-size: 16px; font-stretch:narrower; color:#000000; } .link_photo{ background: url("../img/food.png") no-repeat scroll 0 0 transparent; height:50px; width:86px; border: medium none; margin-left:0px; margin-right:10px; margin-top: 5px; border-radius: 6px 6px 6px 6px; float:left; } .link_count{ font-size: 16px; color:#222222; height:60px; width:40px; line-height: 60px; text-align: center; float:left; } .link_go{ background: url("../img/right.png") no-repeat scroll 0 0 transparent; display: block; height: 30px; width:28px; float:left; position:absolute; right:1px; margin-top: 15px; } .menu_div{ bottom:0px; width:100%; height:60px; line-height:60px; float:left; font-size: 16px; text-align: center; background-color: #222222; } .menu_div .menu1{ width:25%; height:60px;line-height:60px; background: #98989C no-repeat scroll 0 0 ; float: left; color: #ffffff; border-radius: 10px 10px 10px 10px; } .meun1_pic1{ height:29px; width:34px; line-height: 29px; margin-top:5px; margin-left:25px; background: url("../img/tb1.png") no-repeat scroll 0 0 transparent; } .meun2_pic1{ height:29px; width:34px; line-height: 29px; margin-top:5px; margin-left:25px; background: url("../img/tb2.png") no-repeat scroll 0 0 transparent; } .meun3_pic1{ height:29px; width:34px; line-height: 29px; margin-top:5px; margin-left:25px; background: url("../img/tb3.png") no-repeat scroll 0 0 transparent; } .meun4_pic1{ height:29px; width:34px; line-height: 29px; margin-top:5px; margin-left:25px; background: url("../img/tb4.png") no-repeat scroll 0 0 transparent; } .meun1_text1{ height:20px; width:34px; line-height: 20px; margin-left:25px; } .menu_div .menu2{ background: #222222 no-repeat scroll 0 0 ; width:25%; height: 60px;line-height:60px; float: left; color: #98989C; border-radius: 10px 10px 10px 10px; } [color=red] 3.随便做点js.................................[/color][size=large][/size] $(document).ready(function(){ /** * 菜单的滑动 */ $(".menu1,.menu2,.menu3,.menu4").hover (function(){ $(".menu1").css("background","#222222"); $(this).css("background","#98989C"); $(this).css("color","#ffffff"); }, function(){ $(this).css("background","#222222"); }); /** * 列表的点击跳转 */ $("#liangshiganhuo").click(function(){ window.location.href="shipin.html"; }); $("#rouqinzhipin").click(function(){ window.location.href="shipin.html"; }); $("#ruzhipin").click(function(){ window.location.href="shipin.html"; }); $("#xiuxianshipin").click(function(){ window.location.href="shipin.html"; }); $("#zibupin").click(function(){ window.location.href="shipin.html"; }); $("#yinliao").click(function(){ window.location.href="shipin.html"; }); $("#jiushuilei").click(function(){ window.location.href="shipin.html"; }); $("#shengxianshipin").click(function(){ window.location.href="shipin.html"; }); $("#yingyouershiping").click(function(){ window.location.href="shipin.html"; }); /** * */ });
[color=red]把下面的 包塞到你的js 文件中那个就行了,如果对于搭建环境不熟悉的,我有篇文章也介绍了,希望对你有帮助。
ok,然后直接在Activity中使用super.loadUrl("file:///android_asset/www/haoshiwu.html");就完成了!
详细内容可以查看官网:http://cubiq.org/iscroll-4/comment-page-5#comments。
- js.rar (68.7 KB)
- 下载次数: 57
发表评论
-
android微信摇一摇功能
2014-12-12 14:22 1512直接看代码 1:配置文件activity_main.xml & ... -
Android 返回键连续点击两次退出应用
2014-12-11 11:06 8722返回键连续点击两次退出应用,一般大家都是使用时间差来实现功能, ... -
android中getX(),getY() 与getRawX(),getRawY()分析
2014-12-09 12:13 3584[b]先看getX(),getY()源码解释 /** ... -
android ScrollView 与listView共存冲突问题解决方法(附图)
2013-05-12 16:18 7921[list] [*] [size=medium] 最近因 ... -
关于anroid设置webview背景方法探讨
2012-11-01 11:33 19617[b]最近的项目中一直关于webView设置背景色问题在研究, ... -
css,img,url
2012-04-26 23:12 1889最近在做html5 android手机客户的开发,一个很简单的 ... -
HTML5和android等开发平台的使用及搭建环境
2012-04-23 00:05 1597对HTML5期待很久了,今天有时间也有机会接触一下了,和以前的 ... -
android webview WebViewClient
2012-04-17 23:33 3404最近两天一直在做一个网页连续测试的例子,循环统计各个页面的从向 ... -
Handler Only the original thread that created a view hierarchy can touch its vi
2012-03-16 18:48 2399错误例子:这里使用的Barprogress 在结束后就会报异常 ... -
android 面试题
2012-03-14 23:07 2151什么是Activity? 请描述一下Activ ... -
android webService
2012-03-14 22:43 1266找到几篇在android中使用webservice的文章,觉得 ... -
SharedPreferences
2012-03-09 12:42 2003今天做了对SharedPreferences做了简单的测试,并 ... -
JSONObject JSONARRAY
2012-03-04 00:38 35341.最近做的一个项目中传递的数据类型是Json格式的,所以在封 ... -
youmi移动广告平台
2012-03-02 21:57 1297前段时间,对智能手机投送广告做了一个简单测试。 其实,对于这些 ... -
android 关于图片的放大,缩小,旋转功能的实现(附源码)
2012-03-02 20:51 5110package funo.com.test; import ... -
android应用UI和用户体验
2012-03-02 20:37 737Android应用UI设计和用户体验的10个要点 随着移动 ... -
android listView
2011-12-03 16:18 691在android开发中ListView是比较常用的组件,它 ...
相关推荐
android 字母滚动条
android实现的垂直滚动条 android实现的垂直滚动条
android下载滚动条,供大家一起共同分享学习。
Android 上下滚动条、轮训滚动、广告条,附带源码及apk
android 水平滚动条-android 水平滚动条
重写ontouchstart ontouchmove 事件.达到锁死滚动条不让滚的目的 直接调用里面的方法就行.有注释
Android的滚动条应用例子,只供参考,可自己在此基础上扩展。
Android scrollview 滚动条
mobile上当页面内容过多时,可使用iscroll.js为页面添加的滚动条。
NULL 博文链接:https://malong26.iteye.com/blog/1586627
自定义recyclerView的滚动条样式,可以定义seekbar的颜色值与大小,设置滚动条离顶部与底部的距离等等
android+滚动Edittextandroid+滚动Edittextandroid+滚动Edittextandroid+滚动Edittextandroid+滚动Edittextandroid+滚动Edittextandroid+滚动Edittextandroid+滚动Edittextandroid+滚动Edittextandroid+滚动Edittext
HTML中滚动条样式。
Android特效——数字滚动条,项目可以直接运行,效果很不错,已亲测
Android 自定义横向滚动条。当你的横向字段或者表格很多时候,显示不下内容,可以使用很想滚动条进行滚动。竖向方面我添加了listview进行添加数据。两者滚动互不干扰。长按listview的item出现checkbox,可以进行多选...
NULL 博文链接:https://axl234.iteye.com/blog/2063619
android 滚动条简单源码,实现滚动条功能,简单易懂。
Android中自定义ProgressDialog实现加载滚动条效果(例如:1.加载中…2.请稍后……等)
android横向滚动列表,ListView横向展示