基于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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
Javascript操作dom对象之select全面解析
Apr 24 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP中header用法小结
2016/05/23 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
2014年社区植树节活动方案
2014/02/28 职场文书
报效祖国演讲稿
2014/09/15 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书