').html(response.replace(rscript, "")).find(selector)
1481 | : response)
1482 | callback && callback.apply(self, arguments)
1483 | }
1484 | $.ajax(options)
1485 | return this
1486 | }
1487 |
1488 | var escape = encodeURIComponent
1489 |
1490 | function serialize(params, obj, traditional, scope){
1491 | var type, array = $.isArray(obj), hash = $.isPlainObject(obj)
1492 | $.each(obj, function(key, value) {
1493 | type = $.type(value)
1494 | if (scope) key = traditional ? scope :
1495 | scope + '[' + (hash || type == 'object' || type == 'array' ? key : '') + ']'
1496 | // handle data in serializeArray() format
1497 | if (!scope && array) params.add(value.name, value.value)
1498 | // recurse into nested objects
1499 | else if (type == "array" || (!traditional && type == "object"))
1500 | serialize(params, value, traditional, key)
1501 | else params.add(key, value)
1502 | })
1503 | }
1504 |
1505 | $.param = function(obj, traditional){
1506 | var params = []
1507 | params.add = function(key, value) {
1508 | if ($.isFunction(value)) value = value()
1509 | if (value == null) value = ""
1510 | this.push(escape(key) + '=' + escape(value))
1511 | }
1512 | serialize(params, obj, traditional)
1513 | return params.join('&').replace(/%20/g, '+')
1514 | }
1515 | })(Zepto)
1516 |
1517 | ;(function($){
1518 | $.fn.serializeArray = function() {
1519 | var name, type, result = [],
1520 | add = function(value) {
1521 | if (value.forEach) return value.forEach(add)
1522 | result.push({ name: name, value: value })
1523 | }
1524 | if (this[0]) $.each(this[0].elements, function(_, field){
1525 | type = field.type, name = field.name
1526 | if (name && field.nodeName.toLowerCase() != 'fieldset' &&
1527 | !field.disabled && type != 'submit' && type != 'reset' && type != 'button' && type != 'file' &&
1528 | ((type != 'radio' && type != 'checkbox') || field.checked))
1529 | add($(field).val())
1530 | })
1531 | return result
1532 | }
1533 |
1534 | $.fn.serialize = function(){
1535 | var result = []
1536 | this.serializeArray().forEach(function(elm){
1537 | result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
1538 | })
1539 | return result.join('&')
1540 | }
1541 |
1542 | $.fn.submit = function(callback) {
1543 | if (0 in arguments) this.bind('submit', callback)
1544 | else if (this.length) {
1545 | var event = $.Event('submit')
1546 | this.eq(0).trigger(event)
1547 | if (!event.isDefaultPrevented()) this.get(0).submit()
1548 | }
1549 | return this
1550 | }
1551 |
1552 | })(Zepto)
1553 |
1554 | ;(function($){
1555 | // __proto__ doesn't exist on IE<11, so redefine
1556 | // the Z function to use object extension instead
1557 | if (!('__proto__' in {})) {
1558 | $.extend($.zepto, {
1559 | Z: function(dom, selector){
1560 | dom = dom || []
1561 | $.extend(dom, $.fn)
1562 | dom.selector = selector || ''
1563 | dom.__Z = true
1564 | return dom
1565 | },
1566 | // this is a kludge but works
1567 | isZ: function(object){
1568 | return $.type(object) === 'array' && '__Z' in object
1569 | }
1570 | })
1571 | }
1572 |
1573 | // getComputedStyle shouldn't freak out when called
1574 | // without a valid element as argument
1575 | try {
1576 | getComputedStyle(undefined)
1577 | } catch(e) {
1578 | var nativeGetComputedStyle = getComputedStyle;
1579 | window.getComputedStyle = function(element){
1580 | try {
1581 | return nativeGetComputedStyle(element)
1582 | } catch(e) {
1583 | return null
1584 | }
1585 | }
1586 | }
1587 | })(Zepto)
1588 |
1589 | ;(function() {
1590 | /**
1591 | * 动态加载js文件
1592 | * @param {string} url js文件的url地址
1593 | * @param {Function} callback 加载完成后的回调函数
1594 | */
1595 | var _getScript = function(url, callback) {
1596 | var script = document.createElement("script");
1597 | script.type = "text/javascript";
1598 | if(typeof(callback) != "undefined"){
1599 | if (script.readyState) {
1600 | script.onreadystatechange = function () {
1601 | if (script.readyState == "loaded" || script.readyState == "complete") {
1602 | script.onreadystatechange = null;
1603 | callback();
1604 | }
1605 | };
1606 | } else {
1607 | script.onload = function () {
1608 | callback();
1609 | };
1610 | }
1611 | }
1612 | script.src = url;
1613 | document.body.appendChild(script);
1614 | }
1615 |
1616 | //如果使用的是zepto，就添加扩展函数
1617 | $.getScript = _getScript;
1618 | })(Zepto);
1619 |
--------------------------------------------------------------------------------
/src/js/public/common.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pangyongsheng/spa/5ff3874287768fa21c6951b6281ba19c0d9093ec/src/js/public/common.js
--------------------------------------------------------------------------------
/src/pages/detail/detail.css:
--------------------------------------------------------------------------------
1 | #detail .m-navbar{
2 | background: linear-gradient(-45deg, #2ed1d1, #23c8c8);
3 | background: -webkit-linear-gradient(-45deg, #2ed1d1, #23c8c8);
4 | background: -o-linear-gradient(-45deg, #2ed1d1, #23c8c8);
5 | background: -moz-linear-gradient(-45deg, #2ed1d1, #23c8c8);
6 | }
7 | #detail .m-navbar .iconc{
8 | font-size: .4rem;
9 | color: #fff;
10 | font-weight: lighter;
11 | }
12 | #detail .m-navbar .navbar-title{
13 | color: #fff;
14 | font-weight: bolder;
15 | }
16 | #detail .iconc{
17 | color: #fff;
18 | }
19 | #detail .tabbar-active{
20 | color: #23c8c8;
21 | }
22 | #detail .m-celltitle{
23 | margin-top: .1rem;
24 | }
25 | #detail .tab-nav-item.tab-active{
26 | color:#2ed1d1;
27 | }
28 | #detail .slider-pagination-item-active{
29 | background-color:#2ed1d1;
30 | }
31 |
--------------------------------------------------------------------------------
/src/pages/detail/detail.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/src/pages/detail/detail.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 | //获取传参
3 | var obj = router.parse();
4 | console.log(obj);
5 | $("#title").html(obj.param.title);
6 | //返回
7 | $(document).on('click','.navback',function(){
8 | window.location.hash = router.stringify('home',{animate:'left'});
9 | })
10 | //轮播图
11 | $('#J_Slider').slider({
12 | speed: 200,
13 | autoplay: 2000,
14 | lazyLoad: true
15 | });
16 | //tab页
17 | var $tab = $('#J_Tab');
18 | $tab.tab({
19 | nav: '.tab-nav-item',
20 | panel: '.tab-panel-item',
21 | activeClass: 'tab-active'
22 | });
23 | $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
24 | console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
25 | });
26 | $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
27 | console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
28 | });
29 |
30 | })
31 |
--------------------------------------------------------------------------------
/src/pages/home/home.css:
--------------------------------------------------------------------------------
1 | #home .m-navbar{
2 | background: linear-gradient(-45deg, #2ed1d1, #23c8c8);
3 | background: -webkit-linear-gradient(-45deg, #2ed1d1, #23c8c8);
4 | background: -o-linear-gradient(-45deg, #2ed1d1, #23c8c8);
5 | background: -moz-linear-gradient(-45deg, #2ed1d1, #23c8c8);
6 | }
7 | #home .m-navbar .iconc{
8 | font-size: .4rem;
9 | color: #fff;
10 | font-weight: lighter;
11 | }
12 | #home .m-navbar .navbar-title{
13 | color: #fff;
14 | font-weight: bolder;
15 | }
16 |
17 | #home .tabbar-active{
18 | color: #23c8c8;
19 | }
20 | #home .m-celltitle{
21 | margin-top: .1rem;
22 | color:rgb(172, 184, 180);
23 |
24 | }
25 | #home .icons{
26 | color: #23c8c8;
27 | font-size: .6rem;
28 | }
29 | #home .slider-pagination-item-active{
30 | background-color: #23c8c8;
31 | }
32 | #home .list-price{
33 | color: #23c8c8;
34 | }
35 | #home .badge-danger{
36 | background-color: rgb(231, 57, 129);
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/home/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
127 |
128 |
149 |
150 |
--------------------------------------------------------------------------------
/src/pages/home/home.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 | //轮播图
3 | $('#J_Slider').slider({
4 | speed: 200,
5 | autoplay: 2000,
6 | lazyLoad: true
7 | });
8 | //扫码
9 | var dialog = window.YDUI.dialog;
10 |
11 | $(document).on('click','.nav-qs',function(){
12 | dialog.notify('扫码！', 1000, function(){
13 | });
14 | })
15 | //菜单
16 | $(document).on('click','.nav-me',function(){
17 | dialog.notify('菜单', 1000, function(){
18 | });
19 | })
20 | //
21 | $(document).on('click','.qq',function(){
22 | dialog.toast('820568018', 'success', 500);
23 | })
24 | $(document).on('click','.wb',function(){
25 | dialog.toast('没有微博', 'success', 500);
26 | })
27 | $(document).on('click','.wx',function(){
28 | dialog.toast('pangyongsheng', 'success', 500);
29 | })
30 | //查看详情
31 | $(document).on('click','.list-item',function(){
32 | var name=$(this).find('.list-title').html();
33 | window.location.hash = router.stringify('detail',{animate:'right',title:name});
34 | })
35 |
36 | })
37 |
--------------------------------------------------------------------------------
/src/pages/list/list.css:
--------------------------------------------------------------------------------
1 | #list .m-navbar{
2 | background: linear-gradient(-45deg, #2ed1d1, #23c8c8);
3 | background: -webkit-linear-gradient(-45deg, #2ed1d1, #23c8c8);
4 | background: -o-linear-gradient(-45deg, #2ed1d1, #23c8c8);
5 | background: -moz-linear-gradient(-45deg, #2ed1d1, #23c8c8);
6 | }
7 | #list .m-navbar .iconc{
8 | font-size: .4rem;
9 | color: #fff;
10 | font-weight: lighter;
11 | }
12 | #list .m-navbar .navbar-title{
13 | color: #fff;
14 | font-weight: bolder;
15 | }
16 |
17 | #list .tabbar-active{
18 | color: #23c8c8;
19 | }
20 | #list .m-celltitle{
21 | margin-top: .1rem;
22 | }
23 | #list .list-price{
24 | color:#23c8c8;
25 | }
26 | #list .badge-danger{
27 | background-color: rgb(231, 57, 129);
28 | }
29 |
--------------------------------------------------------------------------------
/src/pages/list/list.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
122 |
123 |
124 |
145 |
146 |
--------------------------------------------------------------------------------
/src/pages/list/list.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 |
3 | })
4 |
--------------------------------------------------------------------------------
/src/pages/personal/personal.css:
--------------------------------------------------------------------------------
1 | #personal .m-navbar{
2 | background: linear-gradient(-45deg, #2ed1d1, #23c8c8);
3 | background: -webkit-linear-gradient(-45deg, #2ed1d1, #23c8c8);
4 | background: -o-linear-gradient(-45deg, #2ed1d1, #23c8c8);
5 | background: -moz-linear-gradient(-45deg, #2ed1d1, #23c8c8);
6 | }
7 | #personal .m-navbar .iconc{
8 | font-size: .4rem;
9 | color: #fff;
10 | font-weight: lighter;
11 | }
12 | #personal .m-navbar .navbar-title{
13 | color: #fff;
14 | font-weight: bolder;
15 | }
16 |
17 | #personal .tabbar-active{
18 | color: #23c8c8;
19 | }
20 | #personal .m-celltitle{
21 | /* margin-top: .1rem; */
22 | }
23 | #personal .cell-select{
24 | direction: rtl;
25 | }
26 | #personal .cell-icon:before, .cell-icon:after{
27 | color: #23c8c8;
28 | }
29 | #personal #sub{
30 | background-color: #23c8c8;
31 | }
32 | #personal .cell-right input[type="radio"]:checked + .cell-checkbox-icon:after, .cell-right input[type="checkbox"]:not(.m-switch):checked + .cell-checkbox-icon:after{
33 | color: #23c8c8;
34 | }
35 |
--------------------------------------------------------------------------------
/src/pages/personal/personal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
103 |
104 |
105 |
125 |
126 |
--------------------------------------------------------------------------------
/src/pages/personal/personal.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 | var dialog = window.YDUI.dialog;
3 | $(document).on('click','#sub',function(){
4 | dialog.notify('提交成功！', 5000, function(){
5 | });
6 | })
7 | })
8 |
--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 |
3 | router.start({
4 | view: '#ui-view',
5 | errorTemplateId: '#error', // 可选
6 | router: {
7 | 'home': {
8 | templateUrl: './pages/home/home.html',
9 | controller: './pages/home/home.js',
10 | styles:'./pages/home/home.css',
11 | animate:''
12 | },
13 | 'list': {
14 | templateUrl: './pages/list/list.html',
15 | controller: './pages/list/list.js',
16 | styles:'./pages/list/list.css',
17 | animate:''
18 | },
19 | 'personal': {
20 | templateUrl: './pages/personal/personal.html',
21 | controller: './pages/personal/personal.js',
22 | styles:'./pages/personal/personal.css',
23 | animate:''
24 | },
25 | 'detail':{
26 | templateUrl: './pages/detail/detail.html',
27 | controller: './pages/detail/detail.js',
28 | styles:'./pages/detail/detail.css',
29 | animate:'right'
30 | },
31 | 'defaults': 'home' //默认路由
32 | }
33 | });
34 |
35 | });
36 |
--------------------------------------------------------------------------------
/webpack.build.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const glob = require('glob');
3 | const fs = require('fs');
4 | const webpack = require('webpack');
5 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
7 | const WebpackMd5Hash = require('webpack-md5-hash');
8 |
9 | const enterFile={}; //存放入口文件
10 |
11 | enterFile.vendors=
12 | ['./src/js/libs/zepto.js',
13 | './src/js/libs/route.js',
14 | './src/router.js',
15 | //'./src/js/libs/ydui.flexible.js',
16 | //'./src/js/libs/ydui.js',
17 | './src/js/public/common.js'
18 | ];
19 |
20 | //公共js
21 | // const jsPath=glob.sync('./src/js/**/*.js');
22 | // jsPath.forEach(function (files) {
23 | // enterFile.vendors.push(files);
24 | // })
25 |
26 | //公共css
27 | const cssPath=glob.sync('./src/css/**/*.css');
28 | cssPath.forEach(function (files) {
29 | enterFile.vendors.push(files);
30 | })
31 | //page下资源
32 | const pagePath=glob.sync('./src/pages/*');
33 |
34 | pagePath.forEach(function (files) {
35 | let arr=[];
36 | arr.push(path.resolve(__dirname,glob.sync(files+'/**/*.js').toString()));
37 | arr.push(path.resolve(__dirname,glob.sync(files+'/**/*.css').toString()));
38 | enterFile[path.basename(files)]= arr;
39 | //console.log(enterFile);
40 | })
41 |
42 | const config={
43 | entry: enterFile,
44 | output: {
45 | path: path.join(__dirname, 'dist'),
46 | //publicPath: "../",
47 | filename: 'pages/[name]/[name].js',
48 | //chunkFilename: 'js/[id].chunk.js'
49 | },
50 | module: {
51 | loaders: [ //加载器
52 | {
53 | test: /\.css$/,
54 | loader: ExtractTextPlugin.extract("style", "css!autoprefixer")
55 | },{
56 | test: /\.html$/,
57 | loader: "html"
58 | }, {
59 | test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
60 | loader: 'url-loader?name=css/fonts/[name].[ext]'
61 | }, {
62 | test: /\.(png|jpe?g|gif)$/,
63 | loader: 'url-loader?limit=8192&name=imgs/[name].[ext]'
64 | // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL
65 | }
66 | ]
67 |
68 | },
69 | plugins: [
70 | new ExtractTextPlugin('pages/[name]/[name].css', {allChunks: true}),
71 | ]
72 | }
73 |
74 | //页面文件打包
75 | var pages = getEntry('src/**/*.html', 'src/');
76 |
77 | for (var pathname in pages)
78 | {
79 | //路径转化
80 | var temPath = pages[pathname].replace(/\\/, '/');
81 | var pName = pathname.replace(/\\/g, '/');
82 |
83 | //同步方式读取文件，清空ide中默认
22 | 
27 | 
32 | 
71 | 
85 | 
99 | 
113 | 
20 |