jquery实现手机端移动端预约时间选择效果代码-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：jquery实现手机端移动端预约时间选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <!--页面布局样式-->
    <style type="text/css">
@charset "utf-8";
        /* CSS Document */
        .am-btn {
            padding: 0
        }
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            width: 100%;
        }
        a:focus, a:hover {
            color: inherit
        }

        a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer,
        form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, dl, dt, dd, dt + dd {
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            vertical-align: baseline;
            word-wrap: break-word;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        .am-form input[type=number], .am-form input[type=search], .am-form input[type=text], .am-form input[type=password], .am-form input[type=datetime], .am-form input[type=datetime-local], .am-form input[type=date], .am-form input[type=month], .am-form input[type=time], .am-form input[type=week], .am-form input[type=email], .am-form input[type=url], .am-form input[type=tel], .am-form input[type=color], .am-form select, .am-form textarea, .am-form-field, .am-btn {
            font: inherit;
        }

        [class*=am-u-] {
            padding: 0
        }

        button, input, select, textarea {
            outline: 0;
            -webkit-box-sizing: border-box
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block
        }

        li, ol, ul {
            list-style: none
        }

        blockquote, q {
            quotes: none
        }

        blockquote:after, blockquote:before, q:after, q:before {
            content: '';
            content: none
        }

        b, strong {
            font-weight: 700
        }

        img {
            max-width: 100%;
            vertical-align: middle;
            border: 0;
            -ms-interpolation-mode: bicubic;
            -webkit-touch-callout: none
        }

        .img-width100 {
            width: 100%;
        }

:focus {
            outline: 0
        }

        a {
            color: #323333;
            text-decoration: none
        }

        a.active {
            color: #06c
        }

        .clearfix:after, .clearfix:before {
            display: table;
            content: " "
        }

        .clearfix:after {
            clear: both
        }

        .pull-right {
            float: right !important
        }

        .pull-left {
            float: left !important
        }

        body {
            font-family: "Microsoft Yahei", Helvetica, STHeiTi, sans-serif;
            background-color: #f0f3f5;
            /*margin:0 auto;
    position:relative;*/
            width: 100%;
            overflow-x: hidden
        }

        input {
            outline: 0;
            -webkit-box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none
        }

        input:focus, textarea:focus {
            outline: 0;
        }

        .text-left {
            text-align: left
        }

        .text-center {
            text-align: center
        }

        .text-right {
            text-align: right
        }

        .vm {
            vertical-align: middle
        }

        .block {
            display: block !important
        }

        .bold {
            font-weight: 700
        }

        .touch_ui_btn {
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent
        }

        .touch_ui_btn.active {
            background-color: #ddd;
            color: #F60
        }

        body a:hover {
            -webkit-transition: color .2s linear, background-color .3s linear;
            -moz-transition: color .2s linear, background-color .3s linear;
            -o-transition: color .2s linear, background-color .3s linear;
            -ms-transition: color .2s linear, background-color .3s linear;
            transition: color .2s linear, background-color .3s linear;
        }

        /*
.box-shadow{
box-shadow: 0 0 6px rgba(215,222,224,.5);
}
*/
        .main-con {
            padding: 0 2.666%
        }

        .main-con-left {
            padding-left: 2.666%
        }

        .margin-con-left {
            margin-left: 2.666%;
            padding-right: 2.666%;
            width: 97.334%
        }

        .margin-con-left02 {
            margin-left: 5.332%;
            padding-left: 2.666%;
            padding-right: 2.666%;
            width: 94.668%
        }

        .margin-con-left03 {
            padding-right: 2.666%;
        }

        .mt-line {
            margin-top: 0.267rem
        }

        .mt-line-block {
            height: 0.267rem;
            background: #f5f5f5
        }

        .bottom-fixed {
            position: fixed;
            bottom: 0;
            width: 100%;
            z-index: 999;
            overflow: hidden
        }

        .box-bottom {
            height: 1.567rem;
            width: 100%;
            clear: both
        }

        .box-bottom01 {
            height: 1.467rem;
            width: 100%;
            clear: both
        }

        .box-bottom02 {
            height: 2.45rem;
            width: 100%;
            clear: both
        }

        .bg-white {
            background: #fff
        }

        .border-none {
            border: none
        }

        .margin-l0 {
            margin-left: 0
        }

        .main-txt {
            padding: 0 .6rem
        }

        .txt-green {
            color: #01b38a
        }

        .txt-yellow {
            color: #c5bb67
        }

        .txt-light-yellow {
            color: #ff9921
        }

        .txt-light-gray {
            color: #afb2b2
        }

        .txt-index-yellow {
            color: #ff8f0b
        }

        .txt-gray {
            color: #646666
        }

        .txt-dark {
            color: #333
        }

        .txt-ye {
            color: #f29221
        }

        .txt-gray-green {
            color: #75b3a5
        }

        .txt-pink {
            color: #ff6e56
        }

        .bg-pink {
            background: #f17388
        }

        .bg-yellow {
            background: #ded160
        }

        .bg-blue {
            background: #42b7e8
        }

        .bg-green {
            background: #5bd2b4
        }

        .font11 {
            font-size: 11px;
        }

        .txt-zy {
            color: #ff9110
        }

        .coupon-over .txt-zy {
            color: #bababa !important
        }

        .coupon-over .txt-gray｛color:#666｝
        [data-dpr="2"] .font11 {
            font-size: 22px;
        }

        [data-dpr="3"] .font11 {
            font-size: 33px;
        }

        .font12 {
            font-size: 12px;
        }

        [data-dpr="2"] .font12 {
            font-size: 24px;
        }

        [data-dpr="3"] .font12 {
            font-size: 36px;
        }

        .font13 {
            font-size: 13px;
        }

        [data-dpr="2"] .font13 {
            font-size: 26px;
        }

        [data-dpr="3"] .font13 {
            font-size: 39px;
        }

        .font14 {
            font-size: 14px;
        }

        [data-dpr="2"] .font14 {
            font-size: 28px;
        }

        [data-dpr="3"] .font14 {
            font-size: 42px;
        }

        .font15 {
            font-size: 15px;
        }

        [data-dpr="2"] .font15 {
            font-size: 30px;
        }

        [data-dpr="3"] .font15 {
            font-size: 45px;
        }

        .font16 {
            font-size: 16px;
        }

        [data-dpr="2"] .font16 {
            font-size: 32px;
        }

        [data-dpr="3"] .font16 {
            font-size: 48px;
        }

        .font17 {
            font-size: 17px;
        }

        [data-dpr="2"] .font17 {
            font-size: 34px;
        }

        [data-dpr="3"] .font17 {
            font-size: 51px;
        }

        .font20 {
            font-size: 20px;
        }

        [data-dpr="2"] .font20 {
            font-size: 40px;
        }

        [data-dpr="3"] .font20 {
            font-size: 60px;
        }

        .font30 {
            font-size: 30px;
        }

        [data-dpr="2"] .font20 {
            font-size: 60px;
        }

        [data-dpr="3"] .font20 {
            font-size: 90px;
        }

        .padding-4 {
            padding-top: .4rem;
            padding-bottom: .4rem;
            display: block;
            clear: both;
            overflow: hidden;
            position: relative;
        }

        .padding-r4 {
            padding-right: .37rem
        }

        .font4 {
            font-size: .4rem;
            color: #afb2b2;
            position: absolute;
            top: 50%;
            right: -0.1rem;
            margin-top: -0.2rem
        }

        .am-panel {
            box-shadow: none;
            -webkit-box-shadow: none
        }

        .link-a {
            display: block;
            clear: both;
            overflow: hidden
        }

        .am-form input[type=number]:focus, .am-form input[type=search]:focus, .am-form input[type=text]:focus, .am-form input[type=password]:focus, .am-form input[type=datetime]:focus, .am-form input[type=datetime-local]:focus, .am-form input[type=date]:focus, .am-form input[type=month]:focus, .am-form input[type=time]:focus, .am-form input[type=week]:focus, .am-form input[type=email]:focus, .am-form input[type=url]:focus, .am-form input[type=tel]:focus, .am-form input[type=color]:focus, .am-form select:focus, .am-form textarea:focus, .am-form-field:focus {
            background-color: none;
            border-color: none;
            outline: 0;
            -webkit-box-shadow: none;
            box-shadow: none
        }

        .am-alert, .am-alert a {
            color: #646666
        }

        .am-tabs-bd {
            border: none
        }

        .am-btn:focus, .am-btn:hover {
            color: inherit
        }

        .bg-gray {
            background: #f7f9fa
        }

        .border-top {
            border-top: 1px solid #dedede;
        }

        .btn-bg-white {
            background: #fff;
            color: #ff9921
        }

        .btn-bg-gray {
            background: #fafafa;
            color: #cccccc
        }

        .btn-bg-green, .btn-bg-green a {
            background: #36bc9b;
            color: #fff
        }

        .btn-bg-white:focus, .btn-bg-white:hover {
            color: #ff9921
        }

        .btn-bg-gray:focus, .btn-bg-gray:hover {
            color: #cccccc
        }

        .btn-bg-green:focus, .btn-bg-green:hover {
            color: #fff
        }

        .w1-3 {
            width: 33.333333%;
            margin: 0;
            height: 1.333rem;
        }

        .mask-time {
            background: rgba(0, 0, 0, .4);
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999
        }

        .time-area {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 99999;
            background: #f0f3f5;
        }

        .txt-small {
            width: 94.668%;
            margin-left: 2.666%;
            margin-top: 0
        }

        .time-choose-table {
            margin: 15px 2%;
            clear: both;
            overflow: hidden;
            padding-left: 4px;
        }

        .time-choose-table .time-table {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            background: #fff;
            border: 1px solid #eee;
            margin-left: -1px;
            margin-top: -1px;
            text-align: center;
            width: 25%;
            float: left;
            height: 50px;
            line-height: 50px
        }

        .time-choose-table .time-table:nth-child(4n+1) {
            margin-left: 0;
        }

        .time-choose-table .time-table:nth-child(1), .time-choose-table .time-table:nth-child(2), .time-choose-table .time-table:nth-child(3), .time-choose-table .time-table:nth-child(4) {
            margin-top: 0;
        }

        .time-choose-table .time-table > div {
            display: inline-block
        }

        .time-choose-table .time-table > div span {
            display: block
        }

        small {
            width: 94.668%;
            margin-left: 2.666%;
        }

        .btn-choose-time {
            border: none;
            width: 94.668%;
            margin-left: 2.666%;
            margin-bottom: .267rem;
            padding: 7px 0;
        }

        .time-choose-table .disabled {
            background: #fafafa;
            line-height: 1.3em;
            padding-top: 8px;
            box-sizing: border-box;
            color: #afb2b2
        }

        .time-choose-table .choosed:nth-child(4n+1) {
            border-top: 2px solid #36bc9b;
            border-right: 3px solid #36bc9b;
            border-bottom: 3px solid #36bc9b;
            border-left: 2px solid #36bc9b;
            line-height: 48px
        }

        .time-choose-table .choosed:nth-child(4n+2), .time-choose-table .choosed:nth-child(4n+3) {
            border-top: 2px solid #36bc9b;
            border-right: 3px solid #36bc9b;
            border-bottom: 3px solid #36bc9b;
            border-left: 2px solid #36bc9b;
            line-height: 48px
        }

        .time-choose-table .choosed:nth-child(4n) {
            border-top: 2px solid #36bc9b;
            border-right: 2px solid #36bc9b;
            border-bottom: 3px solid #36bc9b;
            border-left: 2px solid #36bc9b;
            line-height: 48px
        }

        .time-choose-table .choosed:nth-last-child(1), .time-choose-table .choosed:nth-last-child(2), .time-choose-table .choosed:nth-last-child(3), .time-choose-table .choosed:nth-last-child(4) {
            border-bottom: 2px solid #36bc9b;
        }

        .time-choose-table .choosed:nth-last-child(1) {
            border-right-width: 2px;
        }

        .promptumenu_nav {
            z-index: 5;
            position: absolute;
            bottom: 5px;
            left: 50%;
            margin-right: -50%;
        }

        .promptumenu_window {
            cursor: move;
            position: relative;

        }

        .promptumenu_nav a {
            cursor: pointer;
            width: 12px;
            height: 12px;
            text-indent: -9999px;
            outline: none;
            background: url(pagination1.png) 0 0 no-repeat;
            display: block;
            float: left;
            position: relative;
            left: -50%;
            margin: 0 2px;
        }

        .promptumenu_nav a.active {
            background: url(pagination2.png) 0 0 no-repeat;
        }

        .promptu-menu2 li {
            box-sizing: border-box;
            top: 0;
            height: 60px;
            text-align: center;
            padding-top: 12px;
            overflow: visible
        }

        .promptu-menu2 li.active {
            background: #36bc9b;
            color: #fff;
            position: relative
        }

        .promptu-menu2 li.active:after {
            position: absolute;
            bottom: -6px;
            left: 50%;
            margin-left: -6px;
            content: "";
            width: 0;
            height: 0;
            border-top: 6px solid #36bc9b;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent
        }

        .box-date {
            height: 60px;
            background: #fff;
        }

@media screen and (max-width: 321px) {
            .time-choose-table .time-table:nth-child(4n), .time-choose-table .time-table:nth-child(4n+1), .time-choose-table .time-table:nth-child(4n+2), .time-choose-table .time-table:nth-child(4n+3) {
                height: 47px;
                line-height: 47px
            }

            .time-choose-table .choosed {
                border: 2px solid #36bc9b;
                line-height: 40px
            }

            .time-choose-table .disabled:nth-child(4n), .time-choose-table .disabled:nth-child(4n+1), .time-choose-table .disabled:nth-child(4n+2), .time-choose-table .disabled:nth-child(4n+3) {
                line-height: 1.3em;
            }
        }
        .input_control {
            width: 100%;
            margin: 20px auto;
        }

        .fill_date_item {
            text-align: center;
            width: 100%;
            margin-top: 50px;
        }

        .fill_date_item input {
            display: inline-block;
        }

        input[type="text"] {
            box-sizing: border-box;
            text-align: center;
            height: 2.7em;
            border-radius: 4px;
            border: 1px solid #c8cccf;
            color: #6a6f77;
            -web-kit-appearance: none;
            -moz-appearance: none;
            outline: 0;
            padding: 0 1em;
            text-decoration: none;
        }

        input[type="text"]:focus {
            border: 1px solid #ff7496;
        }

        .am-btn:active:focus,
        .am-btn:focus {
            outline: 0;
            outline: 0;
            outline-offset: -2px
        }

        .login-area .am-g {
            padding: 0 0.667rem
        }

        .am-list>li {
            border-bottom: 1px solid #e6e9eb;
        }

        .am-list>li:last-child {
            border-bottom: 0
        }

        .am-list>li>a {
            padding: .4rem 0;
        }

        .am-list>li a {
            font-size: 16px
        }

        [data-dpr="2"] .am-list>li a {
            font-size: 32px
        }

        [data-dpr="3"] .am-list>li a {
            font-size: 48px
        }

        .am-list>li:first-child {
            border: none
        }

        .am-list,
        .am-topbar {
            margin-bottom: 0
        }

        .edition-number {
            color: #666;
            line-height: .8rem;
            margin-bottom: .3rem;
            display: block
        }

        .am-btn-danger {
            background: #f0f3f5;
            color: #c47269;
            border: none
        }

        .am-btn-green {
            background: #36bc9b;
            color: #fff
        }

        .am-btn-green:active,
        .am-btn-green:focus {
            color: #fff
        }

        .login-area .am-btn:focus,
        .login-area .am-btn:hover {
            color: #fff
        }

        .am-panel {
            margin-bottom: 0
        }

        .am-panel-hd {
            padding: 0 2.666%;
            border: none
        }

        .am-panel-bd {
            padding: 0 0 0 2.666%;
            border: none
        }
    </style>

</head>
<body>

    <!--本实例，默认参数通过url末尾数值传递“?type=33   ?type=34  ?type=35 ” 自行选择修改-->

    <div class="fill_date_item" id="doc-select-1">
        <input type="text" placeholder="请选择开始时间" id="fill_infomation_date_start1" readonly="">
    </div>

    <p></p>

    <div class="mask-time" style="display:none"></div>
    <!--遮罩层-->

    <div class="time-area" style="display:none">
        <!--时间选择表格-->
        <input type="hidden" name="date_" value="">
        <input type="hidden" name="time_">
        <div class="box-date">
            <ul class="promptu-menu2 font13"></ul>
        </div>
        <div class="time-choose-table font13 txt-gray" id="time-choose-table"></div>
        <div class="font11 txt-light-gray txt-small" style="display:none">
            提示：灰色时间不可选择，最长可预约7天内的服务时间。
        </div>
        <input type="button" value="确定选择" class="am-btn btn-default am-btn-green mt-line btn-choose-time" style='width:94.668%;margin-top:0px'>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">

        (function($) {
            $.fn.promptumenu = function(options) {
                // Here goes

                var settings = $.extend({
                    'columns': 4,
                    'rows': 4,
                    'direction': 'horizontal',
                    'width': 'auto',
                    'height': 'auto',
                    'duration': 500,
                    'pages': true,
                    'showPage': true,
                    'inertia': 200
                }, options);

                return this.each(function() {
                    var $this = $(this);
                    var properties;
                    var cursor = {
                        x: 0,
                        y: 1,
                        page: 1
                    };
                    var cells = {
                        'width': 0,
                        'height': 0,
                        'pages': 1,
                        'current_page': 1
                    };

                    var methods = {
                        //navigating to a specific page
                        go_to: function(index, easing, webkit) {
                            if (easing === undefined) {
                                easing = 'swing';
                            }
                            if (webkit === undefined) {
                                webkit = false;
                            }
                            var anim,
                            anim_css;
                            if (settings.direction == 'vertical') {

                                anim = {
                                    'top': (index - 1) * properties.height * (-1)
                                };
                                anim_css = {
                                    '-webkit-transform': 'translate3d(0px, ' + ((index - 1) * properties.height * (-1)) + 'px, 0px)'
                                };

                            } else {

                                anim = {
                                    'left': (index - 1) * properties.width * (-1)
                                };
                                anim_css = {
                                    '-webkit-transform': 'translate3d(' + ((index - 1) * properties.width * (-1)) + 'px, 0px, 0px)'
                                };

                            }

                            if (webkit) {
                                $this.css({
                                    '-webkit-transition-property': '-webkit-transform',
                                    '-webkit-transition-duration': settings.duration + 'ms',
                                    '-webkit-transition-timing-function': 'ease-out'
                                });
                                $this.css(anim_css);
                                $this.data('ppos', (index - 1) * properties.width * (-1));
                            }
                            if (navigator.userAgent.indexOf("Firefox") > 0) {
                                $this.animate(anim, settings.duration, easing);
                            }
                            if (!webkit && navigator.userAgent.indexOf("Firefox") <= 0) {
                                $this.animate(anim, settings.duration, easing);
                            }
                            $this.parent('.promptumenu_window').find('.promptumenu_nav a.active').removeClass('active');
                            $this.parent('.promptumenu_window').find('.promptumenu_nav a:nth-child(' + (index) + ')').addClass('active');
                            cells.current_page = index;
                        },
                        next_page: function() {
                            methods.go_to(cells.current_page + 1);
                        },
                        prev_page: function() {
                            methods.go_to(cells.current_page - 1);
                        }
                    };

                    //此处为异常判断，防止一个页面重复调用多次，不需可删除
                    if ($this.data('promptumenu')) {
                        //This element already has promptumenu set up
                        console.error('You are calling promptumenu for an element more than twice. Please have a look.');
                    } else {
                        //this element hasn't been initialized yet, so we set it up
                        $this.data('promptumenu', true);
                        $this.data('ppos', 0);

                        //take in mind the original css properties of the element, so we can preserve it's position.
                        properties = {
                            'width': (settings.width == 'auto') ? $this.width(): settings.width,
                            'height': (settings.height == 'auto') ? $this.height(): settings.height,
                            'margin': $this.css('margin'),
                            'position': ($this.css('position') == 'absolute') ? 'absolute': 'relative',
                            'top': $this.css('top'),
                            'right': $this.css('right'),
                            'bottom': $this.css('bottom'),
                            'left': $this.css('left'),
                            'padding': 0,
                            'display': 'block',
                            'overflow': 'visible'
                        };
                        cells.width = properties.width / settings.columns;
                        cells.height = properties.height / settings.rows;

                        $this.wrap('<div class="promptumenu_window" />');
                        $this.parent('.promptumenu_window').css(properties);
                        $this.css({
                            'display': 'block',
                            'position': 'absolute',
                            'list-style': 'none',
                            'overflow': 'visible',
                            'height': 'auto',
                            'width': 'auto',
                            'top': 0,
                            'left': 0,
                            'margin': 0,
                            'padding': 0
                        });

                        //and set up each child element
                        $this.children('li').css({
                            'display': 'block',
                            'position': 'absolute',
                            'margin': 0
                        });

                        var lengths = $this.children('li').length;
                        $this.children('li').each(function(i) {
                            var $li = $(this);
                            $li.css({
                                "width": settings.width / settings.columns + "px"
                            });
                            //Moving like a typewriter
                            cursor.x += 1;
                            //if we reach the end of columns, add a new line and reset typewriter
                            if (cursor.x > settings.columns) {
                                cursor.x = 1;
                                cursor.y += 1;
                            }
                            //if we reach the end of the page, turn the page
                            if (cursor.y > settings.rows) {
                                cursor.x = 1;
                                cursor.y = 1;
                                cursor.page += 1;
                            }

                            //attach each li information about it's position in the list
                            $li.data('layout', $.extend({}, cursor));

                            if (settings.direction == 'vertical') {

                                // Lay the pages in a vertical order
                                $li.css({
                                    'top': Math.round((cursor.y * cells.height - cells.height / 2) - ($li.height() / 2) + (cursor.page - 1) *
                                        properties.height),
                                    'left': Math.round((cursor.x * cells.width - cells.width / 2) - ($li.width() / 2))
                                });

                                //this might be a silly approach.. but.. if the list contains an image.. I want to
                                //reposition the li.. because before we didn't know the dimensions of image
                                $li.find('img').bind('load', function() {
                                    var cursor = $li.data('layout');
                                    $li.css({
                                        'top': Math.round((cursor.y * cells.height - cells.height / 2) - ($li.height() / 2) + (cursor.page -
                                            1) * properties.height),
                                        'left': Math.round((cursor.x * cells.width - cells.width / 2) - ($li.width() / 2))
                                    });
                                });

                            } else {
                                //Math.round((cursor.x * cells.width - cells.width/2) - ($li.width()/2) + (cursor.page - 1) * properties.width)
                                var li_left = cells.width * i;
                                //Lay the pages in a horizontal order
                                $li.css({
                                    'top': 0,
                                    'left': li_left
                                });

                                //the same approach for images for the horizontal order
                                $li.find('img').bind('load', function() {
                                    var cursor = $li.data('layout');

                                    $li.css({
                                        'top': Math.round((cursor.y * cells.height - cells.height / 2) - ($li.height() / 2)),
                                        'left': li_left
                                    });
                                });

                            }

                        });


                        cells.pages = cursor.page;
                        $this.data('promptumenu_page_count',
                            cells.pages);

                        //and append the navigation buttons for each page
                        if (cells.pages > 1 && settings.pages == true && settings.showPage == true) {
                            var page_links = '<a class="active">Page 1</a>';
                            for (i = 2; i <= cells.pages; i++) {
                                page_links = page_links + '<a>Page ' + i + '</a>';
                            }

                            $this.parent('div.promptumenu_window').append('<div class="promptumenu_nav">' + page_links + '</div>');

                            //bind the nav buttons to navigate to the specific page
                            $this.parent('div.promptumenu_window').find('.promptumenu_nav a').bind('click.promptumenu', function() {

                                methods.go_to($(this).index() + 1);
                            });
                        }

                        //Make the list size appropriate, so that it could be dragged
                        //(or else users will be able to drag only by clicking the icons, but clicking
                        // on background will not activate dragging)
                        if (settings.direction == 'vertical') {
                            $this.css({
                                'width': properties.width,
                                'height': properties.height * cells.pages
                            });
                        } else {
                            $this.css({
                                'width': properties.width * cells.pages,
                                'height': properties.height
                            });
                        }
                        //Binding all the drag movements
                        $this.bind('mousedown.promptumenu', function(mdown) {
                            //mdown.preventDefault();
                            $this.stop(true, false);

                            var init_pos = $this.position();
                            var click = {
                                'x': mdown.pageX,
                                'y': mdown.pageY
                            };
                            var delta = {
                                'x': 0,
                                'y': 0
                            };
                            var mmove_event = new Array();

                            //bind the mousemove to moving the list
                            $(document).bind('mousemove.promptumenu', function(mmove) {

                                //mmove.preventDefault();
                                var date = new Date();
                                var this_event = {
                                    'time': date.getTime(),
                                    'x': mmove.pageX,
                                    'y': mmove.pageY
   .........完整代码请登录后点击上方下载按钮下载查看