Jira插件开发中引入Bootstrap

jira本身是带有aui的，个人还是比较喜欢jQuery及Bootstrap，jira里面也内置了jQuery，页面中使用jQuery的时候只需要将$换成jQuery就可以了，例如使用Bootstrap的弹出提示

$webResourceManager.requireResource("com.company.jira.test:bootstrap-resources")
<script>
    jQuery(function () {
        jQuery("#test").popover({
            title:'迭代总结',
            html:true,
            content:function(){
                return '迭代总结内容';
            }
        });
    });
</script>
<a id="test" href="#">填写迭代总结</a>

 

 

如何引入Bootstrap？下载Bootstrap得到bootstrap.css、bootstrap.js以及两个png图片文件，分别将它们放入项目resources下的css、js和img文件夹中

需要在atlassian-plugin.xml注册资源

 

<web-resource key="bootstrap-resources" name="Bootstrap Resources">
        <resource type="download" name="bootstrap.css" location="css/bootstrap.css" />
        <resource type="download" name="glyphicons-halflings.png" location="img/glyphicons-halflings.png">
            <param name="content-type" value="image/png"/>
        </resource>
        <resource type="download" name="glyphicons-halflings-white.png" location="img/glyphicons-halflings-white.png">
            <param name="content-type" value="image/png"/>
        </resource>
        <resource type="download" name="bootstrap.js" location="js/bootstrap.js" />
    </web-resource>

 

 

如果需要用到bootstrap中的icon，那么就需要修改一下css中对应的图片路径，不用可以跳过

打开bootstrap.css搜索png，可以搜到2个地方分别在2285行和2309行

 

background-image: url("../../download/resources/atlassian-plugin-key:bootstrap-resources/glyphicons-halflings.png");

background-image: url("../../download/resources/atlassian-plugin-key:bootstrap-resources/glyphicons-halflings-white.png");

 atlassian-plugin-key是该插件的key即atlassian-plugin.xml中的key值

<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">

 

 

在页面中引入

$webResourceManager.requireResource("atlassian-plugin-key:bootstrap-resources")

 atlassian-plugin-key同上