jquery仿手机屏幕触摸切换界面效果
下载资源()次
阅读次数()次
发布时间：
用法简介：
jquery仿手机屏幕触摸切换界面效果。文件引用：&script&type=&text/javascript&&src=&js/jquery-1.9.1.min.js&&&/script&
&script&type=&text/javascript&&src=&js/jquery.promptu-menu.js&&&/script&
&script&type=&text/javascript&&
$(function(){
$('ul.promptu-menu01').promptumenu({
width:272,&&&//自定义滚屏宽度
height:385,&//自定义滚屏搞定
rows:3,&&&&&//自定义滚屏排列行数
columns:2,&&//自定义滚屏单行图标个数
direction:'horizontal',&//水平拖动效果
pages:false&&//是否分页显示
$('ul.promptu-menu02').promptumenu({
width:272,&&&//自定义滚屏宽度
height:385,&//自定义滚屏搞定
rows:4,&&&&&//自定义滚屏排列行数
columns:2,&&//自定义滚屏单行图标个数
direction:'vertical',&//水平拖动效果
pages:true&//是否分页显示
$('ul.promptu-menu03').promptumenu({
width:500,&&&//自定义滚屏宽度
height:500,&//自定义滚屏搞定
rows:3,&&&&&//自定义滚屏排列行数
columns:4,&&//自定义滚屏单行图标个数
direction:'horizontal',&//水平拖动效果
pages:true&&//是否分页显示
$('ul.promptu-menu04').promptumenu({
width:500,&&&//自定义滚屏宽度
height:500,&//自定义滚屏搞定
rows:3,&&&&&//自定义滚屏排列行数
columns:4,&&//自定义滚屏单行图标个数
direction:'vertical',&//水平拖动效果
pages:false&&//是否分页显示
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。android使用Tab效果滑动 - 简书
android使用Tab效果滑动
android使用Tab效果滑动
使用SlidingTabLayout
这是android L最新的使用tab的效果，Google Play的应用
教程：，挺详细的教程
通过这篇：，可以知道
样式：直接在xml上的SlidingTabLayout上改，他是继承HorizontalScrollView的，可以通过background来设置颜色
加入custom_tab.xml的时候，是代表tab使用图标
改tab中的字体颜色，参考这里：
改下划线的颜色：
第一种方式：
slidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_text_color));
第二种方式
slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer(){
public int getIndicatorColor(int position) {
return Color.WHITE;
想改Tab点击的效果，发现slidingTabLayout的createDefaultTabView方法，是根据设定的Theme来进行改变的。
如何使用在Fragment中的静态方法newInstance传递数据呢
思路：通过Bundle进行传递，在oncreate方法中使用getArguments()方法得到，另一种方式是通过fragment.title的方式来改变成员变量的值
final String BG_PAGE="BgManagerFragment";
final String FRAGMENT_TITLE="tilte";
private int mP
public BgManagerFragment() {
// Required empty public constructor
public static BgManagerFragment newInstance(String title,int page){
Bundle args = new Bundle();
args.putInt(BG_PAGE, page);
args.putString(FRAGMENT_TITLE, title);
BgManagerFragment fragment = new BgManagerFragment();
fragment.setArguments(args);
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage=getArguments().getInt(BG_PAGE);//在newInstance方法中通过Bundle进行传递值
title=getArguments().getString(FRAGMENT_TITLE);
另一种，只列出newInstance()方法
public static BgManagerFragment newInstance(String title,int page){
BgManagerFragment fragment = new BgManagerFragment();
fragment.title=
fragment.mPage=
如何让不同的fragment加载不同数据，进行不同的显示。通过别人的案例，可以知道需要对adapter和Fragment进行修改
添加图标到tab
private int[] imageResId = {
R.drawable.ic_one,
R.drawable.ic_two,
R.drawable.ic_three
public CharSequence getPageTitle(int position) {
// Generate title based on item position
// return tabTitles[position];
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
但是由于SlidingTabLayout自带的TextView会调用 setAllCaps(true)，会取消所有的 ImageSpan 的效果。所以需要自定义TabView。
在 tab.setViewPager(pager) 之前调用 tab.setCustomTabView(R.layout.custom_tab,0) 设置自定义TabView。
tab.setCustomTabView(R.layout.custom_tab,0);
tab.setViewPager(pager);
如果要每个TabView都平分屏幕宽度，只需在自定义的TextView 上加上权重属性即可;
android:layout_weight="1"
通过以上方式，是实现了显示图标，但是selector的效果完全没有了，那么如何解决？
参考：的答案5.
和这个，只有三个赞成的答案，得到启发。
第一种解决方式：
按照stackoverflow来，就可以解决了
第一步：修改适配器FragmentPagerAdapter
public class ClubMemberManagerAdapter extends FragmentPagerAdapter {
private int[] imageResId = {R.drawable.tab_select_home,R.drawable.tab_select_act,R.drawable.tab_select_data};
//添加一个获取资源的方法
public int getDrawableId(int position){
//Here is only example for getting tab drawables
return imageResId[position];
//下面这个方法，是为了不让字体消失出来
public CharSequence getPageTitle(int position) {
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
那么相应的加载SlidingTabLayout的Activity/fragment就不需要这句
//slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);
修改SlidingTabLayout的populateTabStrip()方法
private void populateTabStrip() {
//强制转换成ClubMemberManagerAdapter，为了得到ClubMemberManagerAdapter下的得到资源的方法：getDrawableId
final ClubMemberManagerAdapter adapter = (ClubMemberManagerAdapter)mViewPager.getAdapter();
final OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i & adapter.getCount(); i++) {
View tabView =
TextView tabTitleView =
if (mTabViewLayoutId != 0) {
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
if (tabView == null) {
//默认是生成TextView
tabView = createDefaultTabView(getContext());
if (tabImageView == null && TextView.class.isInstance(tabView)) {
//这里依然是TextView.class.的判断父系
tabImageView = (ImageView) tabV
if (mDistributeEvenly) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
lp.width = 0;
lp.weight = 1;
tabTitleView.setCompoundDrawablesWithIntrinsicBounds(0,adapter.getDrawableId(i), 0, 0);
//上面这句是TexView加载资源的方式，参数为（左，上，右，下）
tabTitleView.setText(adapter.getPageTitle(i));
tabTitleView.setTextColor(Color.WHITE);
tabView.setOnClickListener(tabClickListener);
String desc = mContentDescriptions.get(i, null);
if (desc != null) {
tabView.setContentDescription(desc);
mTabStrip.addView(tabView);
if (i == mViewPager.getCurrentItem()) {
tabView.setSelected(true);
通过上面的配置会发现，图标的selector效果有了，但是毕竟是TextView,虽然没有字体，但还是会继续占位置，效果依然不理想。所以...
第二种解决方式：直接将TextView改成ImageView便可以。
第一步：同理，依然需要资源
public class ClubMemberManagerAdapter extends FragmentPagerAdapter {
public int getDrawableId(int position){
//Here is only example for getting tab drawables
return imageResId[position];//图标资源
public CharSequence getPageTitle(int position) {
return tabTitles[position];//使用imageview,这个只是一个摆设而已
第二步，依然是修改SlidingTabLayout的方法populateTabStrip
private void populateTabStrip() {
//强制转换成ClubMemberManagerAdapter，为了得到ClubMemberManagerAdapter下的得到资源的方法：getDrawableId
final ClubMemberManagerAdapter adapter = (ClubMemberManagerAdapter)mViewPager.getAdapter();
final OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i & adapter.getCount(); i++) {
View tabView =
ImageView tabImageView =
if (mTabViewLayoutId != 0) {
// If there is a custom tab view layout id set, try and inflate it
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
tabImageView = (ImageView) tabView.findViewById(mTabViewTextViewId);
if (tabView == null) {
//改成ImageView生成方式
tabView = createImageViewTabView(getContext());
if (tabImageView == null && ImageView.class.isInstance(tabView)) {
//这里是ImageView.class.的判断父系，因为改成ImageView的生成方式
tabImageView = (ImageView) tabV
if (mDistributeEvenly) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
lp.width = 0;
lp.weight = 1;
//加载图标资源
tabImageView.setImageResource(adapter.getDrawableId(i));
tabView.setOnClickListener(tabClickListener);
String desc = mContentDescriptions.get(i, null);
if (desc != null) {
tabView.setContentDescription(desc);
mTabStrip.addView(tabView);
if (i == mViewPager.getCurrentItem()) {
tabView.setSelected(true);
第三步，就是方法createImageViewTabView是怎么实现的呢
protected ImageView createImageViewTabView(Context context){
ImageView imageView = new ImageView(context);
imageView.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
TypedValue outValue = new TypedValue();
getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
outValue, true);//使用系统的主题
imageView.setBackgroundResource(outValue.resourceId);
int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
imageView.setPadding(padding, padding, padding, padding);
return imageV
改成这种imageview后，感觉已经将SlidingTabLayout改成了自能加载ImageView的类了。
用另一种的实现
Fragment上使用Tab
我的github：/trity1993
butterknife http://jakewharton.github.io/butterknife/ Annotate fields with @BindView and a view ID for Butter Knife to find and automatic...
github网址 为了使我们的代码更加整洁，一致，我们应该遵守这些规则 Project Guidelines1.1 Project Structure src/androidTestsrc/testsrc/commonTestsrc/main androidTest 包含功...
全文 如何用一周时间开发一款Android APP并在Google Play上线的合集 - 下 如何用一周时间开发一款Android APP并在Google Play上线 - Day 1 如何用一周时间开发一款Android APP并在Google Play上线 - Day...
通常在ViewPager的上方，我们都会放一个标签指示器与ViewPager进行联动。以前，我们大多使用的是GitHub上的开源框架PagerSlidingTabTrip，具体的可以参见/astuetz/PagerSlidingTabSt...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
TextView---图文混编 在IM软件中经常需要发送表情的图片，这个emoji表情为了方便处理，方便在数据库、网络传输中保存、传输带有表情图片的文本，需要为每种表情取特定的“名字”，数据库中储存的、网络传输的文本就只包含这些标志名字就行，在显示的时候做对应的替换。 基础...
【日本】高畑勋 著 插图比较小，乍看之下，或许会觉得是幅纯粹的抽象画。不过，你立刻就会注意到，画面右下方有一匹沐浴着阳光的可爱小鹿。在它上方，是一只正扭头张望的蓝紫色大鹿的脸，而这两只鹿的视线，都投向左下方另一只也扭着身子的红鹿。蓝色的大鹿，脊背与蜷卧的前腿构成了一个三角，...
今天看了李叫兽文案的相关部分，系统讲了怎样挖掘用户内心的需求，打动用户。 主要有三个方面： 一、调用认知 自检问题：用户看到我的文案，会在大脑中自动调用什么知识、印象？他调用的这种知识和印象，是我想要的吗？ 人类接触到一个信息时，首先会从大脑里已有的记忆，匹配适合的场景，如...
港真，权利的游戏哪天可以改版成网络游戏也许很好玩。
工作中，我们需要学习外语、学软件、学演讲。 生活中，我们需要学习烹饪、学乐器、学健身。 由于处在现时代，竞争压力非常大，快速掌握一项技能显得非常重要，而我们往往难以开始，或则经常半途而废。 阻碍我们学习的因素有很多： ? 没有时间学习? 没有老师指导? 对复杂的技能心存畏惧...&&&&&&&&&&&&自定义实现类似android主界面的滑屏换屏控件
正在努力加载播放器，请稍等…
正在努力加载播放器
大小：128.52KB&&所需金币：50
&& & 金币不足怎么办?
下载量：-次 浏览量：248次
贡献时间： 14:32:50
文档标签：
已有-位用户参与评分
同类热门文档
你可能喜欢
看过这篇文档的还看过
阅读:253&&下载:18
阅读:268&&下载:1
阅读:381&&下载:0
阅读:353&&下载:0
阅读:473&&下载:0
阅读:241&&下载:0
阅读:1116&&下载:0
阅读:295&&下载:0
阅读:809&&下载:0
阅读:675&&下载:0
该用户的其他文档
所需财富值：
50文件大小：128.52KB
您当前剩余财富值：&&
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
举报该文档侵犯版权。
例: /help.shtml请 登录 后使用快捷导航没有帐号？
1跳转至页
版本amigo2.0
在线0 小时
主题帖子积分
LV1 似曾相识, 积分 5, 距离下一级还需 5 积分
在线0 小时
签到1 次心情签到都雷 ...
不知道动了那里，将主菜单横屏滑动该成竖屏滑动了，用不习惯想改过来。
来自金立 S6
耀·金属时代
amigo有你更精彩！
版本amigo2.0
在线0 小时
主题帖子积分
LV3 一见如故, 积分 504, 距离下一级还需 496 积分
在线0 小时
签到45 次心情哎呀妈呀 ...
楼主为什么要改横向滑呢？纵向滑习惯了还不是一样的呢！
来自金立 S6
耀·金属时代
版本amigo2.0
在线0 小时
主题帖子积分
LV1 似曾相识, 积分 5, 距离下一级还需 5 积分
在线0 小时
签到1 次心情签到都雷 ...
竖屏用不习惯啊，所以才要改。看样子你是不知道怎么改吧？
来自金立 S6
耀·金属时代
版本amigo2.0
在线0 小时
主题帖子积分
LV1 似曾相识, 积分 5, 距离下一级还需 5 积分
在线0 小时
签到1 次心情签到都雷 ...
冰雪美 发表于
楼主为什么要改横向滑呢？纵向滑习惯了还不是一样的呢！
就没人知道怎么改成横屏吗?
来自金立 S6
耀·金属时代
版本amigo2.0
在线0 小时
主题帖子积分
LV3 一见如故, 积分 504, 距离下一级还需 496 积分
在线0 小时
签到45 次心情哎呀妈呀 ...
泰戈洋洋 发表于
冰雪美 发表于
楼主为什么要改横向滑呢？纵向滑习惯了还不是一样的呢！
楼主你设计一个嘛，你的思维太丰富多彩了！
来自金立 S6
耀·金属时代
版本amigo2.0
在线0 小时
主题帖子积分
LV1 似曾相识, 积分 6, 距离下一级还需 4 积分
在线0 小时
签到4 次心情哎呀妈呀 ...
Screenshot_-19-12-48.png (87.78 KB, 下载次数: 7)
19:13 上传
来自金立 S6
耀·金属时代
版本amigo2.0
在线0 小时
主题帖子积分
LV1 似曾相识, 积分 6, 距离下一级还需 4 积分
在线0 小时
签到4 次心情哎呀妈呀 ...
Screenshot_-19-12-48.png (87.78 KB, 下载次数: 12)
19:14 上传
来自金立 S6
耀·金属时代
版本amigo2.0
在线0 小时
主题帖子积分
LV1 似曾相识, 积分 9, 距离下一级还需 1 积分
在线0 小时
签到1 次心情哥签的不 ...
这个页面怎么进&&怎么都找不到呢
来自amigo社区手机版
版本amigo2.0
在线8 小时
主题帖子积分
LV2 萍水相逢, 积分 66, 距离下一级还需 34 积分
在线8 小时
签到1 次心情今日求财 ...
aron 发表于
这个页面怎么进&&怎么都找不到呢
桌面设置&&就可以了！
来自amigo社区手机版
版本amigo2.0
在线3 小时
主题帖子积分
LV2 萍水相逢, 积分 179, 距离下一级还需 -79 积分
在线3 小时
签到16 次心情笑笑十年 ...
fggbhbbb 发表于
aron 发表于
这个页面怎么进&&怎么都找不到呢
我也没有？？
Screenshot_-15-20-17.png (0 Bytes, 下载次数: 9)
15:21 上传
来自amigo社区手机版
1跳转至页
一级签到勋章
amigoOS社区一级签到勋章，签到一次即可获得
三级签到勋章
amigoOS社区三级签到勋章，由二级签到勋章进化而来，签到经验值≥150
友情链接：