foldcontent-zhihu

foldcontent-zhihu

用原生 js 实现知乎收起答案功能

具体实现可以看一下这篇文章 ٩(ˊᗜˋ*)و

Introduction

Demo

src/ 目录下是原生 js 写法🌰

main: dist/foldcontent.min.js

Install

• 请安装3.0.11及以上版本, version1.0.0 ~ 3.0.10 经测试存在 bug (>_<) 请已经 install 的盆友们更新一下吧

$ npm install foldcontent-zhihu@">=3.0.11" --save

Usage

方法一: Work with module bundler

HTML

<div class="foldcontent-panel">
    <div class="part-content"><!--此处是部分内容--></div>
    <div class="all-content"><!--此处是全部内容--></div>
</div>
<!-- ... -->

JS

var foldcontent = require('foldcontent-zhihu');
var foldcontent_demo = new foldcontent({
        'btnBg': '#eff6fa',
        'btnColor': '#0c5897',
        'fixBtnBg': '#81baeb',
        'fixBtnColor': '#fff',
        'fontSize': '12px',
        'padding': '5px',
        'initialText': '展开',
        'fixText': '收起',
        'bottom': '10px',
        'right': '20px',
        'lineHeight': '1'
});

方法二: 直接通过 script 标签引入 dist/目录下的 foldcontent.min.js 文件

HTML

<div class="foldcontent-panel">
    <div class="part-content"><!--此处是部分内容--></div>
    <div class="all-content"><!--此处是全部内容--></div>
</div>
<!-- ... -->
<script src="foldcontent.min.js"></script>

JS

var foldcontent_demo = new foldcontent({
    // ...
});

Options

{
    btnBg: '#eff6fa',     // 按钮背景颜色
    btnColor: '#0c5897',  // 按钮字体颜色
    fixBtnBg: '#81baeb',  // 固定定位按钮背景颜色
    fixBtnColor: '#fff',  // 固定定位按钮字体颜色
    fontSize: '12px',     // 按钮字体大小
    padding: '5px',       // 按钮尺寸
    initialText: '展开',   // 按钮初始文本内容
    fixText: '收起',       // 固定定位按钮文本内容
    bottom: '10px',       
    right: '20px',        // 绝对定位
    lineHeight: '1'       // 按钮行高
};

How to Run

$ npm install
$ npm start

http://localhost:8081/src/demo.html

LICENSE

MIT

MIT License