Home Explore Help
Register Sign In
bulomakaka
/
ekexiu.app
Watch 2
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Commits 630 Releases 0 Wiki
Browse Source

新版搜索以及论文浏览

luyanan 7 years ago
parent
57f4991e3f
commit
d5a6f6faf5
14 changed files with 1164 additions and 15 deletions
Split View Show Diff Stats
  1. 25 6
      app/css/app.css
  2. 143 0
      app/html/paperShow.html
  3. 1 3
      app/html/rewards-list01.html
  4. 1 3
      app/html/rewards-list02.html
  5. 1 3
      app/html/searchListNew.html
  6. 234 0
      app/html/searchListNew2.html
  7. BIN
      app/images/default-artical.jpg
  8. BIN
      app/images/default-icon.jpg
  9. BIN
      app/images/default-paper.jpg
  10. BIN
      app/images/default-patent.jpg
  11. BIN
      app/images/default-photo.jpg
  12. BIN
      app/images/default-resource.jpg
  13. 407 0
      app/js/public/mui.pullToRefresh.js
  14. 352 0
      app/js/public/mui.pullToRefresh.material.js

+ 25 - 6
app/css/app.css
View File 

@ -624,15 +624,16 @@ footer.chatFooter .mui-icon-paperplane {font-size: 16px;word-break: keep-all;lin
624 624
625 625 
/***********************缺省页面*******************/
626 626 
.nodatabox{width:100%;height: 100%;padding:50px 10px; margin:auto;text-align: center;}
627 
.nodatabox .picbox{margin:20px auto;}
627 
.nodatabox .picbox{margin:8px auto;display:inline-block;width:140px;height:140px;background-position: center;background-repeat: no-repeat;background-size:cover;}
628 
.nodatabox .picbox.picNull{background-image:url(../images/points_icon_ku_nor@3x.png);}
629 
.nodatabox .txtbox { margin:6px auto;}
630 
.nodatabox .noContip{font-size:18px;color:#BBBBBB;line-height:40px;}
628 631 
.nodatabox .picbox .defpic{display:block;margin:auto;width:160px; height: 160px;background: url(../images/nodata.png) -6px 0 no-repeat;}
629 632 
.nodatabox .picbox .defpic.consult-pic{background-position: -232px -1320px;}/*咨询页面未登录*/
630 633
631 
.nodatabox .txtbox { margin:20px 0 10px 0;}
632 634 
.nodatabox .txtbox .currword{font-size: 14px;color: #999999;line-height: 14px;}
633 635 
.nodatabox .txtbox .currtip{ font-size:13px;color: #AAAAAA;}
634 636 
.nodatabox .txtbox .keyword{ padding:0 6px;}
635 
.nodatabox .txtbox .noContip{color:#BBBBBB;font-size:14px;line-height:26px;}
636 637 
/***********************缺省页面*******************/
637 638
638 639 
/***********************科袖用户协议*******************/

@ -929,17 +930,28 @@ footer.chatFooter .mui-icon-paperplane {font-size: 16px;word-break: keep-all;lin
929 930 
.fixboxNew .fixbtnNew li{ list-style: none; float: left;height:40px;line-height:40px; padding:0 10px;border-top:1px solid #F0F0F0; border-bottom:2px solid #F0F0F0;text-align: center;font-size: 14px;}
930 931 
.fixboxNew .fixbtnNew li.liactive{ color: #FF9900; border-bottom:3px solid #FF9900;}
931 932
933 
.searchTab .mui-pull-bottom-tips {text-align: center;font-size: 12px;line-height: 40px;color: #999;}
934 
.searchTab .mui-slider-indicator.mui-segmented-control{background: #fff;height: 40px;}
935 
.searchTab .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#ff9900;border-bottom: 2px solid #ff9900;}
936 
.searchTab .mui-fullscreen .mui-segmented-control~.mui-slider-group{top:50px;}
937 
.searchTab .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: none;}
938 
.searchTab .mui-slider .mui-slider-group .mui-slider-item img{width: auto;}
932 939 
.searchTab .h1Font{font-size:16px;color:#333;}
933 940 
.searchTab .madiaTit{position:relative;font-size:16px;color:#666;padding-left:10px;margin-top:15px;}
934 941 
.searchTab .madiaTit:before{display:inline-block;content:"";width:4px;height: 16px;position:absolute;top:1px;left:0;background: #ff9900;}
935 
.searchTab .madiaHead{position:absolute;border:1px solid #E5E5E5;top:50%;background-position: center;background-size: cover;}
942 
.searchTab .madiaHead{width:90px;height:60px;margin-top:-30px;position:absolute;border:1px solid #E5E5E5;top:50%;background-position: center;background-size: cover;}
936 943 
.searchTab .madiaHead.useHead{width: 50px;height:50px;margin-top:-25px;background-image: url(../images/default-photo.jpg);border-radius: 50%;}
937 
.searchTab .madiaHead.resouseHead{width:90px;height:60px;margin-top:-30px;background-image: url(../images/default-resource.jpg);border-radius:0;}
938 
.searchTab .madiaHead.artHead{width:90px;height:60px;margin-top:-30px;background-image: url(../images/default-artical.jpg);border-radius:0;}
944 
.searchTab .madiaHead.resouseHead{background-image: url(../images/default-resource.jpg);}
945 
.searchTab .madiaHead.artHead{background-image: url(../images/default-artical.jpg);}
946 
.searchTab .madiaHead.paperHead{background-image: url(../images/default-paper.jpg);}
947 
.searchTab .madiaHead.patentHead{background-image: url(../images/default-patent.jpg);}
948 
.searchTab .madiaHead.companyHead{background:#fff;}
949 
.searchTab .madiaHead.companyHead .boxBlock{width: 90px;height:60px;}
939 950 
.searchTab .madiaInfo{padding-left:62px; width: 100%;}
940 951 
.searchTab .madiaInfo .authicon{position:relative;bottom:-2px;}
941 952 
.searchTab .madiaInfo.OmadiaInfo{padding-left: 102px;}
942 953
954
943 955 
/*筛选条件*/
944 956 
.filterListNew{ padding:14px 14px 8px;}
945 957 
.filterUl{height: 86px;padding:0;margin:14px 0 0;margin-right: -2%; overflow: hidden;}

@ -1100,4 +1112,11 @@ ul.tagList>li .h2Font{color: #666; -webkit-user-select:text;}
1100 1112 
.shareBlock .mui-table-view-cell{float: left;width: 33.33%;text-align: center;cursor:pointer;}
1101 1113 
.shareBlock .mui-btn{cursor:pointer;margin: 0;border: none;border-radius:0;color:#333;margin-top:15px;border-top:1px solid #E5E5E5;}
1102 1114 
.shareBlock .mui-btn:active{background: none;color:#333;border:none;border-top:1px solid #E5E5E5;}
1115 
/*--------------新功能论文和专利相关--------------*/
1116 
.showMainP{margin-top: 20px;}
1117 
.showMainP li{overflow: hidden;}
1118 
.showMainP .showTit{padding-left: 0;color: #666;}
1119 
.showMainP .showTit:before{content: none;}
1120 
.showMainP .showCon{color: #333;}
1121
1103 1122

+ 143 - 0
app/html/paperShow.html
View File 

@ -0,0 +1,143 @@
1 
<!DOCTYPE html>
2 
<html>
3
4 
	<head>
5 
		<meta charset="UTF-8">
6 
		<title>论文浏览-科袖</title>
7 
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
8 
		<link href="../css/mui.min.css" rel="stylesheet" />
9 
		<link href="../css/previewImage.css" rel="stylesheet" type="text/css" />
10 
		<link href="../css/iconfont.css" rel="stylesheet" />
11 
		<link href="../css/app.css" rel="stylesheet" />
12 
		<style>
13 
			html,body{height: 100%;margin:0;padding:0px;overflow: hidden;background: #FFFFFF;}
14 
			.mui-content{height:100%;overflow: auto;background: #FFFFFF;}
15 
		</style>
16 
	</head>
17
18 
	<body>
19 
		<div class="maskBlack" id="maskBlack"></div>
20 
		<header class="mui-bar mui-bar-nav toptitbox">
21 
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
22 
			<h1 class="mui-title toptit" id="resourceTit"></h1>
23 
			<a class="mui-icon iconfont icon-moreandroid mui-pull-right button topmore" id="BtnMore"></a>
24 
		</header>
25 
		<nav class="mui-bar mui-bar-tab footbox">
26 
			<div class="mui-row artfoot">
27 
				<div class="mui-col-xs-9">
28 
					<div class="consultdiv">更多功能即将开放</div>
29 
				</div>
30 
				<div class="mui-col-xs-2" id="collectBtn">
31 
					<span class="mui-icon iconfontnew icon-shoucang" id="ifCollect"></span><!--已收藏 icon-yishoucang-->
32 
				</div>
33 
				<div class="mui-col-xs-1" id="shareOut">
34 
					<span class="mui-icon iconfontnew icon-fenxiang"></span>
35 
				</div>
36 
			</div>
37 
		</nav>
38 
		<div class="mui-content">
39 
		    <div class="showDetail">
40 
	    		<div class="h1Font hWeight" id="resourceName">论文名称</div>
41 
		    	<!--内容区-->
42 
				<div class="showMain showMainP">
43 
					<ul>
44 
						<li>
45 
							<div class="showTit">期刊：<span class="showCon" id="paperJournal">gfsdddddddddg</span></div>
46 
						</li>
47 
						<li>
48 
							<div class="showTit">期卷：<span class="showCon" id="paperVolume">cvxbdger</span></div>
49 
						</li>
50 
						<li>
51 
							<div class="showTit">摘要：</div>
52 
							<div class="showCon" id="paperAbstract">
53 
								梵蒂冈沙发革热台个人塌方人生观是大法官梵蒂冈沙发革热台个人塌方人生观是大法官梵蒂冈沙发革热台个人塌方人生观是大法官
54 
							</div>
55 
						</li>
56 
					</ul>
57 
				</div>
58 
	    		<!--标签模块-->
59 
				<ul class="tagList">
60 
					<li>
61 
						<span class="h2Font">标签一</span>
62 
					</li>
63 
				</ul>
64 
				<div class="madiaBlock">
65 
					<div class="madiaTit">作者</div>
66 
					<ul class="mui-table-view">
67 
				        <li class="mui-table-view-cell">
68 
				            <div class="flexCenter mui-clearfix">
69 
				                <div class="madiaHead useHead"></div>
70 
								<div class="madiaInfo">
71 
									<p><span class="h1Font">张某某</span><em class="authicon authicon-pro" title="科袖认证专家"></em></p>
72 
									<p class="mui-ellipsis h2Font">职称/职位,所在机构</p>
73 
								</div>
74 
				            </div>
75 
				        </li>
76 
				        <li class="mui-table-view-cell">
77 
				            <div class="flexCenter mui-clearfix">
78 
				                <div class="madiaHead useHead"></div>
79 
								<div class="madiaInfo">
80 
									<p><span class="h1Font">张某某</span><em class="authicon authicon-pro" title="科袖认证专家"></em></p>
81 
									<p class="mui-ellipsis h2Font">职称/职位,所在机构</p>
82 
								</div>
83 
				            </div>
84 
				        </li>
85 
				    </ul>
86 
				</div>
87 
		    </div>
88 
		</div>
89
90 
		<div class="shareBlock" id="shareBlock">
91 
			<h2 class="shareTit"><span>分享到</span></h2>
92 
			<ul class="mui-table-view noactiveTab">
93 
				<li class="mui-table-view-cell">
94 
					<em class="wayicon wechaticon"></em>
95 
					<span>微信好友</span>
96 
				</li>
97 
				<li class="mui-table-view-cell">
98 
					<em class="wayicon friendstericon"></em>
99 
					<span>微信朋友圈</span>
100 
				</li>
101 
				<li class="mui-table-view-cell">
102 
					<em class="wayicon sinaicon"></em>
103 
					<span>新浪微博</span>
104 
				</li>
105 
			</ul>
106 
			<button type="button" class="mui-btn mui-btn-block" id="cancelShare">取消</button>
107 
		</div>
108 
		<script src="../js/public/mui.min.js"></script>
109 
		<script src="../js/public/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
110 
		<script src="../js/public/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
111 
		<script src="../js/public/base.js"></script>
112 
		<script src="../js/resourceShow.js"></script>
113 
		<script type="text/javascript">
114 
			//处理iOS下弹出软键盘后头部会随页面的滚动条消失问题
115 
		    iosheader();
116
117 
		    var BtnMore=document.getElementById("BtnMore");
118 
		    var shareOut=document.getElementById("shareOut");
119 
		    var cancelShare=document.getElementById("cancelShare");
120 
		    var maskBlack=document.getElementById("maskBlack");
121 
		    var shareBlock=document.getElementById("shareBlock");
122
123
124 
		    BtnMore.addEventListener("tap",function(){
125 
		    	maskBlack.style.display="block";
126 
		    	shareBlock.style.display="block";
127 
		    })
128 
		    shareOut.addEventListener("tap",function(){
129 
		    	maskBlack.style.display="block";
130 
		    	shareBlock.style.display="block";
131 
		    })
132 
		    cancelShare.addEventListener("tap",function(){
133 
		    	maskBlack.style.display="none";
134 
		    	shareBlock.style.display="none";
135 
		    })
136 
		    maskBlack.addEventListener("tap",function(){
137 
		    	this.style.display="none";
138 
		    	shareBlock.style.display="none";
139 
		    })
140 
		</script>
141 
	</body>
142
143 
</html>

+ 1 - 3
app/html/rewards-list01.html
View File 

@ -35,9 +35,7 @@
35 35 
						<!--无获得积分-->
36 36 
						<div class="nodatabox displayNone" id="noset">
37 37 
					        <div class="nodata">
38 
					            <div class="picbox">
39 
					            	<img src="../images/points_icon_ku_nor@3x.png" width="28%" />
40 
					            </div>
38 
					            <div class="picbox picNull"></div>
41 39 
					            <div class="txtbox">
42 40 
					            	<p class="noContip">您还没有有获得积分<br />快去邀请好友获得积分吧！</p>
43 41 
					            </div>

+ 1 - 3
app/html/rewards-list02.html
View File 

@ -36,9 +36,7 @@
36 36 
						<!--无奖励积分-->
37 37 
						<div class="nodatabox displayNone" id="nojl">
38 38 
					        <div class="nodata">
39 
					            <div class="picbox">
40 
					            	<img src="../images/points_icon_ku_nor@3x.png" width="28%" />
41 
					            </div>
39 
					            <div class="picbox picNull"></div>
42 40 
					            <div class="txtbox">
43 41 
					            	<p class="noContip">您还没有奖励积分<br />快去邀请好友获得奖励积分吧！</p>
44 42 
					            </div>

+ 1 - 3
app/html/searchListNew.html
View File 

@ -46,9 +46,7 @@
46 46 
							<!--无搜索结果-->
47 47 
							<div class="nodatabox displayNone" id="noSearch">
48 48 
						        <div class="nodata">
49 
						            <div class="picbox">
50 
						            	<img src="../images/points_icon_ku_nor@3x.png" width="28%" />
51 
						            </div>
49 
						            <div class="picbox picNull"></div>
52 50 
						            <div class="txtbox">
53 51 
						            	<p class="noContip">暂时没有符合该搜索条件的内容</p>
54 52 
						            </div>

+ 234 - 0
app/html/searchListNew2.html
View File 

@ -0,0 +1,234 @@
1 
<!DOCTYPE html>
2 
<html>
3
4 
<head>
5 
	<meta charset="utf-8">
6 
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 
	<title>搜索列表</title>
8 
	<link href="../css/mui.min.css" rel="stylesheet" />
9 
	<link href="../css/app.css" rel="stylesheet" />
10 
	<link href="../css/iconfont.css" rel="stylesheet" />
11 
	<style type="text/css">
12 
		html,body{height: 100%;margin:0;padding:0px;overflow: hidden;}
13 
		.mui-content{height:100%;overflow: auto;}
14 
	</style>
15 
</head>
16
17 
<body>
18 
	<!-- 主页面标题 -->
19 
	<header class="mui-bar mui-bar-nav toptitbox">
20 
		<a class="mui-action-back mui-icon mui-icon-left-nav topback leftnav"></a>
21 
		<div class="searchboxNew searchboxNewT" id="searB">
22 
			<form onsubmit="return false;">
23 
				<input type="search" class="mui-input-clear searchtxtNew" placeholder="请输入专家姓名、机构、研究方向" id="searchval" />
24 
			</form>
25 
			<!--默认：搜索专家、资源、文章
26 
			找专家：请输入专家姓名、机构、研究方向
27 
			找资源：请输入资源名称、用途、机构
28 
			找文章：请输入文章标题、作者-->
29 
		</div>
30 
		<div class="rightnav filtered" id="sele"><!--选择筛选条件之后添加 filtered-->
31 
			<a class="mui-icon iconfont icon-filter"><span class="mui-badge">3</span></a><br />筛选
32 
		</div>
33 
	</header>
34 
	<div class="mui-content maincontent searchTab">
35 
		<div id="slider" class="mui-slider mui-fullscreen">
36 
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
37 
				<div class="mui-scroll">
38 
					<a class="mui-control-item mui-active" href="#item1mobile">找专家</a>
39 
					<a class="mui-control-item" href="#item2mobile">找企业</a>
40 
					<a class="mui-control-item" href="#item3mobile">找资源</a>
41 
					<a class="mui-control-item" href="#item4mobile">找专利</a>
42 
					<a class="mui-control-item" href="#item5mobile">找论文</a>
43 
					<a class="mui-control-item" href="#item6mobile">找文章</a>
44 
				</div>
45 
			</div>
46 
			<div class="mui-slider-group">
47 
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
48 
					<div id="scroll1" class="mui-scroll-wrapper">
49 
						<div class="mui-scroll">
50 
							<ul class="mui-table-view">
51 
								<li class="mui-table-view-cell">
52 
						            <div class="flexCenter mui-clearfix">
53 
						                <div class="madiaHead useHead"></div>
54 
										<div class="madiaInfo">
55 
											<p><span class="h1Font">张某某</span><em class="authicon authicon-pro" title="科袖认证专家"></em></p>
56 
											<p class="mui-ellipsis h2Font">职称/职位，所在机构</p>
57 
											<p class="mui-ellipsis h2Font">研究方向：研究方向研究方向研究方向研究方向研究方向研究方向</p>
58 
										</div>
59 
						            </div>
60 
						        </li>
61 
						        <li class="mui-table-view-cell">
62 
						            <div class="flexCenter mui-clearfix">
63 
						                <div class="madiaHead useHead"></div>
64 
										<div class="madiaInfo">
65 
											<p><span class="h1Font">张某某</span><em class="authicon authicon-pro" title="科袖认证专家"></em></p>
66 
											<p class="mui-ellipsis h2Font">职称/职位，所在机构</p>
67 
											<p class="mui-ellipsis h2Font">研究方向：研究方向研究方向研究方向研究方向研究方向研究方向</p>
68 
										</div>
69 
						            </div>
70 
						        </li>
71 
							</ul>
72 
							<!--无搜索结果-->
73 
							<div class="nodatabox displayNone">
74 
						        <div class="nodata">
75 
						            <div class="picbox picNull"></div>
76 
						            <div class="txtbox">
77 
						            	<p class="noContip">暂时没有符合该搜索条件的内容</p>
78 
						            </div>
79 
						        </div>
80 
						    </div>
81 
						</div>
82 
					</div>
83 
				</div>
84 
				<div id="item2mobile" class="mui-slider-item mui-control-content">
85 
					<div class="mui-scroll-wrapper">
86 
						<div class="mui-scroll">
87 
							<ul class="mui-table-view">
88 
								<li class="mui-table-view-cell">
89 
						            <div class="flexCenter OflexCenter mui-clearfix">
90 
						                <div class="madiaHead companyHead">
91 
						                	<div class="boxBlock"><img class="boxBlockimg companyImg" src="../images/default-icon.jpg"></div>
92 
						                </div>
93 
										<div class="madiaInfo OmadiaInfo">
94 
											<p class="mui-ellipsis h1Font">企业名称<em class="authicon authicon-com-ok" title="科袖认证企业"></em></p>
95 
											<p class="mui-ellipsis h2Font"><span id="">企业类型</span> <span id="">所属行业 | 所属行业</span></p>
96 
										</div>
97 
						            </div>
98 
						        </li>
99 
							</ul>
100 
							<!--无搜索结果-->
101 
							<div class="nodatabox displayNone">
102 
						        <div class="nodata">
103 
						            <div class="picbox picNull"></div>
104 
						            <div class="txtbox">
105 
						            	<p class="noContip">暂时没有符合该搜索条件的内容</p>
106 
						            </div>
107 
						        </div>
108 
						    </div>
109 
						</div>
110 
					</div>
111 
				</div>
112 
				<div id="item3mobile" class="mui-slider-item mui-control-content">
113 
					<div class="mui-scroll-wrapper">
114 
						<div class="mui-scroll">
115 
							<ul class="mui-table-view">
116 
								<li class="mui-table-view-cell">
117 
						            <div class="flexCenter OflexCenter mui-clearfix">
118 
						                <div class="madiaHead resouseHead"></div>
119 
										<div class="madiaInfo OmadiaInfo">
120 
											<p class="mui-ellipsis h1Font">资源名称资源名称资源名称资源名称</p>
121 
											<p class="mui-ellipsis h2Font">用途：资源用途资源用途资源用途资源用途资源用途</p>
122 
											<p><span class="h2Font">张某某</span><em class="authicon authicon-pro" title="科袖认证专家"></em></p>
123 
										</div>
124 
						            </div>
125 
						        </li>
126 
							</ul>
127 
						</div>
128 
					</div>
129 
				</div>
130 
				<div id="item4mobile" class="mui-slider-item mui-control-content">
131 
					<div class="mui-scroll-wrapper">
132 
						<div class="mui-scroll">
133 
							<ul class="mui-table-view">
134 
								<li class="mui-table-view-cell">
135 
						            <div class="flexCenter OflexCenter mui-clearfix">
136 
						                <div class="madiaHead patentHead"></div>
137 
										<div class="madiaInfo OmadiaInfo">
138 
											<p class="mui-ellipsis h1Font">专利名称</p>
139 
											<p class="mui-ellipsis h2Font">发明人：发明人一，发明人一，发明人一，发明人一，发明人一</p>
140 
										</div>
141 
						            </div>
142 
						        </li>
143 
							</ul>
144 
						</div>
145 
					</div>
146 
				</div>
147 
				<div id="item5mobile" class="mui-slider-item mui-control-content">
148 
					<div class="mui-scroll-wrapper">
149 
						<div class="mui-scroll">
150 
							<ul class="mui-table-view">
151 
								<li class="mui-table-view-cell">
152 
						            <div class="flexCenter OflexCenter mui-clearfix">
153 
						                <div class="madiaHead paperHead"></div>
154 
										<div class="madiaInfo OmadiaInfo">
155 
											<p class="mui-ellipsis h1Font">论文题目</p>
156 
											<p class="mui-ellipsis h2Font">作者：作者一，作者一，作者一，作者一，作者一，作者一</p>
157 
										</div>
158 
						            </div>
159 
						        </li>
160 
							</ul>
161 
						</div>
162 
					</div>
163 
				</div>
164 
				<div id="item6mobile" class="mui-slider-item mui-control-content">
165 
					<div class="mui-scroll-wrapper">
166 
						<div class="mui-scroll">
167 
							<ul class="mui-table-view">
168 
								<li class="mui-table-view-cell">
169 
						            <div class="flexCenter OflexCenter mui-clearfix">
170 
						                <div class="madiaHead artHead"></div>
171 
										<div class="madiaInfo OmadiaInfo">
172 
											<p class="mui-ellipsis-2 h1Font">文章名称章名称文章名称</p>
173 
											<p><span class="h2Font">张某某</span><em class="authicon authicon-pro" title="科袖认证专家"></em></p>
174 
										</div>
175 
						            </div>
176 
						        </li>
177 
							</ul>
178 
						</div>
179 
					</div>
180 
				</div>
181 
			</div>
182 
		</div>
183 
	</div>
184 
	<script src="../js/public/mui.min.js"></script>
185 
	<script src="../js/public/mui.pullToRefresh.js"></script>
186 
	<script src="../js/public/mui.pullToRefresh.material.js"></script>
187 
	<script src="../js/public/base.js"></script>
188 
	<!--<script src="../js/searchListNew.js"></script>-->
189 
	<script type="text/javascript">
190 
		//处理iOS下弹出软键盘后头部会随页面的滚动条消失问题
191 
	    iosheader();
192 
	    var anos=ifiosAmdandroid();
193
194 
	    (function($) {
195 
	    	//阻尼系数
196 
			var deceleration = mui.os.ios?0.003:0.0009;
197 
			$('.mui-scroll-wrapper').scroll({
198 
				bounce: false,
199 
				indicators: true, //是否显示滚动条
200 
				deceleration:deceleration
201 
			});
202 
			$.ready(function() {
203 
				//循环初始化所有下拉刷新，上拉加载。
204 
				$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
205 
					$(pullRefreshEl).pullToRefresh({
206 
						down: {
207 
							callback: function() {
208 
								var self = this;
209 
								setTimeout(function() {
210 
									var ul = self.element.querySelector('.mui-table-view');
211 
									ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
212 
									self.endPullDownToRefresh();
213 
								}, 1000);
214 
							}
215 
						},
216 
						up: {
217 
							callback: function() {
218 
								var self = this;
219 
								setTimeout(function() {
220 
									var ul = self.element.querySelector('.mui-table-view');
221 
									ul.appendChild(createFragment(ul, index, 5));
222 
									self.endPullUpToRefresh();
223 
								}, 1000);
224 
							}
225 
						}
226 
					});
227 
				});
228 
			});
229 
		})(mui);
230
231
232 
	</script>
233 
</body>
234 
</html>

BIN
app/images/default-artical.jpg
View File


BIN
app/images/default-icon.jpg
View File


BIN
app/images/default-paper.jpg
View File


BIN
app/images/default-patent.jpg
View File


BIN
app/images/default-photo.jpg
View File


BIN
app/images/default-resource.jpg
View File


+ 407 - 0
app/js/public/mui.pullToRefresh.js
View File 

@ -0,0 +1,407 @@
1 
(function($, window, document) {
2 
	var STATE_BEFORECHANGEOFFSET = 'beforeChangeOffset';
3 
	var STATE_AFTERCHANGEOFFSET = 'afterChangeOffset';
4
5 
	var EVENT_PULLSTART = 'pullstart';
6 
	var EVENT_PULLING = 'pulling';
7 
	var EVENT_BEFORECHANGEOFFSET = STATE_BEFORECHANGEOFFSET;
8 
	var EVENT_AFTERCHANGEOFFSET = STATE_AFTERCHANGEOFFSET;
9 
	var EVENT_DRAGENDAFTERCHANGEOFFSET = 'dragEndAfterChangeOffset';
10
11 
	var CLASS_TRANSITIONING = $.className('transitioning');
12 
	var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
13 
	var CLASS_PULL_BOTTOM_TIPS = $.className('pull-bottom-tips');
14 
	var CLASS_PULL_LOADING = $.className('pull-loading');
15 
	var CLASS_SCROLL = $.className('scroll');
16
17 
	var CLASS_PULL_TOP_ARROW = $.className('pull-loading') + ' ' + $.className('icon') + ' ' + $.className('icon-pulldown');
18 
	var CLASS_PULL_TOP_ARROW_REVERSE = CLASS_PULL_TOP_ARROW + ' ' + $.className('reverse');
19 
	var CLASS_PULL_TOP_SPINNER = $.className('pull-loading') + ' ' + $.className('spinner');
20 
	var CLASS_HIDDEN = $.className('hidden');
21
22 
	var SELECTOR_PULL_LOADING = '.' + CLASS_PULL_LOADING;
23 
	$.PullToRefresh = $.Class.extend({
24 
		init: function(element, options) {
25 
			this.element = element;
26 
			this.options = $.extend(true, {
27 
				down: {
28 
					height: 75,
29 
					callback: false,
30 
				},
31 
				up: {
32 
					auto: false,
33 
					offset: 100, //距离底部高度(到达该高度即触发)
34 
					show: true,
35 
					contentinit: '上拉显示更多',
36 
					contentdown: '上拉显示更多',
37 
					contentrefresh: '正在加载...',
38 
					contentnomore: '没有更多数据了',
39 
					callback: false
40 
				},
41 
				preventDefaultException: {
42 
					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
43 
				}
44 
			}, options);
45 
			this.stopped = this.isNeedRefresh = this.isDragging = false;
46 
			this.state = STATE_BEFORECHANGEOFFSET;
47 
			this.isInScroll = this.element.classList.contains(CLASS_SCROLL);
48 
			this.initPullUpTips();
49
50 
			this.initEvent();
51 
		},
52 
		_preventDefaultException: function(el, exceptions) {
53 
			for (var i in exceptions) {
54 
				if (exceptions[i].test(el[i])) {
55 
					return true;
56 
				}
57 
			}
58 
			return false;
59 
		},
60 
		initEvent: function() {
61 
			if ($.isFunction(this.options.down.callback)) {
62 
				this.element.addEventListener($.EVENT_START, this);
63 
				this.element.addEventListener('drag', this);
64 
				this.element.addEventListener('dragend', this);
65 
			}
66 
			if (this.pullUpTips) {
67 
				this.element.addEventListener('dragup', this);
68 
				if (this.isInScroll) {
69 
					this.element.addEventListener('scrollbottom', this);
70 
				} else {
71 
					window.addEventListener('scroll', this);
72 
				}
73 
			}
74 
		},
75 
		handleEvent: function(e) {
76 
			switch (e.type) {
77 
				case $.EVENT_START:
78 
					this.isInScroll && this._canPullDown() && e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
79 
					break;
80 
				case 'drag':
81 
					this._drag(e);
82 
					break;
83 
				case 'dragend':
84 
					this._dragend(e);
85 
					break;
86 
				case 'webkitTransitionEnd':
87 
					this._transitionEnd(e);
88 
					break;
89 
				case 'dragup':
90 
				case 'scroll':
91 
					this._dragup(e);
92 
					break;
93 
				case 'scrollbottom':
94 
					if (e.target === this.element) {
95 
						this.pullUpLoading(e);
96 
					}
97 
					break;
98 
			}
99 
		},
100 
		initPullDownTips: function() {
101 
			var self = this;
102 
			if ($.isFunction(self.options.down.callback)) {
103 
				self.pullDownTips = (function() {
104 
					var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
105 
					if (element) {
106 
						element.parentNode.removeChild(element);
107 
					}
108 
					if (!element) {
109 
						element = document.createElement('div');
110 
						element.classList.add(CLASS_PULL_TOP_TIPS);
111 
						element.innerHTML = '<div class="mui-pull-top-wrapper"><span class="mui-pull-loading mui-icon mui-icon-pulldown"></span></div>';
112 
						element.addEventListener('webkitTransitionEnd', self);
113 
					}
114 
					self.pullDownTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
115 
					document.body.appendChild(element);
116 
					return element;
117 
				}());
118 
			}
119 
		},
120 
		initPullUpTips: function() {
121 
			var self = this;
122 
			if ($.isFunction(self.options.up.callback)) {
123 
				self.pullUpTips = (function() {
124 
					var element = self.element.querySelector('.' + CLASS_PULL_BOTTOM_TIPS);
125 
					if (!element) {
126 
						element = document.createElement('div');
127 
						element.classList.add(CLASS_PULL_BOTTOM_TIPS);
128 
						if (!self.options.up.show) {
129 
							element.classList.add(CLASS_HIDDEN);
130 
						}
131 
						element.innerHTML = '<div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">' + self.options.up.contentinit + '</span></div>';
132 
						self.element.appendChild(element);
133 
					}
134 
					self.pullUpTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
135 
					return element;
136 
				}());
137 
			}
138 
		},
139 
		_transitionEnd: function(e) {
140 
			if (e.target === this.pullDownTips && this.removing) {
141 
				this.removePullDownTips();
142 
			}
143 
		},
144 
		_dragup: function(e) {
145 
			var self = this;
146 
			if (self.loading) {
147 
				return;
148 
			}
149 
			if (e && e.detail && $.gestures.session.drag) {
150 
				self.isDraggingUp = true;
151 
			} else {
152 
				if (!self.isDraggingUp) { //scroll event
153 
					return;
154 
				}
155 
			}
156 
			if (!self.isDragging) {
157 
				if (self._canPullUp()) {
158 
					self.pullUpLoading(e);
159 
				}
160 
			}
161 
		},
162 
		_canPullUp: function() {
163 
			if (this.removing) {
164 
				return false;
165 
			}
166 
			if (this.isInScroll) {
167 
				var scrollId = this.element.parentNode.getAttribute('data-scroll');
168 
				if (scrollId) {
169 
					var scrollApi = $.data[scrollId];
170 
					return scrollApi.y === scrollApi.maxScrollY;
171 
				}
172 
			}
173 
			return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;
174 
		},
175 
		_canPullDown: function() {
176 
			if (this.removing) {
177 
				return false;
178 
			}
179 
			if (this.isInScroll) {
180 
				var scrollId = this.element.parentNode.getAttribute('data-scroll');
181 
				if (scrollId) {
182 
					var scrollApi = $.data[scrollId];
183 
					return scrollApi.y === 0;
184 
				}
185 
			}
186 
			return document.body.scrollTop === 0;
187 
		},
188 
		_drag: function(e) {
189 
			if (this.loading || this.stopped) {
190 
				e.stopPropagation();
191 
				e.detail.gesture.preventDefault();
192 
				return;
193 
			}
194 
			var detail = e.detail;
195 
			if (!this.isDragging) {
196 
				if (detail.direction === 'down' && this._canPullDown()) {
197 
					if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {
198 
						e.stopPropagation();
199 
						e.detail.gesture.preventDefault();
200 
						return;
201 
					}
202 
					this.isDragging = true;
203 
					this.removing = false;
204 
					this.startDeltaY = detail.deltaY;
205 
					$.gestures.session.lockDirection = true; //锁定方向
206 
					$.gestures.session.startDirection = detail.direction;
207 
					this._pullStart(this.startDeltaY);
208 
				}
209 
			}
210 
			if (this.isDragging) {
211 
				e.stopPropagation();
212 
				e.detail.gesture.preventDefault();
213 
				var deltaY = detail.deltaY - this.startDeltaY;
214 
				deltaY = Math.min(deltaY, 1.5 * this.options.down.height);
215 
				this.deltaY = deltaY;
216 
				this._pulling(deltaY);
217 
				var state = deltaY > this.options.down.height ? STATE_AFTERCHANGEOFFSET : STATE_BEFORECHANGEOFFSET;
218 
				if (this.state !== state) {
219 
					this.state = state;
220 
					if (this.state === STATE_AFTERCHANGEOFFSET) {
221 
						this.removing = false;
222 
						this.isNeedRefresh = true;
223 
					} else {
224 
						this.removing = true;
225 
						this.isNeedRefresh = false;
226 
					}
227 
					this['_' + state](deltaY);
228 
				}
229 
				if ($.os.ios && parseFloat($.os.version) >= 8) {
230 
					var clientY = detail.gesture.touches[0].clientY;
231 
					if ((clientY + 10) > window.innerHeight || clientY < 10) {
232 
						this._dragend(e);
233 
						return;
234 
					}
235 
				}
236 
			}
237 
		},
238 
		_dragend: function(e) {
239 
			var self = this;
240 
			if (self.isDragging) {
241 
				self.isDragging = false;
242 
				self._dragEndAfterChangeOffset(self.isNeedRefresh);
243 
			}
244 
			if (self.isPullingUp) {
245 
				if (self.pullingUpTimeout) {
246 
					clearTimeout(self.pullingUpTimeout);
247 
				}
248 
				self.pullingUpTimeout = setTimeout(function() {
249 
					self.isPullingUp = false;
250 
				}, 1000);
251 
			}
252 
		},
253 
		_pullStart: function(startDeltaY) {
254 
			this.pullStart(startDeltaY);
255 
			$.trigger(this.element, EVENT_PULLSTART, {
256 
				api: this,
257 
				startDeltaY: startDeltaY
258 
			});
259 
		},
260 
		_pulling: function(deltaY) {
261 
			this.pulling(deltaY);
262 
			$.trigger(this.element, EVENT_PULLING, {
263 
				api: this,
264 
				deltaY: deltaY
265 
			});
266 
		},
267 
		_beforeChangeOffset: function(deltaY) {
268 
			this.beforeChangeOffset(deltaY);
269 
			$.trigger(this.element, EVENT_BEFORECHANGEOFFSET, {
270 
				api: this,
271 
				deltaY: deltaY
272 
			});
273 
		},
274 
		_afterChangeOffset: function(deltaY) {
275 
			this.afterChangeOffset(deltaY);
276 
			$.trigger(this.element, EVENT_AFTERCHANGEOFFSET, {
277 
				api: this,
278 
				deltaY: deltaY
279 
			});
280 
		},
281 
		_dragEndAfterChangeOffset: function(isNeedRefresh) {
282 
			this.dragEndAfterChangeOffset(isNeedRefresh);
283 
			$.trigger(this.element, EVENT_DRAGENDAFTERCHANGEOFFSET, {
284 
				api: this,
285 
				isNeedRefresh: isNeedRefresh
286 
			});
287 
		},
288 
		removePullDownTips: function() {
289 
			if (this.pullDownTips) {
290 
				try {
291 
					this.pullDownTips.parentNode && this.pullDownTips.parentNode.removeChild(this.pullDownTips);
292 
					this.pullDownTips = null;
293 
					this.removing = false;
294 
				} catch (e) {}
295 
			}
296 
		},
297 
		pullStart: function(startDeltaY) {
298 
			this.initPullDownTips(startDeltaY);
299 
		},
300 
		pulling: function(deltaY) {
301 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + deltaY + 'px,0)';
302 
		},
303 
		beforeChangeOffset: function(deltaY) {
304 
			this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
305 
		},
306 
		afterChangeOffset: function(deltaY) {
307 
			this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW_REVERSE;
308 
		},
309 
		dragEndAfterChangeOffset: function(isNeedRefresh) {
310 
			if (isNeedRefresh) {
311 
				this.pullDownTipsIcon.className = CLASS_PULL_TOP_SPINNER;
312 
				this.pullDownLoading();
313 
			} else {
314 
				this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
315 
				this.endPullDownToRefresh();
316 
			}
317 
		},
318 
		pullDownLoading: function() {
319 
			if (this.loading) {
320 
				return;
321 
			}
322 
			if (!this.pullDownTips) {
323 
				this.initPullDownTips();
324 
				this.dragEndAfterChangeOffset(true);
325 
				return;
326 
			}
327 
			this.loading = true;
328 
			this.pullDownTips.classList.add(CLASS_TRANSITIONING);
329 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + this.options.down.height + 'px,0)';
330 
			this.options.down.callback.apply(this);
331 
		},
332 
		pullUpLoading: function(e) {
333 
			if (this.loading || this.finished) {
334 
				return;
335 
			}
336 
			this.loading = true;
337 
			this.isDraggingUp = false;
338 
			this.pullUpTips.classList.remove(CLASS_HIDDEN);
339 
			e && e.detail && e.detail.gesture && e.detail.gesture.preventDefault();
340 
			this.pullUpTipsIcon.innerHTML = this.options.up.contentrefresh;
341 
			this.options.up.callback.apply(this);
342 
		},
343 
		endPullDownToRefresh: function() {
344 
			this.loading = false;
345 
			this.pullUpTips && this.pullUpTips.classList.remove(CLASS_HIDDEN);
346 
			this.pullDownTips.classList.add(CLASS_TRANSITIONING);
347 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,0,0)';
348 
			if (this.deltaY <= 0) {
349 
				this.removePullDownTips();
350 
			} else {
351 
				this.removing = true;
352 
			}
353 
			if (this.isInScroll) {
354 
				$(this.element.parentNode).scroll().refresh();
355 
			}
356 
		},
357 
		endPullUpToRefresh: function(finished) {
358 
			if (finished) {
359 
				this.finished = true;
360 
				this.pullUpTipsIcon.innerHTML = this.options.up.contentnomore;
361 
				this.element.removeEventListener('dragup', this);
362 
				window.removeEventListener('scroll', this);
363 
			} else {
364 
				this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
365 
			}
366 
			this.loading = false;
367 
			if (this.isInScroll) {
368 
				$(this.element.parentNode).scroll().refresh();
369 
			}
370 
		},
371 
		setStopped: function(stopped) {
372 
			if (stopped != this.stopped) {
373 
				this.stopped = stopped;
374 
				this.pullUpTips && this.pullUpTips.classList[stopped ? 'add' : 'remove'](CLASS_HIDDEN);
375 
			}
376 
		},
377 
		refresh: function(isReset) {
378 
			if (isReset && this.finished && this.pullUpTipsIcon) {
379 
				this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
380 
				this.element.addEventListener('dragup', this);
381 
				window.addEventListener('scroll', this);
382 
				this.finished = false;
383 
			}
384 
		}
385 
	});
386 
	$.fn.pullToRefresh = function(options) {
387 
		var pullRefreshApis = [];
388 
		options = options || {};
389 
		this.each(function() {
390 
			var self = this;
391 
			var pullRefreshApi = null;
392 
			var id = self.getAttribute('data-pullToRefresh');
393 
			if (!id) {
394 
				id = ++$.uuid;
395 
				$.data[id] = pullRefreshApi = new $.PullToRefresh(self, options);
396 
				self.setAttribute('data-pullToRefresh', id);
397 
			} else {
398 
				pullRefreshApi = $.data[id];
399 
			}
400 
			if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
401 
				pullRefreshApi.pullUpLoading();
402 
			}
403 
			pullRefreshApis.push(pullRefreshApi);
404 
		});
405 
		return pullRefreshApis.length === 1 ? pullRefreshApis[0] : pullRefreshApis;
406 
	}
407 
})(mui, window, document);

+ 352 - 0
app/js/public/mui.pullToRefresh.material.js
View File 

@ -0,0 +1,352 @@
1 
(function($) {
2 
	var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
3
4 
	$.PullToRefresh = $.PullToRefresh.extend({
5 
		init: function(element, options) {
6 
			this._super(element, options);
7 
			this.options = $.extend(true, {
8 
				down: {
9 
					tips: {
10 
						colors: ['008000', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
11 
						size: 200, //width=height=size;x=y=size/2;radius=size/4
12 
						lineWidth: 15,
13 
						duration: 1000,
14 
						tail_duration: 1000 * 2.5
15 
					}
16 
				}
17 
			}, this.options);
18 
			this.options.down.tips.color = this.options.down.tips.colors[0];
19 
			this.options.down.tips.colors = this.options.down.tips.colors.map(function(color) {
20 
				return {
21 
					r: parseInt(color.substring(0, 2), 16),
22 
					g: parseInt(color.substring(2, 4), 16),
23 
					b: parseInt(color.substring(4, 6), 16)
24 
				};
25 
			});
26 
		},
27 
		initPullDownTips: function() {
28 
			var self = this;
29 
			if ($.isFunction(self.options.down.callback)) {
30 
				self.pullDownTips = (function() {
31 
					var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
32 
					if (element) {
33 
						element.parentNode.removeChild(element);
34 
					}
35 
					if (!element) {
36 
						element = document.createElement('div');
37 
						element.classList.add(CLASS_PULL_TOP_TIPS);
38 
						element.innerHTML = '<div class="mui-pull-top-wrapper"><div class="mui-pull-top-canvas"><canvas id="pullDownTips" width="' + self.options.down.tips.size + '" height="' + self.options.down.tips.size + '"></canvas></div></div>';
39 
						element.addEventListener('webkitTransitionEnd', self);
40 
						document.body.appendChild(element);
41 
					}
42 
					self.pullDownCanvas = document.getElementById("pullDownTips");
43 
					self.pullDownCanvasCtx = self.pullDownCanvas.getContext('2d');
44 
					self.canvasUtils.init(self.pullDownCanvas, self.options.down.tips);
45 
					return element;
46 
				}());
47 
			}
48 
		},
49 
		removePullDownTips: function() {
50 
			this._super();
51 
			this.canvasUtils.stopSpin();
52 
		},
53 
		pulling: function(deltaY) {
54 
			var ratio = Math.min(deltaY / (this.options.down.height * 1.5), 1);
55 
			var ratioPI = Math.min(1, ratio * 2);
56 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + (deltaY < 0 ? 0 : deltaY) + 'px,0)';
57 
			this.pullDownCanvas.style.opacity = ratioPI;
58 
			this.pullDownCanvas.style.webkitTransform = 'rotate(' + 300 * ratio + 'deg)';
59 
			var canvas = this.pullDownCanvas;
60 
			var ctx = this.pullDownCanvasCtx;
61 
			var size = this.options.down.tips.size;
62 
			ctx.lineWidth = this.options.down.tips.lineWidth;
63 
			ctx.fillStyle = '#' + this.options.down.tips.color;
64 
			ctx.strokeStyle = '#' + this.options.down.tips.color;
65 
			ctx.stroke();
66 
			ctx.clearRect(0, 0, size, size);
67 
			//fixed android 4.1.x
68 
			canvas.style.display = 'none'; // Detach from DOM
69 
			canvas.offsetHeight; // Force the detach
70 
			canvas.style.display = 'inherit'; // Reattach to DOM
71 
			this.canvasUtils.drawArcedArrow(ctx, size / 2 + 0.5, size / 2, size / 4, 0 * Math.PI, 5 / 3 * Math.PI * ratioPI, false, 1, 2, 0.7853981633974483, 25, this.options.down.tips.lineWidth, this.options.down.tips.lineWidth);
72 
		},
73
74 
		beforeChangeOffset: function(deltaY) {},
75 
		afterChangeOffset: function(deltaY) {},
76 
		dragEndAfterChangeOffset: function(isNeedRefresh) {
77 
			if (isNeedRefresh) {
78 
				this.canvasUtils.startSpin();
79 
				this.pullDownLoading();
80 
			} else {
81 
				this.canvasUtils.stopSpin();
82 
				this.endPullDownToRefresh();
83 
			}
84 
		},
85 
		canvasUtils: (function() {
86 
			var canvasObj = null,
87 
				ctx = null,
88 
				size = 200,
89 
				lineWidth = 15,
90 
				tick = 0,
91 
				startTime = 0,
92 
				frameTime = 0,
93 
				timeLast = 0,
94 
				oldStep = 0,
95 
				acc = 0,
96 
				head = 0,
97 
				tail = 180,
98 
				rad = Math.PI / 180,
99 
				duration = 1000,
100 
				tail_duration = 1000 * 2.5,
101 
				colors = ['35ad0e', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
102 
				rAF = null;
103
104 
			function easeLinear(currentIteration, startValue, changeInValue, totalIterations) {
105 
				return changeInValue * currentIteration / totalIterations + startValue;
106 
			}
107
108 
			function easeInOutQuad(currentIteration, startValue, changeInValue, totalIterations) {
109 
				if ((currentIteration /= totalIterations / 2) < 1) {
110 
					return changeInValue / 2 * currentIteration * currentIteration + startValue;
111 
				}
112 
				return -changeInValue / 2 * ((--currentIteration) * (currentIteration - 2) - 1) + startValue;
113 
			}
114
115 
			function minmax(value, v0, v1) {
116 
				var min = Math.min(v0, v1);
117 
				var max = Math.max(v0, v1);
118 
				if (value < min)
119 
					return min;
120 
				if (value > max)
121 
					return min;
122 
				return value;
123 
			}
124 
			var drawHead = function(ctx, x0, y0, x1, y1, x2, y2, style) {
125 
				'use strict';
126 
				if (typeof(x0) == 'string') x0 = parseInt(x0);
127 
				if (typeof(y0) == 'string') y0 = parseInt(y0);
128 
				if (typeof(x1) == 'string') x1 = parseInt(x1);
129 
				if (typeof(y1) == 'string') y1 = parseInt(y1);
130 
				if (typeof(x2) == 'string') x2 = parseInt(x2);
131 
				if (typeof(y2) == 'string') y2 = parseInt(y2);
132 
				var radius = 3;
133 
				var twoPI = 2 * Math.PI;
134 
				ctx.save();
135 
				ctx.beginPath();
136 
				ctx.moveTo(x0, y0);
137 
				ctx.lineTo(x1, y1);
138 
				ctx.lineTo(x2, y2);
139 
				switch (style) {
140 
					case 0:
141 
						var backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
142 
						ctx.arcTo(x1, y1, x0, y0, .55 * backdist);
143 
						ctx.fill();
144 
						break;
145 
					case 1:
146 
						ctx.beginPath();
147 
						ctx.moveTo(x0, y0);
148 
						ctx.lineTo(x1, y1);
149 
						ctx.lineTo(x2, y2);
150 
						ctx.lineTo(x0, y0);
151 
						ctx.fill();
152 
						break;
153 
					case 2:
154 
						ctx.stroke();
155 
						break;
156 
					case 3:
157 
						var cpx = (x0 + x1 + x2) / 3;
158 
						var cpy = (y0 + y1 + y2) / 3;
159 
						ctx.quadraticCurveTo(cpx, cpy, x0, y0);
160 
						ctx.fill();
161 
						break;
162 
					case 4:
163 
						var cp1x, cp1y, cp2x, cp2y, backdist;
164 
						var shiftamt = 5;
165 
						if (x2 == x0) {
166 
							backdist = y2 - y0;
167 
							cp1x = (x1 + x0) / 2;
168 
							cp2x = (x1 + x0) / 2;
169 
							cp1y = y1 + backdist / shiftamt;
170 
							cp2y = y1 - backdist / shiftamt;
171 
						} else {
172 
							backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
173 
							var xback = (x0 + x2) / 2;
174 
							var yback = (y0 + y2) / 2;
175 
							var xmid = (xback + x1) / 2;
176 
							var ymid = (yback + y1) / 2;
177 
							var m = (y2 - y0) / (x2 - x0);
178 
							var dx = (backdist / (2 * Math.sqrt(m * m + 1))) / shiftamt;
179 
							var dy = m * dx;
180 
							cp1x = xmid - dx;
181 
							cp1y = ymid - dy;
182 
							cp2x = xmid + dx;
183 
							cp2y = ymid + dy;
184 
						}
185 
						ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x0, y0);
186 
						ctx.fill();
187 
						break;
188 
				}
189 
				ctx.restore();
190 
			};
191 
			var drawArcedArrow = function(ctx, x, y, r, startangle, endangle, anticlockwise, style, which, angle, d, lineWidth, lineRatio) {
192 
				'use strict';
193 
				style = typeof(style) != 'undefined' ? style : 3;
194 
				which = typeof(which) != 'undefined' ? which : 1;
195 
				angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
196 
				lineWidth = lineWidth || 1;
197 
				lineRatio = lineRatio || 10;
198 
				d = typeof(d) != 'undefined' ? d : 10;
199 
				ctx.save();
200 
				ctx.lineWidth = lineWidth;
201 
				ctx.beginPath();
202 
				ctx.arc(x, y, r, startangle, endangle, anticlockwise);
203 
				ctx.stroke();
204 
				var sx, sy, lineangle, destx, desty;
205 
				if (which & 1) {
206 
					sx = Math.cos(startangle) * r + x;
207 
					sy = Math.sin(startangle) * r + y;
208 
					lineangle = Math.atan2(x - sx, sy - y);
209 
					if (anticlockwise) {
210 
						destx = sx + 10 * Math.cos(lineangle);
211 
						desty = sy + 10 * Math.sin(lineangle);
212 
					} else {
213 
						destx = sx - 10 * Math.cos(lineangle);
214 
						desty = sy - 10 * Math.sin(lineangle);
215 
					}
216 
					drawArrow(ctx, sx, sy, destx, desty, style, 2, angle, d);
217 
				}
218 
				if (which & 2) {
219 
					sx = Math.cos(endangle) * r + x;
220 
					sy = Math.sin(endangle) * r + y;
221 
					lineangle = Math.atan2(x - sx, sy - y);
222 
					if (anticlockwise) {
223 
						destx = sx - 10 * Math.cos(lineangle);
224 
						desty = sy - 10 * Math.sin(lineangle);
225 
					} else {
226 
						destx = sx + 10 * Math.cos(lineangle);
227 
						desty = sy + 10 * Math.sin(lineangle);
228 
					}
229 
					drawArrow(ctx, sx - lineRatio * Math.sin(endangle), sy + lineRatio * Math.cos(endangle), destx - lineRatio * Math.sin(endangle), desty + lineRatio * Math.cos(endangle), style, 2, angle, d)
230 
				}
231 
				ctx.restore();
232 
			}
233 
			var drawArrow = function(ctx, x1, y1, x2, y2, style, which, angle, d) {
234 
				'use strict';
235 
				if (typeof(x1) == 'string') x1 = parseInt(x1);
236 
				if (typeof(y1) == 'string') y1 = parseInt(y1);
237 
				if (typeof(x2) == 'string') x2 = parseInt(x2);
238 
				if (typeof(y2) == 'string') y2 = parseInt(y2);
239 
				style = typeof(style) != 'undefined' ? style : 3;
240 
				which = typeof(which) != 'undefined' ? which : 1;
241 
				angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
242 
				d = typeof(d) != 'undefined' ? d : 10;
243 
				var toDrawHead = typeof(style) != 'function' ? drawHead : style;
244 
				var dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
245 
				var ratio = (dist - d / 3) / dist;
246 
				var tox, toy, fromx, fromy;
247 
				if (which & 1) {
248 
					tox = Math.round(x1 + (x2 - x1) * ratio);
249 
					toy = Math.round(y1 + (y2 - y1) * ratio);
250 
				} else {
251 
					tox = x2;
252 
					toy = y2;
253 
				}
254 
				if (which & 2) {
255 
					fromx = x1 + (x2 - x1) * (1 - ratio);
256 
					fromy = y1 + (y2 - y1) * (1 - ratio);
257 
				} else {
258 
					fromx = x1;
259 
					fromy = y1;
260 
				}
261 
				ctx.beginPath();
262 
				ctx.moveTo(fromx, fromy);
263 
				ctx.lineTo(tox, toy);
264 
				ctx.stroke();
265 
				var lineangle = Math.atan2(y2 - y1, x2 - x1);
266 
				var h = Math.abs(d / Math.cos(angle));
267 
				if (which & 1) {
268 
					var angle1 = lineangle + Math.PI + angle;
269 
					var topx = x2 + Math.cos(angle1) * h;
270 
					var topy = y2 + Math.sin(angle1) * h;
271 
					var angle2 = lineangle + Math.PI - angle;
272 
					var botx = x2 + Math.cos(angle2) * h;
273 
					var boty = y2 + Math.sin(angle2) * h;
274 
					toDrawHead(ctx, topx, topy, x2, y2, botx, boty, style);
275 
				}
276 
				if (which & 2) {
277 
					var angle1 = lineangle + angle;
278 
					var topx = x1 + Math.cos(angle1) * h;
279 
					var topy = y1 + Math.sin(angle1) * h;
280 
					var angle2 = lineangle - angle;
281 
					var botx = x1 + Math.cos(angle2) * h;
282 
					var boty = y1 + Math.sin(angle2) * h;
283 
					toDrawHead(ctx, topx, topy, x1, y1, botx, boty, style);
284 
				}
285 
			};
286
287 
			var spinColors = function(currentIteration, totalIterations) {
288 
				var step = currentIteration % totalIterations;
289 
				if (step < oldStep)
290 
					colors.push(colors.shift());
291 
				var c0 = colors[0],
292 
					c1 = colors[1],
293 
					r = minmax(easeLinear(step, c0.r, c1.r - c0.r, totalIterations), c0.r, c1.r),
294 
					g = minmax(easeLinear(step, c0.g, c1.g - c0.g, totalIterations), c0.g, c1.g),
295 
					b = minmax(easeLinear(step, c0.b, c1.b - c0.b, totalIterations), c0.b, c1.b);
296
297 
				oldStep = step;
298 
				return "rgb(" + parseInt(r) + "," + parseInt(g) + "," + parseInt(b) + ")";
299 
			}
300
301 
			var spin = function(t) {
302 
				var timeCurrent = t || (new Date).getTime();
303 
				if (!startTime) {
304 
					startTime = timeCurrent;
305 
				}
306 
				tick = timeCurrent - startTime;
307 
				acc = easeInOutQuad((tick + tail_duration / 2) % tail_duration, 0, duration, tail_duration);
308 
				head = easeLinear((tick + acc) % duration, 0, 360, duration);
309 
				tail = 20 + Math.abs(easeLinear((tick + tail_duration / 2) % tail_duration, -300, 600, tail_duration));
310
311 
				ctx.lineWidth = lineWidth;
312 
				ctx.lineCap = "round";
313
314 
				ctx.strokeStyle = spinColors(tick, duration);
315 
				ctx.clearRect(0, 0, size, size);
316 
				//fixed android 4.1.x
317 
				canvasObj.style.display = 'none'; // Detach from DOM
318 
				canvasObj.offsetHeight; // Force the detach
319 
				canvasObj.style.display = 'inherit'; // Reattach to DOM
320 
				ctx.beginPath();
321 
				ctx.arc(size / 2, size / 2, size / 4, parseInt(head - tail) % 360 * rad, parseInt(head) % 360 * rad, false);
322 
				ctx.stroke();
323
324 
				rAF = requestAnimationFrame(spin);
325 
			};
326 
			var startSpin = function() {
327 
				startTime = 0;
328 
				oldStep = 0;
329 
				rAF = requestAnimationFrame(spin);
330 
			};
331 
			var stopSpin = function() {
332 
				rAF && cancelAnimationFrame(rAF);
333 
			}
334 
			var init = function(canvas, options) {
335 
				canvasObj = canvas;
336 
				ctx = canvasObj.getContext('2d');
337 
				var options = $.extend(true, {}, options);
338 
				colors = options.colors;
339 
				duration = options.duration;
340 
				tail_duration = options.tail_duration;
341 
				size = options.size;
342 
				lineWidth = options.lineWidth;
343 
			};
344 
			return {
345 
				init: init,
346 
				drawArcedArrow: drawArcedArrow,
347 
				startSpin: startSpin,
348 
				stopSpin: stopSpin
349 
			};
350 
		})()
351 
	});
352 
})(mui);