如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
移動跨平臺框架React Native經過4年的發展，其生態已經變得異常豐富，在使用React Native開發項目的過程中，為了提高開發效率，我們經常會借鑒一些使用使用率比較高的開源庫，根據大眾的需求，對這些使用較高的 React-Native UI 庫，我們做一個簡單的總結和歸類，方便大家更好地入門 React Native。
本文只是收集了一些常見的UI庫和功能庫，除了上面介紹的知名第三方庫之外，還有很多實現小功能的庫，這些庫可以大大的提高我們的開發效率，并且可以在此基礎上進行二次開發。并且歡迎大家關注我的《React Native移動開發實戰》，第二版修改版會再近期再版，歡迎持續關注。
NativeBase 是一個廣受歡迎的 UI 組件庫，為 React Native 提供了數十個跨平臺組件。在使用 NativeBase 時，你可以使用任意開箱即用的第三方原生庫，而這個項目本身也擁有一個豐富的生態系統，從有用的入門套件到可定制的主題模板。
NativeBase 項目地址: https://github.com/GeekyAnts/NativeBase
入門學習地址: https://reactnativeseed.com/
React Native Elements是一個高度可定制的跨平臺 UI 工具包，完全用 Javascript 構建。該庫的作者聲稱“React Native Elements 的想法更多的是關于組件結構而不是設計，這意味著在使用某些元素時可以減少樣板代碼，但可以完全控制它們的設計”，這對于開發新手和經驗豐富的老手來說都很有吸引力。
React Native Elements 項目地址:
https://github.com/react-native-training/react-native-elements
React Native Elements 示例項目：
https://react-native-training.github.io/react-native-elements/
Shoutem也是一個 React Native UI 工具包，由 3 個部分組成：UI 組件、主題和組件動畫。該庫為 iOS 和 Android 提供了一組跨平臺組件，所有組件都是可組合和可定制的。每個組件還提供了與其他組件一致的預定義樣式，這樣可以在無需手動定義復雜樣式的情況下構建復雜的組件。
項目地址：https://shoutem.github.io/ui/
UI Kitten這個庫提供了一個可定制和可重復使用的 react-native 組件工具包，該工具包將樣式定義移到特定位置，從而可以單獨重用組件或為組件設置樣式。通過傳遞不同的變量，可以很容易地“動態”改變主題樣式。
項目地址: https://github.com/akveo/react-native-ui-kitten
項目體驗地址：https://expo.io/@akveo/ui-kitten-explorer-app
React Native Material UI是一組高度可定制的 UI 組件，實現了谷歌的 Material Design。請注意，這個庫使用了一個名為 uiTheme 的 JS 對象，這個對象在上下文間傳遞，以實現最大化的定制化能力。
React Native Material UI 項目地址:
https://github.com/xotahal/react-native-material-ui
包含庫組件及示例的清單：
https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md
React Native Material Kit是一套很有用的 UI 組件和主題，實現了谷歌的 Material Design。不過需要說明的是， React Native Material Kit在2017 年 12 月之后就停止維護了。
項目地址: https://github.com/xinthink/react-native-material-kit
Nachos UI 是一個 React Native 組件庫，提供了 30 多個可定制的組件，這些組件也可以通過 react-native-web 在 Web 上運行。它通過了快照測試，支持格式化和 yarn，提供了熱火的設計和全局主題管理器。
項目地址: https://github.com/nachos-ui/nachos-ui
Wix 工程公司正致力于開發這個進的 UI 工具集和組件庫，它還支持 react-native-animatable 和 react-native-blur。這個庫附帶了一組預定義的樣式預設（轉換為修飾符），包括 Color、Typography、Shadow、Border Radius 等。
項目地址: https://github.com/wix/react-native-ui-lib
React Native Paper是一個跨平臺的 UI 組件庫，它遵循 Material Design 指南，提供了全局主題支持和可選的 babel 插件，用以減少捆綁包大小。
React Native Paper 項目地址:
https://github.com/callstack/react-native-paper
Expo 示例應用程序：
https://expo.io/@satya164/react-native-paper-example
React Native Vector Icons是一組 React Native 的可定制圖標，支持 NavBar/TabBar/ToolbarAndroid、圖像源和完整樣式。它非常有用，而且被數千個應用程序以及其他 UI 組件庫（如 react-native-paper）所使用。
項目地址: https://github.com/oblador/react-native-vector-icons
示例項目：https://oblador.github.io/react-native-vector-icons/
Teaset是一個 React Native UI 庫，提供了 20 多個純 JS（ES6）組件，用于內容顯示和動作控制。雖然它的文檔不夠詳盡，但它簡潔的設計吸引了我的眼球。
項目地址：https://github.com/rilyu/teaset
antd-mobile是由螞蟻金融團隊推出的一個開源的react組件庫，這個組件庫擁有很多使用的組件。
項目地址：https://github.com/ant-design/ant-design-mobile
react-native-button是github上一個開源的button組件，目前仍保持比較快的更新頻率，提供比較豐富的Button功能。
項目地址：https://github.com/ide/react-native-button
react-native-image-viewer是一個圖片大圖瀏覽的庫，點擊圖片可以放大縮小。
項目地址：https://github.com/ascoders/react-native-image-viewer
react-native-image-picker是實現多個圖像選擇、裁剪、壓縮等功能的第三方庫，可以使用該庫實現圖片、照相等操作。
項目地址：https://github.com/react-community/react-native-image-picker
react-native-picker是React native最常見的滾輪控件，可以實現單滾輪、雙滾輪和三滾輪效果。
項目地址：https://github.com/beefe/react-native-picker
react-native-scrollable-tab-view是一個帶有TabBar和可切換頁面的控件。，在Android中可以看成是ViewPager和TabLayout的結合。
項目地址：https://github.com/happypancake/react-native-scrollable-tab-view
react-native-app-intro是實現引導頁的庫，當然開發者也可以自己手動實現。
項目地址：https://github.com/fuyaode/react-native-app-intro
3D Touch是實現React native 3D Touch的庫，可以用此庫很方便的實現3D Touch。效果如下：
項目地址：https://github.com/jordanbyron/react-native-quick-actions
react-native-snap-carousel是可以實現復雜效果的輪播圖庫，實現的效果如下：
除此之外，還可以實現Galley效果等多種效果。
項目地址：https://github.com/archriss/react-native-snap-carousel
react-native-blur是專門用于實現毛玻璃效果的。
項目地址：https://github.com/react-native-community/react-native-blur
react-native-actionsheet是實現底部彈框的組件，可以在Android和iOS平臺上共用，當然也可以自己封裝實現。
項目地址：https://github.com/beefe/react-native-actionsheet
react-native-popover是React Native開發中常見的彈出提示框操作，其效果如下圖所示：
圖表在移動開發中應用的場景可謂非常多，這里介紹一款使用的比較多的庫。
項目地址：https://github.com/wuxudong/react-native-charts-wrapper
react-native-spinkit是一個很炫的加載動畫第三方庫，可以根據實際情況定制加載的動畫。
https://github.com/maxs15/react-native-spinkit
Facebook Design-iOS 10 iPhone GUI是iOS 10 公開版的 GUI 元素模板，包括 Sketch、Photoshop、Figma、XD 和 Craft。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
方式一
<!--1.1使用Vue.extend來創建全局的Vue組件--> var tem1 = Vue.extend({
template:'<h3>這是使用 Vue.extend 創建的組件</h3>' //指定組件要展示的HTML結構
}); <!--1.2使用Vue.component('組件名稱',創建出來的組件模板對象)--> Vue.component('myTem1',tem1);
/* <!--注意--> 使用 Vue.component() 定義全局組件的時候，
組件名稱使用 駝峰命名，則在引用組件的時候，需要把大寫改為小寫，并且用 '-'將單詞連接
組件名稱不適用駝峰命名，則直接拿名稱來使用即可
*/ <!--組合方式--> Vue.component('myTem1',Vue.extend({
template : '<h3>這是使用 Vue.extend 創建的組件</h3>'
})) <div id="app"> <!-- 如果要使用組件，直接把組件的名稱以 HTML 標簽的形式，引入到頁面中--> <my-tem1> </my-tem1> </div>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
方式二
直接使用Vue.component()
Vue.component('mycom2',{
template : '<h3>這是使用 Vue.component 創建的組件</h3>' })
但是這樣寫會有一個問題：
<!--在h3標簽后緊接一個span標簽的話就會出問題了--> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span>
這個問題是在 組件template屬性指向的模板內容，必須有且只能有唯一的一個根元素
所以修改代碼如下：
Vue.component('mycom2',{
template :
'<div> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span> </div>'
})
運行結果如下：
不過這種方式也有一個瑕疵，就是template 屬性的值是HTML標簽，而在軟件中，并沒有智能提示，容易出錯，若使用這種方式，需要仔細，避免出錯
方式三
<!--1.定義組件：--> Vue.component('mycom3',{
template : '#tem1'
}); <!--2.在被控制的 #app 外面使用 template 元素，定義組建的HTML模板結構--> <div id="app"> <!--3. 引用組件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>這是 template 元素</h1> <span>這種方式好用</span> </div> </template>
運行結果如下：
這是Vue創建組件(全局)的3種方式，其實相差不多，希望對大家有所幫助
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.url:
要求為String類型的參數，（默認為當前頁地址）發送請求的地址。
2.type:
要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。
3.timeout:
要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。
4.async:
要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。
5.cache:
要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false），設置為false將不會從瀏覽器緩存中加載請求信息。
6.data:
要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換，可以查看 processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
7.dataType:
要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞?？捎玫念愋腿缦拢?br style="box-sizing:border-box;outline:0px;word-break:break-all;" />
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。
text：返回純文本字符串。
8.beforeSend：
要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。
function(XMLHttpRequest){
this; //調用本次ajax請求時傳遞的options參數
}
9.complete：
要求為Function類型的參數，請求完成后調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest, textStatus){
this; //調用本次ajax請求時傳遞的options參數
}
10.success：要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。
(1)由服務器返回，并根據dataType參數進行處理后的數據。
(2)描述狀態的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調用本次ajax請求時傳遞的options參數
}
11.error:
要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含信息
this; //調用本次ajax請求時傳遞的options參數
}
12.contentType：
要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
13.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數據
return data;
}
14.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理后的數據
return data;
}
15.global：
要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。
16.ifModified：
要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
17.jsonp：
要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。
18.username：
要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。
19.password：
要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。
20.processData：
要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講并非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。
21.scriptCharset：
要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。
案例代碼：
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有內容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
22.順便說一下$.each()函數:
$.each()函數不同于JQuery對象的each()方法，它是一個全局函數，不操作JQuery對象，而是以一個數組或者對象作為第1個參數，以一個回調函數作為第2個參數?；卣{函數擁有兩個參數：第1個為對象的成員或數組的索引，第2個為對應變量或內容。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Web項目前后端分離開發時，經常會遇到跨域請求和跨域攜帶Cookie的相關問題：
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
getResponse().setHeader("Access-Control-Allow-Origin","*");
//表明服務器支持的所有頭信息字段
getResponse().setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma,Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
/** 目前測試來看為了兼容所有請求方式，上面2個必須設 **/
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
getResponse().setHeader("Access-Control-Allow-Credentials", "true");
// 首部字段 Access-Control-Allow-Methods 表明服務器允許客戶端使用 POST, GET 和 OPTIONS 方法發起請求。
//該字段與 HTTP/1.1 Allow: response header 類似，但僅限于在需要訪問控制的場景中使用。
getResponse().setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//表明該響應的有效時間為 86400 秒，也就是 24 小時。在有效時間內，瀏覽器無須為同一請求再次發起預檢請求。
//請注意，瀏覽器自身維護了一個最大有效時間，如果該首部字段的值超過了最大有效時間，將不會生效。
getResponse().setHeader("Access-Control-Max-Age", "86400");
// IE8 引入XDomainRequest跨站數據獲取功能,也就是說為了兼容IE
getResponse().setHeader("XDomainRequestAllowed","1");
服務端可以根據實際需求修改下面設置，以Java代碼為做示例：
//如果需要把Cookie發到服務端，需要指定Access-Control-Allow-Credentials字段為true;
response.setHeader("Access-Control-Allow-Credentials", "true");
//允許跨域的域名，*號為允許所有,存在被 DDoS攻擊的可能。
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
//表明服務器支持的頭信息字段
response.setHeader("Access-Control-Allow-Headers","content-type");
前端根據實際情況修改發起請求的ajax，示例：
$.ajax({
type: "POST",
url: "實際的請求地址",
data: {參數：參數值},
dataType: "json",
crossDomain:true, //設置跨域為true xhrFields: {
withCredentials: true //默認情況下，標準的跨域請求是不會發送cookie的 },
success: function(data){ alert("請求成功");
}
});
另外還有代理、jsonp等方式不做介紹了
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.說下需求：點擊標題 跳轉 預覽的pdf 頁，下載功能 可選【最好有】。
2.實現結果 ：
3.代碼實現：
依賴pdf.js 【需要下載完整 控件】
下載官網：http://mozilla.github.io/pdf.js/
點擊 ‘Download ’ 到下載頁
git 克隆 或者下載。
下載后文件長這樣：
【重點在后面 項目如何部署組裝】
1.新建一個空項目 把文件放到項目根目錄下：
紅色圈里 是官網下載的 就改個文件名字，然后拖進項目里，完全不用動里面任何文件記住，有需要另說。
綠色是我寫的【dowwn.html 是測試文件;static 放pdf 文件】 下面貼代碼：
list.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">產品說明書</p>
-
<ul>
-
<li dataSrc = 'KD-122LA火災探測報警器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火災探測報警器說明書ccc</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-212LA可燃氣體探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃氣體探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-216LA可燃氣體探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃氣體探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'Kd-122LA_KD-601系統遙控器使用說明.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系統遙控器使用說明</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-602LA_SOS一鍵救助使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一鍵救助使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-701LA_溢水探測器使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探測器使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-702LA紅外人體移動探測器說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA紅外人體移動探測器說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-703LA_門窗探測器使用說明書.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA 門窗探測器使用說明書</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-805A_WiFi系統主機使用說明書_V1.00.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A WiFi系統主機使用說明書_V1.00</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'WIFI智慧家庭安防系統操作說明書_v0.01.pdf'onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系統操作說明書_v0.01</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
-
-
</ul>
-
<script src="js/jquery.min.js"></script>
-
<script>
-
function fun(e){
-
// console.log(e);
-
var dataSrc = $(e).attr('dataSrc');
-
// console.log(dataSrc);
-
// sessionStorage.setItem('dataSrc',dataSrc);
-
// window.location.href='index.html'
-
var urlSrc = 'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc;
-
$.ajax({
-
url: urlSrc,
-
type: "get",
-
success: function(xhr, data){
-
if (navigator.userAgent.indexOf('Android') > -1) {
-
//判斷移動端是android 還是ios ，若是android 則要借助pdf插件
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
} else {
-
//ios直接打開pdf
-
//window.location.href = url;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
}
-
},
-
error: function(){
-
//window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
-
}
-
});
-
}
-
</script>
-
</body>
-
-
</html>
完畢！
注釋：window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html? 直接跳轉到 萬能的pdf 組件里的html 頁，該有的 國際化和下載打印功能 人家都寫好了！
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">產品說明書</p>
-
-
<a href="static/1.pdf">00001</a>
-
-
-
</body>
-
-
</html>
-
哈哈，直接a 標簽 href 跳轉 pdf文件；也是ok的哦！【蘋果手機：直接預覽；；；安卓:下載 鏈接 】
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
有時候在寫CSS的過程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問題，如下
Css代碼
查找一些教材中（w3schools等），只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對于樣式文件中的多個相同樣式的優先級怎樣排列，沒有詳細說明。經過測試和繼續搜索，得知優先級如下排列：
1. 樣式表的元素選擇器選擇越，則其中的樣式優先級越高：
id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
所以上例中，#navigator的樣式優先級大于.current_block的優先級，及時.current_block是添加的，也不起作用。
2. 對于相同類型選擇器制定的樣式，在樣式表文件中，越靠后的優先級越高
注意，這里是樣式表文件中越靠后的優先級越高，而不是在元素class出現的順序。比如.class2 在樣式表中出現在.class1之后：
Css代碼
而某個元素指定class時采用 class="class2 class1"這種方式指定，此時雖然class1在元素中指定時排在class2的后面，但因為在樣式表文件中class1處于class2前面，此時仍然是class2的優先級更高，color的屬性為red，而非black。
3. 如果要讓某個樣式的優先級變高，可以使用!important來指定：
Css代碼
此時class將使用black，而非red。
對于一開始遇到的問題，有兩種解決方案：
1. 將border從#navigator中拿出來，放到一個class .block中，而.block放到.current_block之前：
Css代碼
需要莫仁為#navigator元素指定class="block"
2. 使用!important:
Css代碼
此時無需作任何其他改動即可生效。可見第二種方案更簡單一些。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
為了解決兼容性的問題，我們來封裝一個函數：
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
else{
return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>
為了解決兼容性的問題，我們來封裝一個函數:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
w : window.innerWidth,
h : window.innerHeight
}
}else{ if(document.compatMode ==="BackCompat") { return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{ return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>
查看元素的幾何尺寸
讓滾動條滾動
練習：
做一個小閱讀器，會自動翻頁。
<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本內容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加鎖，防止連續點start產生累加加速 start.onclick = function() { if(key) {
timer = setInterval(function() { window.scollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function() { clearInterval(timer);
key = true;
} </script>
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
變量包括：全局變量，局部變量
在JAvaScript中，函數中定義的變量是局部變量
分為：局部作用域和全局作用域
js中沒有塊級作用域---一對括號中定義的變量,這個變量可以在大括號外面使用
-
var num=10; //作用域鏈 級別:0
-
var num2=20;
-
var str = "abc"
-
function f1() {
-
var num2=20;
-
function f2() {
-
var num3=30;
-
console.log(num);
-
}
-
f2();
-
}
-
f1();
層層搜索,搜索到0級作用域的時候,如果還是沒有找到這個變量,結果就是報錯
（1）變量的提升
下面這種情況，變量的聲明被提前了，但是num的值并沒有提前，結果為undefined
-
//變量的提升
-
console.log(num);
-
var num=100;
-
-
-
//提升之后為：
-
var num;//變量的聲明提前
-
console.log(num);
-
var num=100;
（2）
函數聲明被提前，代碼仍然可以執行
-
//函數的聲明被提前了
-
f1();
-
function f1() {
-
console.log("這個函數,執行了");
-
}
但是對于下面這種情況，代碼報錯
-
f2();
-
var f2=function () {
-
console.log("小楊好帥哦");
-
}
-
-
//聲明提前后：
-
var f2;//為一個變量，undefind
-
f2();//undefind加括號是不被認可的，所以報錯
-
var f2=function () {
-
console.log("小楊好帥哦");
-
}
要想不報錯，代碼可以改為：
-
var f2;
-
f2=function () {
-
console.log("小楊好帥哦");
-
};
-
f2();
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
form表單提交，之前有個下載的項目接口，需要上url上邊傳超級多東西，但是 url是限制長度的 每個瀏覽器限制的url長度還不一樣，所以就想到用form表單的action提交表單。
標簽用于為用戶輸入創建 HTML 表單。
表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用于向服務器傳輸數據。（我們要用到的）
在這里我就寫個用js調用事件提交表單。表單不在頁面上顯示的例子。
下面這段代碼 form標簽的屬性 method 就是請求方法 跟 jquery的ajax一樣這里我使用post請求、 form標簽的屬性 enctype 規定發送表單數據之前如何對其進行編碼、form標簽的屬性 target=”_blank” 就相當于在新頁面打開 我這里做的是下載 所以要在新頁面打開。
<form method="post" enctype="application/x-www-form-urlencoded" id="form-submit" target="_blank">
<input type="hidden" name="account" value="多毛大叔愛蘿莉"/>
<input type="hidden" name="password" value="7758521"/>
</form>
<button type="button" id="go">go</button> //這里的name就是相當于post屬性的參數 value就是你傳的值 type是hidden 是因為我不想再頁面上看到他所以讓他隱藏了
接下來我們用js調用事件 動態給 form 添加 action 屬性讓form知道我們要讓他請求拿個位置。
// js 獲取form表單 var form_submit = document.getElementById('form-submit'); // js獲取按鈕 var go = document.getElementById('go'); // 當點擊go時執行事件 go.addEventListener（'click',function(){ // 動態給form表單設置請求位置 form_submit.active = "http://www.daxuehua.cn"; // 讓form表單提交 form_submit.submit()
}）如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
touchstart: //手指放到屏幕上時觸發
touchmove: //手指在屏幕上滑動式觸發
touchend: //手指離開屏幕時觸發
touchcancel: //系統取消touch事件的時候觸發
每個觸摸事件被觸發后，會生成一個event對象，event對象里額外包括以下三個觸摸列表
touches: //當前屏幕上所有手指的列表
targetTouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
這些列表里的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對于頁面的位置
screenX / screenY: //觸摸點相對于屏幕的位置
identifier: //touch對象的ID
target: //當前的DOM元素
注意：
手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放
通過meta元標簽來設置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滾動
preventDefault是阻止默認行為，在touchMove事件中使用可阻止默認行為滾動。
event.preventDefault();
3.解決穿透
在touchStart事件后添加touchMove事件的監聽，在touchMove事件里添加touchEnd事件的監聽，在touchEnd事件中移除touchMove和touchEnd的事件監聽，即可解決穿透問題
4.removeEventListener
傳入的處理事件函數一定是相同的函數，不能是匿名函數
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移動端觸摸滑動</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna's js lib" /> <meta name="description" content="移動端觸摸滑動" /> <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"> <style> *{margin:0;padding:0;} li{list-style:none;} .m-slider{width:600px;margin:50px 20px;overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:3000px;} .m-slider .cnt li{float:left;width:600px;} .m-slider .cnt img{display:block;width:100%;height:450px;} .m-slider .cnt p{margin:20px 0;} .m-slider .icons{text-align:center;color:#000;} .m-slider .icons span{margin:0 5px;} .m-slider .icons .curr{color:red;} .f-anim{-webkit-transition:left .2s linear;} </style> </head> <body> <div class="m-slider"> <ul class="cnt" id="slider"> <li> <img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg"> <p>20140813鏡面的世界，終究只是倒影?？吹玫侥愕纳碛?，卻觸摸不到你的未來</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>20140812錫林浩特前往東烏旗S101必經之處，一條極美的鐵路。鐵路下面是個小型的鹽沼，淡淡的有了一絲天空之境的感覺?？上г诖送媪艘粋€小時也沒有看見一列火車經過，只好繼續趕往東烏旗。</p> </li> <li> <img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg"> <p>20140811水的顏色為什么那么藍，我也納悶，反正自然飽和度和對比度拉完就是這個顏色的</p> </li> <li> <img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg"> <p>海洋星球3重慶天氣熱得我想臥軌自殺</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>以上這些作品分別來自兩位設計師作為觀者，您能否通過設計風格進行區分</p> </li> </ul> <div class="icons" id="icons"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script> var slider = { //判斷設備是否支持touch事件 touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider:document.getElementById('slider'), //事件 events:{
index:0, //顯示元素的索引 slider:this.slider, //this為slider對象 icons:document.getElementById('icons'),
icon:this.icons.getElementsByTagName('span'),
handleEvent:function(event){ var self = this; //this指events對象 if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
}
}, //滑動開始 start:function(event){ var touch = event.targetTouches[0]; //touches數組對象獲得屏幕上所有的touch，取第一個touch startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一個touch的坐標值 isScrolling = 0; //這個參數判斷是垂直滾動還是水平滾動 this.slider.addEventListener('touchmove',this,false); this.slider.addEventListener('touchend',this,false);
}, //移動 move:function(event){ //當屏幕有多個touch或者頁面被縮放過，就不執行move操作 if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling為1時，表示縱向滑動，0為橫向滑動 if(isScrolling === 0){
event.preventDefault(); //阻止觸摸事件的默認行為，即阻止滾屏 this.slider.className = 'cnt'; this.slider.style.left = -this.index*600 + endPos.x + 'px';
}
}, //滑動釋放 end:function(event){ var duration = +new Date - startPos.time; //滑動的持續時間 if(isScrolling === 0){ //當為水平滾動時 this.icon[this.index].className = ''; if(Number(duration) > 10){ //判斷是左移還是右移，當偏移量大于10時執行 if(endPos.x > 10){ if(this.index !== 0) this.index -= 1;
}else if(endPos.x < -10){ if(this.index !== this.icon.length-1) this.index += 1;
}
} this.icon[this.index].className = 'curr'; this.slider.className = 'cnt f-anim'; this.slider.style.left = -this.index*600 + 'px';
} //解綁事件 this.slider.removeEventListener('touchmove',this,false); this.slider.removeEventListener('touchend',this,false);
}
}, //初始化 init:function(){ var self = this; //this指slider對象 if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二個參數可以傳一個對象，會調用該對象的handleEvent屬性 }
};
slider.init(); </script> </body> </html>藍藍設計的小編 http://www.syprn.cn