JavaEEdyc
- 浏览: 126591 次
- 性别:
- 来自: 福州
-
文章分类
最新评论
-
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 1624直接看代码 1：配置文件activity_main.xml & ... -
Android 返回键连续点击两次退出应用
2014-12-11 11:06 8772返回键连续点击两次退出应用，一般大家都是使用时间差来实现功能， ... -
android中getX(),getY() 与getRawX(),getRawY()分析
2014-12-09 12:13 3698[b]先看getX(),getY()源码解释 /** ... -
android ScrollView 与listView共存冲突问题解决方法（附图）
2013-05-12 16:18 8033[list] [*] [size=medium] 最近因 ... -
关于anroid设置webview背景方法探讨
2012-11-01 11:33 19765[b]最近的项目中一直关于webView设置背景色问题在研究， ... -
css,img,url
2012-04-26 23:12 1960最近在做html5 android手机客户的开发，一个很简单的 ... -
HTML5和android等开发平台的使用及搭建环境
2012-04-23 00:05 1649对HTML5期待很久了，今天有时间也有机会接触一下了，和以前的 ... -
android webview WebViewClient
2012-04-17 23:33 3458最近两天一直在做一个网页连续测试的例子，循环统计各个页面的从向 ... -
Handler Only the original thread that created a view hierarchy can touch its vi
2012-03-16 18:48 2455错误例子：这里使用的Barprogress 在结束后就会报异常 ... -
android 面试题
2012-03-14 23:07 2199什么是Activity? 请描述一下Activ ... -
android webService
2012-03-14 22:43 1315找到几篇在android中使用webservice的文章，觉得 ... -
SharedPreferences
2012-03-09 12:42 2046今天做了对SharedPreferences做了简单的测试，并 ... -
JSONObject JSONARRAY
2012-03-04 00:38 35751.最近做的一个项目中传递的数据类型是Json格式的，所以在封 ... -
youmi移动广告平台
2012-03-02 21:57 1389前段时间，对智能手机投送广告做了一个简单测试。 其实，对于这些 ... -
android 关于图片的放大，缩小，旋转功能的实现（附源码）
2012-03-02 20:51 5199package funo.com.test; import ... -
android应用UI和用户体验
2012-03-02 20:37 794Android应用UI设计和用户体验的10个要点 随着移动 ... -
android listView
2011-12-03 16:18 752在android开发中ListView是比较常用的组件，它 ...
相关推荐
2. **滚动条优化**：自研的QMScroll实现了CSS3滚动效果的优化，不仅提升了性能，还改善了用户体验。 3. **Canvas动画优化**：利用Canvas结合CSS3动画，既减少了网络流量，又保持了动画的高质量和稳定性。 4. **硬件...
1.2 搭建Android开发环境 5 1.2.1 下载和安装Android SDK 5 1.2.2 安装Eclipse和ADT插件 7 1.3 Android常用开发工具的用法 10 1.3.1 创建、删除和浏览AVD 10 1.3.2 使用Android模拟器 （Emulator） 14...
同时，还包括滚动条的使用、菜单的定义、忙碌指示符的显示、过渡效果的实现等。 3. **应用程序设计与工作流**：设计阶段涉及到对应用程序持久化机制的启用，以及如何支持多个屏幕大小和不同的DPI值。这一点对于保证...
6. **兼容性测试**：确保模板在主流的移动浏览器（如Chrome、Safari、Firefox等）上都能正常工作，同时兼容不同的操作系统（如Android、iOS）。 7. **互动元素**：考虑到移动设备的特点，可以加入滑动、滚动、触摸...
- **控件使用**：覆盖了滚动条、导航控件、标题控件和操作控件的应用场景。 - **菜单设计**：指导如何设计和实现移动应用中的菜单系统。 - **过渡效果与忙碌指示符**：介绍了添加过渡动画和显示忙碌指示符的方法。 ...
Sencha Touch 是一款专为构建跨平台移动Web应用的开发框架，由Sencha公司开发，旨在利用HTML5和CSS3标准提升移动设备上的浏览器体验，尤其是对于Apple iOS和Android设备的兼容性。这个框架基于Ext JS，一个知名的富...
- **滚动条与菜单**：滚动条对于长内容页面至关重要；菜单则提供了一个组织功能的结构化方式。 - **过渡效果与忙碌指示器**：过渡效果增加了应用的流畅度；忙碌指示器则告知用户正在进行耗时操作。 #### 5. 应用...
AmazeUI的核心组件包括布局、表单、按钮、图标、下拉菜单、弹出层、滚动条等，这些都经过精心设计和优化，确保在各种设备上都能提供一致的体验。框架提供的CSS和JS经过gzip压缩后，大小控制在100kB左右，大大减少了...
- **Genymotion：** Genymotion 是一款第三方 Android 模拟器，相较于官方提供的模拟器（AVD），Genymotion 在性能上更加优秀，支持多种设备类型及系统版本，非常适合测试和调试应用。 **4. 版本控制** - **Git...
在压缩包内的"Calendar"文件中，我们可以期待找到与日历和时间选择相关的源代码文件，可能包括HTML/CSS/JS文件（如果是Web应用），或者Swift/Objective-C（iOS）、Java/Kotlin（Android）的源代码。这些文件将包含...
- **滚动条使用**：为内容较多的区域提供滚动功能。 - **菜单设计**：创建顶部菜单栏或底部菜单。 - **加载指示器**：显示加载动画提升用户体验。 ##### 4.2 设计与工作流程 - **支持多种屏幕尺寸**：通过CSS样式表...
JavaScript插件则是Bootstrap的动态功能核心，例如模态框（modal）、下拉菜单（dropdown）、滚动条（scrollspy）、轮播（carousel）等。这些插件基于jQuery库，因此在使用时需要引入jQuery。jQuery是一个轻量级、高...