强大的jQuery UI——学习手风琴效果

jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库之上的开源小部件和交互库,它提供了一系列用户界面交互组件,用于构建富交互的网页。它不仅包含了一系列的预定义小部件,如对话框、拖放、工具提示等,还提供了一些用于构建高级交互的底层交互方法。jQuery UI 的设计目标是简化用户界面的开发,使得开发者可以轻松地创建出既美观又实用的用户界面。 阅读详情
今天初次体验了一把jQuery UI,深刻体会到了它的强大之处,以下代码是实现手风琴的效果,需要引入相应的js类库,大家可去官网下载UI插件http://jquery.com/,为了方便,我将jquery-1.7.1.min.js、
jquery-ui-1.8.18.custom.min.js
jquery-ui-1.8.18.custom.css引入进来,并实现了其效果。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴效果</title>
<!--引入jquery类库-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">


$(function (){

$("#accordion").accordion({

header:"h3",	//头信息 h3 必须是h3 页面中div中是什么 这里必须是什么
event:"click",	//面板展开的事件效果 默认是click效果
active:2, //默认展开的面板 从0开始 默认值0
animated:"bounceslide", //面板展开的动画效果
autoHeight:true, //面板的高度 是否是自动 增高的
fillSpace:true,	 //填充到父元素
icons:{	 //图标的设置 header默认时的效果 headerSelected代表面板激活状态时的图标
header:"ui-icon-carat-2-e-w",
headerSelected:"ui-icon-carat-2-n-s"
}

}).sortable({ //排序
axis:"y", //只能在y轴上拖拽排序 x轴 x,y默认 x,y
handle:"h3",	//只能拖拽h3
/*	stop:function (event,ui){	//stop事件 匿名函数 event 浏览器自带的事件处理对象 ui操作控件对象
//ui item help等
ui.item.children("h3").triggerHandler("focusout");
}*/

});

//通过绑定的操作方式 写事件处理
$("#accordion").bind("sortstop",function (event,ui){

//alert("这种方式也可以");
});

});






</script>
</head>


<body>
<!--
jQuery UI 使用 前提
第一步:引入别人的类库
js类库
css样式类库文件
第二步:模拟实现
-->
<div id="accordion" style="width:500px; height:600px; border:1px #0CC solid;">
<div>
<h3><a href="#">First</a></h3>


<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>


<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

</body>
</html>

效果图:


JQuery 入门 - 附案例代码 为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦。 遍历数组很麻烦,通常要嵌套一大堆的for循环。 有兼容性问题。 想要实现简单的动画效果,也很麻烦 代码冗余。 体验jquery的使用 /* * 1. 查找元素的方法多种多样,非常灵活 * 2. 拥有隐式迭代特性,因此不再需要手写for循环了。 * 3. 完全没有兼容性问题。 * 4. 实现动... 阅读详情

相关推荐

48、打造生动交互网页:jQuery 手风琴的全方位应用指南

本文深入介绍了如何使用 jQuery 和 jQuery UI 实现网页中的手风琴交互效果,涵盖从插入手风琴、添加内容、修改属性与外观,到使用 CSS Designer 进行个性化定制的完整流程。同时探讨了手风琴在产品展示和内容导航中的应用场景,分析其节省空间、提升交互性和信息展示效率的优势,并提供了代码、图片与动画方面的性能优化建议。此外,还总结了常见兼容性与性能问题的解决方案,展望了手风琴效果与新兴技术结合的未来可能性,为打造高效、生动的现代网页提供全面指导。

35

toggleRowExpansion实现表格的展开和收起功能(Element的table组件,展开行 type=“expand“ )

一、代码实现: @row-click="handleRowClick" 给表格绑定一个点击事件,该行被单击时,触发该事件 遍历从后台获取的 tableData,给它的每一个item加上一个控制该行展开与否的标志 expanded 在刚刚绑定的点击事件中,调用表格的 toggleRowExpansion(row, expanded) 方法,第一个参数是点击的那行的数据,第二个参数是展开与否 (为true时展开,为false则收起) <template> <el-table :

ddx2019的博客 1万+

实现动态的jQuery图片滑动手风琴效果

在现代网页设计中,简洁而强大的用户界面已经成为标准配置。jQuery作为最流行的JavaScript库之一,其在简化DOM操作、事件处理、动画和AJAX交互方面的卓越性能,一直被视为前端开发者的好帮手。通过学习本章内容,你将了解到jQuery的核心概念、其独特优势以及在前端开发工作流中的实际应用。jQuery提供了一些内置的滑动方法,使得实现滑动动画变得轻而易举。slideUp()等方法可以用来创建平滑的展开和折叠效果。// 展开元素// 折叠元素// 切换展开和折叠状态。

weixin_36328210的博客 1099

el-table树形数据全部展开和收缩(toggleRowExpansion)

根据element-ui文档的toggleRowExpansion实现el-table树形数据全部展开和收缩

weixin_46724415的博客 1万+

构建响应式jQuery垂直手风琴下拉菜单

jQuery自2006年发布以来,迅速成为开发者青睐的JavaScript库,其核心优势在于简化了HTML文档遍历、事件处理、动画以及Ajax交互。本章我们将探讨如何利用jQuery库设计出动态且响应迅速的交互式用户界面(UI)。jQuery库简介:作为DOM操作和事件处理的简化工具,jQuery提供了一套丰富的API,使得原本复杂的JavaScript代码变得更加简洁易懂。交互式UI设计:强调用户体验(UX)的重要性,介绍如何结合jQuery设计出更符合用户操作习惯的界面。

weixin_34162851的博客 662

掌握jQuery Slidorion:创建动态手风琴图片轮播

本文还有配套的精品资源,点击获取 简介:jQuery Slidorion插件结合了图片轮播和手风琴效果,通过自定义选项和丰富的交互功能,为网页设计提供了独特的动态体验。本文将介绍如何通过使用jQuery库、HTML结构、CSS样式和JavaScript代码来实现一个既美观又实用的手风琴式图片轮播效果。 1. jQuery库的应用 在前端开发的世界里,jQue...

weixin_33205138的博客 1104

element-ui toggleRowExpansion的使用

1.toggleRowExpansion是实现手动展开的功能不通过下拉按钮比较方便,最好配合row-click进行使用 <el-table ref="multipleTable" @row-click="rowClick" :data="tableData"> <el-table-column type="expand"> <template slot-scope="props"> &

Mr-k的博客 4969

掌握jQuery UI:打造互动丰富的Web界面

本文深入探讨了jQuery UI库的使用方法和各个模块的功能,涵盖了如何下载和包含jQuery UI库、其核心部分、以及如何使用各种组件如手风琴、自动完成和美化按钮来提升Web界面的交互性和美观性。通过详细的步骤和示例代码,文章为开发者提供了实用的指导。

weixin_33298352的博客 489

elementui多级表格toggleRowExpansion失效的解决

项目中使用了expand构造了多级表格,但子孙表格里的headers和父级表内容不同,所以无法直接使用树形表格,用expand插槽分别写了三个table,操作孙级表格的toggleRowExpansion时就会失效,这时候只有在子表中添加row-key属性,区分不同表格的id,页面维护expands数组,即可正常解决。

Roshan2009的博客 1988

掌握jQuery UI:构建交互式Web应用

本文还有配套的精品资源,点击获取 简介:jQuery UI是一个扩展了jQuery库的JavaScript开源库,专门用于提供丰富的用户界面组件和交互功能,以构建专业外观的网页应用。通过实现Dialog、Datepicker、Draggable等组件,简化了前端开发,并且通过ThemeRoller进行主题定制,保证了跨浏览器的兼容性。该库拥有广泛的社区支持和详细的API文档...

weixin_42466723的博客 1529

掌握jQuery UI与AngularJS:创造交互式网页

本文深入探讨了jQuery UI和AngularJS在创建交互式用户界面中的应用。jQuery UI提供了一套强大的工具,用于构建小部件、动画效果和交互功能,而AngularJS则是一个完整的框架,使得Web应用的开发更加模块化和数据驱动。文章详细解释了如何利用这些工具简化开发流程,并通过实例展示了如何快速实现丰富的交互效果。

weixin_36231030的博客 369

el-table嵌套,实现父子选择框勾选联动(toggleRowSelection),并实现全选,单选,数据回显

效果图如下:声明:代码参考与两位博主:1.2.在本文章中,我会讲一点代码的逻辑,仅供参考,因为代码是活的,人是死的(如果人是活的,代码怎么可能是死的呢)话不多说我们开始!

weixin_44780971的博客 1万+

信息安全-入侵检测技术原理与应用

入侵检测技术原理与应用、入侵检测概述、入侵检测技术、入侵检测系统组成与分类、入侵检测系统主要产品与技术指标、入侵检测系统应用

我的个人博客 1万+

jQueryUI 1.10:jQuery 的用户界面库(二)

原文:zh.annas-archive.org/md5/67D4BB507B37025C38972681032F3C25 译者:飞龙 协议:CC BY-NC-SA 4.0 第四章:手风琴小部件 手风琴小部件是另一个 UI 小部件,允许您将内容分组到可以通过访问者交互打开或关闭的单独面板中。因此,大部分内容最初都是从视图中隐藏的,就像我们在上一章中看到的选项卡小部件一样。 每个容器都有一个与之关联的标题元素,用于打开容器并显示内容。当单击标题时,其内容将以动画形式滑入视图下方。当前可见的内容被隐藏,当我们

龙哥盟 1052

当版图同学只给GDS文件时,我是这样用Calibre PEX和Cadence做后仿真的(保姆级避坑)

本文详细介绍了在模拟IC设计中,当仅获得GDS文件时,如何利用Calibre PEX和Cadence进行高效后仿真的完整流程。涵盖从寄生参数提取到Spectre模型创建的实战技巧,特别针对版本兼容性、文件独立性和参数可调性等常见问题提供解决方案,帮助工程师规避协作中的典型陷阱。

weixin_42556197的博客 243

树莓派4B+WebRTC实现远程监控:5步搞定公网视频流传输(含Node.js配置)

本文详细介绍了如何利用树莓派4B和WebRTC技术,通过5个关键步骤搭建低延迟、高隐私的远程监控系统。重点阐述了WebRTC点对点传输相较于传统方案的优势,并提供了包含Node.js信令服务器配置、树莓派视频流捕获与推送、以及移动端自适应观看页面的完整实现方案,帮助用户实现公网视频流传输。

websocket5live的博客 292

如何将jQuery手风琴转换为CSS3手风琴

How to turn jQuery accordion into CSS3 accordion Have you ever used ordinary accordion plugins in your projects, I believe that yes, and, most of them use javascript to work (or jQuery). Usually we us...

cuken7684698822的博客 116

Caffeine:为每个元素动态设置过期时间

Caffeine利用expireAfter方法实现为每个元素动态设置过期时间

大数据开发、JAVA开发、人工智能AI 1万+

Mobify Bellows:移动优先的手风琴UI模块

Mobify Bellows:移动优先的手风琴UI模块 在当今的网页设计中,移动优先的原则越来越受到重视。为了满足这一需求,Mobify Bellows 应运而生,它是一个专为网页渐进式披露设计的移动优先手风琴UI模块。本文将详细介绍Mobify Bellows的项目特点、技术分析以及应用场景,帮助你更好地理解和使用这一开源项目。 项目介绍 Mobify Bellows 是一个轻量级的手风琴UI模...

gitblog_01126的博客 847

别再只玩积木了!用乐高EV3和官方软件,手把手教你做个能巡线的小车(附完整代码)

本文详细介绍了如何利用乐高EV3套件和官方软件制作智能巡线机器人,从硬件组装到软件编程全面覆盖。通过传感器原理讲解、控制算法调试等工程化细节,帮助读者掌握机器人开发的核心理念,特别适合STEAM教育和硬件编程爱好者实践。

weixin_30776273的博客 449

Android 9.0 SystemUI禁用长按recent键的分屏功能

​ 在9.0的系统产品开发中,系统对于多窗口模式默认会有分屏功能的,但是在某些产品中,需要禁用分屏模式,所以需要在导航栏中 禁用长按recent的分屏模式功能,接下来分析下相关分屏模式的实现 ​

安卓兼职framework和app工程师的博客 448

【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件

Accordion(手风琴)是网站中常用的效果之一,用于一组内容(图片、文本等)之间的切换显示。使用 jQuery 能够轻松实现 Accordion 效果,今天这篇文章向大家推荐网站开发中常用的20款优秀 jQuery 手风琴效果插件。 您可能感兴趣的相关文章 期待已久的2012年度最佳 jQuery 插件揭晓精心挑选的优秀 jQuery Ajax 分页插件和教程推荐几款非常棒的

freshlover的专栏 7604

基于混合智能框架的景区边界范围预测与补全系统

摘要 本文提出一种混合智能框架,结合随机森林模型和GIS规则约束,解决景区边界缺失问题。系统基于Python和ArcGIS平台,利用多源地理空间数据训练随机森林分类器预测景区范围,并集成地形、水文、道路等GIS规则进行优化。实验结果表明,该方法能有效预测15000个景区的边界,精度优于单一模型。创新点在于: 1)数据驱动与知识驱动相结合的混合智能范式; 2)面向全国尺度的大规模边界补全; 3)提供完整的Python+ArcGIS实现方案。该系统为景区精细化管理提供了技术支撑,具有实用价值。

huanghm88的专栏 283

JqueryUI学习笔记-手风琴面板accordion

Insert title here /* IE has layout issues when sorting (see #5413) */ .group { zoom: 1 } $(function() { var accordion = $("#accordion").accordion({ //配置当前打开的手风琴面板的索引,可以使用bool值或者int值,默认为0,

dc15822445347的专栏 3936

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

上一篇: 多款jquery实现隔行换色、多选框选中变色【强大】
下一篇: jQuery UI弹窗效果
php_897721669
博客等级 码龄15年 32粉丝 45原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值