您的当前位置:首页正文

基于jQuery实现在线选座之高铁版_jquery

2023-12-05 来源:站点网
导读这里我给的是一个看电影选座的演示,jQuery选座完成电影院座位布置、选座计价的操作。接着我就是html代码了,左边是布局图,右边是选座价格的相关信息,css我就不叙述了接着应该就是重点了jquery代码了第一就是座位的布局情况,有过道以及座位的其次还需要座位在哪一行那一列的座位的选中状态,分为可选的、售出状态最后在外面点击(click)座位图中的位置时,根据当前座位的状态做出不同的处理,包括计算票数和金额总计等。
效果图展示:

查看演示 源码下载

除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的。假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置、选座、不同等级座位计价等操作。

HTML

和上一篇文章一样:jQuery在线选座订座(影院篇),我们使用相同的html结构,左侧显示位置布局图,右侧显示选座相关信息。

相关CSS代码请下载DEMO源码查看,本文不再详述。

jQuery

重点来关注jQuery代码,我们还是使用在线选座插件:jQuery Seat Charts。首先安排高铁车厢座位布局,我假设在01号车厢内有一等座和二等座若干,中间通过出入口通道隔开,大致布局如下:

上面的代码f表示的是一等座,e表示的是二等座,符号"_"表示过道。

然后我们要定义座位类型的相关属性:

上面的代码定义了一等座和二等座的价格、类别名称以及对应的css样式。他们可以在后面通过data()方法调用。

接下来我们用naming来定义座位图的行列信息,如下top设置为true则表示显示顶部横坐标(行),columns和rows分别用来定义横坐标(行)和纵坐标(列)的值,getLabel用来返回座位信息,如:01A表示01排A座。

然后我们使用legend来定义图例,对应图例关联的元素是#legend,并对座位类型定义对应的样式。

最后在外面点击(click)座位图中的位置时,根据当前座位的状态做出不同的处理,包括计算票数和金额总计等,可以参照影院篇的说明。

最后,我们使用get()和status()方法设置已经售出不可选的座位。

//已售出不可选座

值得一提的是,当网站购票非常频繁时需要注意及时刷新座位图,如果座位已经被抢占了则不可选。我们可以使用ajax进行异步请求,并且设置每隔10秒钟运行一次,可以参照如下代码:

小编还为您整理了以下内容,可能对您也有帮助:

怎么做一个程序让大家可以在线选座位呢_如何在线选座

这里我给的是一个看电影选座的演示,jQuery选座完成电影院座位布置、选座计价的操作。

接着我就是html代码了,左边是布局图,右边是选座价格的相关信息,css我就不叙述了

接着应该就是重点了jquery代码了

第一就是座位的布局情况,有过道以及座位的

其次还需要座位在哪一行那一列的座位的选中状态,分为可选的、售出状态

最后在外面点击(click)座位图中的位置时,根据当前座位的状态做出不同的处理,包括计算票数和金额总计等。

jquery的选座插件,怎么把里面的参数传出去

/**这个是一个Jquery手风琴样式的菜单的插件,应用的时候要进行options内的参数设置,各参数*解释如下:

**/

// Setup options    

options = jQuery.extend({    

speed: 'fast', // 菜单打开时的速度 - 可用选项有: slow, normal, fast    

activateitem: 'true', // 'true': 在当前窗口打开链接地址, '2': Activate item #2    

active: 'active', // 激活状态时的class 样式名称    

header: 'header', // header样式的 Class 样式名称     

hover: 'hover', // hover状态时的Class 样式名称     

opened: 'opened', // header items元素的Class 样式名称

    

closed: 'closed', //  header items 无线的class样式名称    

keepheight: 'true' // 'true': 设置每个手风琴元素的高度为最大尺寸, 'false': Leave height as is    

}, options);

jQuery在线选座 如何用ajax实现局部刷新

我把代码发你吧:function

fn1(){

//get异步访问

$.get(

"/WEB_Ajax/ajaxServlet2",

//url地址

{"name":"张三","age":25},

//请求参数

function(data){

//执行成功后的回调函数

//{\"name\":\"tom\",\"age\":21}

alert(data.name);

},

"json"

);

}

function

fn2(){

//post异步访问

$.post(

"/WEB_Ajax/ajaxServlet2",

//url地址

{"name":"李四","age":25},

//请求参数

function(data){

//执行成功后的回调函数

alert(data.name);

},

//表示服务器返回的数据用json解析

"json"

);

get,post请求都有了……还有一种通用的ajax

30款超实用的JQUERY插件大合集

互联网是一个神奇的东西,你在这里碰到臭味相投的朋友,发现世界各个角落的趣闻。最有意思的是,总有人能想到一些新奇古怪好玩有趣的点子,分享给整个世界,让我们的工作更轻松,让我们的生活更有意思。实际上jQuery就是这样诞生的,然后世界范围内许多著名的开发者开始制作出更多实用而好用的jQuery插件,它们不仅可以自由使用,而且保持着轻量级的状态,不会对服务器产生太大的压力。

jQuery 的存在让网页设计和开发变得更加简单快捷,用好它确实能事半功倍。在大概半年前我们曾经整理过一波jQuery插件:《想让网页更酷炫!不要错过这30款免费JQUERY插件合集》。随着时间推移,更多的优秀插件横空出世,于是,今天我们又搜集整理了30款实用惊艳的jQuery插件,帮你加速设计开发。

搜集整理的时刻到了!接下来,你可以快速浏览整个列表找若正好需要的,或者全部下载下来以备不时之需。但是前往别忘记了,干货易得,但是只有实践之后才能真正掌控!

网页布局插件

pagePiling.js

   这款插件可以帮你制作堆叠式的网页布局,让你的网页像幻灯片一样一页一页翻看。为了方便不同实用习惯的用户,你还可以使用顶部的Tebs进行翻页浏览,颇为贴心。

gridscrolling.js

   这一插件能让你将特定的区域置于栅格中,让你更轻松地使用光标导航。

Animsition

   如果你只是想为页面切换间增加转场动效的话,这个插件能帮到你。

Brick Work

   这个只有15k的小插件能帮你创建响应式的动态布局,最关键的是它有很多实用的小功能。

ScrollMe

   这是一个轻量级的jQuery插件,可以帮你在页面中添加简单的滚动效果。这些效果包括大小、透明度、选择和闪烁等各种不同的方面。

jQuery Bootgrid

   这是一个同Bootstrap配合实用的栅格控制插件。

jquery.smoothState.js

   这一插件主要是提高多页面网页的性能,让它们能像单页面网站一样流畅。

multiscroll.js

   如果你想在页面中创造多方向卷动的效果的话,你可以实用这个插件。

多媒体插件

Focuspoint

   这一插件能让你的图片动态裁剪填补空白区域。最重要的是,图片不需要你进行手工裁剪。

Vide

   如果你想制作一个视频背景的网站的话,这个插件会帮到你。方便实用,设置简单,效果明显。

Dense.js

   这一插件是为视网膜级别的高清图片而生的,可以让这些图片更恰当地展示,抓住用户的眼球。

Covervid

   这个简单的jQuery插件能让HTML5视频像背景图片一样流畅稳定地在网页上展示出来。

图片和展示

Simple jQuery Slider

   这是一个轻量级的滑动展示插件,它能让让图片和视频等多媒体流畅地以幻灯片的形式展现出来。

Photopile JS

   这个插件能模拟出照片四散错落堆栈的效果。

Justified.js

   这个插件能让许多照片整齐地平铺在页面上。

Shuffle Images

   顾名思义,这个jQuery插件能随机选取照片,你唯一需要做的就是晃动一下鼠标。

Skippr

   这是一个非常轻量级的简单的幻灯片jQuery插件。

排版插件

jQuery.fontFlex.js

   这是一个轻量级的字体调整插件,它可以让字体根据屏幕尺寸或者浏览器的大小动态扩展。对于以内容承载为主的网页而言,这种插件还是蛮实用的。

Morphext

   这是一个由jQuery所支持的 animate.css文件,让特定的文字短语具有旋转效果。

Splitchar

   这是颇为有趣的jQuery插件,它可以让特定的单词、短语或者句子中的字母显示为色彩分割的效果,可以分割为2种色彩,也可以更多。

实用插件

scotchPanels.js

   这是一个帮你生成面侧边栏面板的插件。

jQuery Confirm Mailto

   这是一个帮助用户防止垃圾邮件的插件,当用户点击邮件链接的时候会有弹出框弹出,提醒用户。

jQuery prettySocial

   这个jQuery插件为用户提供了自定义分享的功能,主要提供了Twitter、、Google+ 和Pinterest的分享链接。对于针对海外市场的设计师和开发者而言,非常实用。

BootstrapValidator

   这是一个实用的信息验证插件,主要针对的是Bootstrap构建的网站。

jNottery

   这是一个非常实用的插件,可以让用户在特定的网页中添加笔记。

scrollToBySpeed.js

   这个插件能让网页匀速滚动,而不是通常所见的那种符合物理规则的滚动。有时候,你正好需要这样的插件,谁说不是呢?

HideSeek

   这是一个用于实时搜索的插件,简单,并且可以定制。

Responsive Tabs

   这一插件可以提供响应式的选项卡的功能,方便兼容不同尺寸的屏幕和不同的浏览器。

jQuery.planetarium

   这个jQuery插件可以帮你构建一个可交互的地球,当然如果你有时间有想法的话,构建一个宇宙都没问题。

ClockPicker

   最后,这是一个参考Android 4.4中的闹钟程序所设计时间选择器,比较实用。

站点网还为您提供以下相关内容希望对您有帮助:

怎么做一个程序让大家可以在线选座位呢_如何在线选座

接着应该就是重点了jquery代码了 第一就是座位的布局情况,有过道以及座位的 其次还需要座位在哪一行那一列的座位的选中状态,分为可选的、售出状态 最后在外面点击(click)座位图中的位置时,根据当前座位的状态做出不同...

jQuery在线选座 如何用ajax实现局部刷新

我把代码发你吧:function fn1(){ //get异步访问 .get("/WEB_Ajax/ajaxServlet2",//url地址 {"name":"张三","age":25},//请求参数 function(data){ //执行成功后的回调函数 //{\"name\":\"tom\",\"age...

jquery的选座插件,怎么把里面的参数传出去

/**这个是一个Jquery手风琴样式的菜单的插件,应用的时候要进行options内的参数设置,各参数*解释如下:**/// Setup options options = jQuery.extend({ speed: 'fast', // 菜单打开时的速度 - 可用选项有: slow...

jquery-seat-charts 怎么在座位上写东西

对每个座位(字母)都这样做 现在,用户将能够传递自定义ID和标签,该标签和标签将覆盖由getId和 getLabel 新格式如下:a [ID,label] a [ID] aaaaa 因此,即使是一个座位,您也可以覆盖ID或标签(或两者)。基本上ID...

jQuery validate 怎么验证一串数字是手机号或者是座机号

// 手机号码验证jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;return this.optional(element)(length == 11 && /^(((13[0-9]{1})(15[0-9]{1}))+\d{8})$/...

美团里电影院选座图是怎么做的

座位信息全部直接使用画布动态绘制生成,jQuery-Seat-Charts插件来实现在线电影票选座功能。

怎么选择使用jQuery版本

目前jQuery有三个大版本:1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)2.x:不兼容ie678,很少有人使用,官方只做...

jQuery的使用方法

使用步骤如下:1.jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。2.然后我们来开始编辑HTML界面代码。3.使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的...

基于jQuery1.9版本如何判断浏览器版本类型_jquery

一.自定义代码:以上代码中,等号后面的表达式返回值是布尔类型的,用来表示是否支持此浏览器。这样就实现了自定义的$.browser效果。二.判断IE6浏览器:jquery1.9之前使用以下代码:jquery1.9和之后使用以下代码:三.判断IE6-...

什么是Web应用程序_基于Rails和jQuery的Web应用程序敏捷开发

Rails是基于Ruby语言的Web应用开发框架,该框架的最大特点是“约定优先配置”,和目前其它的一些MVC框架比较,它不需要繁琐复杂以及数量众多的配置文件,它已经订立了一系列使用该框架时要遵守的约定,只要开发人员遵守这些约定,那么可以实现零...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top