foldcontent-zhihu-jquery

foldcontent-zhihu-jquery

用 jquery 实现知乎收起答案功能

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

Introduction

Demo

src/ 目录下是🌰

main: dist/foldcontent_jquery.min.js

Install

$ npm install foldcontent-zhihu-jquery@">=1.0.1" --save

Usage

方法一: webpack 加载

HTML

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

js

require('foldcontent-zhihu');
$(function () {
    $('.unfold').foldContentPlugin({
        'btnBg': 'lightpink',
        'btnColor': '#fff',
        'paddingTop': '2px'
    });
});

webpack

// webpack 全局加载 jquery 的一种方法

resolve: {
        
    alias: {
            
        jquery: path.resolve(js_path, 'lib/01-jquery-1.11.3.min.js')
        
}
},

plugins: [ 
        
    new webpack.ProvidePlugin({
            
        $: 'jquery' // 将jquery暴露给所有模块，不用显式require('jquery')；只要模块的代码中出现了$，webpack就会自动将jQuery注入。
        
    })
]

方法二: script 标签引入 dist/目录下的 foldcontent_jquery.min.js 文件

HTML

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

JS

$('.unfold').foldContentPlugin({
        // ...
});

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

LICENSE

MIT

MIT License