基于jQuery实现仿淘宝套餐选择插件


Posted in Javascript onMarch 04, 2015

基于jQuery实现仿淘宝套餐选择插件

首先是页面HTML代码

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="./option-jquery-dc.js"></script>

<link rel="stylesheet" href="css/option-jquery-dc.css"/>

<!-- lang: html -->

<div><dt>本地调用</dt><dd class="tb-prop testlocal"></dd><br/></div><div><dt>ajax调用</dt><dd class="tb-prop testajax"></dd></div>

然后调用的js

<!-- lang: js -->

<script>

/************************************

 * 基于本地json数据的选项列创建

 ****************************************/

var datanodes=[

    {text:"官方标配",value:"1",selected:true},

    {text:"套餐一",value:"2"},

    {text:"套餐二",value:"3"},

    {text:"套餐三",value:"4"},

    {text:"套餐四",value:"5"},

    {text:"套餐五",value:"6"},

    {text:"套餐六",value:"7"},

    {text:"套餐七",value:"8"},

    {text:"套餐八",value:"9"},

    {text:"套餐九",value:"10"}

];

/**

 * @type {mylist}

 * @param className 容器支撑层的css名称

 * @param 用户点击后调用的回调函数 由开发者自定义

 */

var mylistobjLocal=new OptionList("testlocal","mycall");

mylistobjLocal.createListHtml(datanodes);

/************************************

 * 基于远程服务器的json数据的选项列创建

 * @type {mylist}

 * @param className 容器支撑层的css名称

 * @param 用户点击后调用的回调函数 由开发者自定义

 */

var mylistobjAjax=new OptionList("testajax","mycall");

var url="http://127.0.0.1/option-jquery-dc/testJson.php";

/**

 * 基于url创建一个选项列表

 */

mylistobjAjax.createListHtmlForAjax(url);

/***

 * 用户选中某一个选项的回调函数

 * @param result 返回当前选中的项的相关参数

 */

var mycall=function(result){

    alert("您选中了: "+result.text+":"+result.value);

}

以上就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
PHP7新特性简述
Jun 11 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 #Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 #Javascript
JavaScript常用脚本汇总(三)
Mar 04 #Javascript
JavaScript常用脚本汇总(二)
Mar 04 #Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 #Javascript
JavaScript常用脚本汇总(一)
Mar 04 #Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 #Javascript
You might like
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python获取当前路径实现代码
2017/05/08 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python实现归并排序算法
2018/11/22 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Python日志syslog使用原理详解
2020/02/18 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
书法培训心得体会
2014/01/05 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis